<template>
  <!-- 商品化专利主页面 -->
  <div class="commodity">
    <el-container>
      <el-header class="header">
        <div class="headerDiv_one">产品名称：{{ productName }}</div>
        <div class="headerDiv_two">
          <div>
            <!-- 检索信息 -->
            <mySearch style="width: 500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
            </mySearch>
          </div>
          <div style="margin-right: 10px;display: flex;">
            <div>
              <el-button-group style=" display: flex; justify-content: flex-start;margin-right: 10px;">
                <el-button size="small" :type="componentType === 'visual' ? 'primary' : ''"
                  @click="onChange2('visual')">可视化</el-button>
                <el-button :type="componentType === 'commodityTable' ? 'primary' : ''" @click="onChange2('commodityTable')"
                  size="small">列表</el-button>
                <el-button :type="componentType === 'Card' ? 'primary' : ''" @click="onChange2('Card')"
                  size="small">卡片</el-button>
              </el-button-group>
            </div>
            <div>
              <el-popover placement="bottom" title="" width="250" trigger="click">
                <el-main class="patent-fast-edit-popover">
                  <div class="btn" @click="handleSelectNumber(-1)">取消选择</div>
                  <div class="btn" @click="handleSelectNumber(0)">本页选择</div>
                  <div class="btn" @click="handleSelectNumber(1)">全部选择</div>
                  <el-divider></el-divider>
                  <div class="select-number">
                    <span>从</span>
                    <el-input size="mini" v-model="queryParams.startNumber" @change="change1"></el-input>
                    <span>到</span>
                    <el-input size="mini" v-model="queryParams.endNumber" @change="change2"></el-input>
                    <el-button type="text" size="" @click="handleSelectNumber(2)">确定</el-button>
                  </div>
                </el-main>
                <el-button type="primary" size="small" class="margin-right_10" slot="reference">
                  选择专利<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
              </el-popover>
            </div>
            <div>
              <el-dropdown split-button type="primary" size="small" @click="handleCommand('0')"
                @command="handleCommand($event)">
                <span>删除</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-dropdown placement="left-start" @command="handleCommand($event)">
                      <span>专利导入</span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">专利号导入</el-dropdown-item>
                        <el-dropdown-item command="2">Excel导入</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-dropdown-item>
                  <el-dropdown-item command="3">显示栏位管理</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <component :is="componentType" :tableData="tableData" :queryParams="queryParams"></component>
      </el-main>
      <el-footer>
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import commodityTable from './view/table.vue'
export default {
  components: {
    commodityTable,
  },
  props:{
    productId:{
      default:0
    },
    productName:{
      default:'--'
    },
  },
  data() {
    return {
      //检索字段
      searchFiled: [
        {
          label: '标题',
          value: 'productName1',
          type: 1,
          placeholder: '请输入标题'
        },
        {
          label: '摘要',
          value: 'productName2',
          type: 1,
          placeholder: '请输入摘要'
        },
        {
          label: '专利号',
          value: 'productName3',
          type: 1,
          placeholder: '请输入专利号'
        },
        {
          label: '申请号',
          value: 'productName4',
          type: 1,
          placeholder: '请输入申请号'
        },
        {
          label: '申请人',
          value: 'productName5',
          type: 1,
          placeholder: '请输入申请人'
        },
        {
          label: '权利人',
          value: 'productName6',
          type: 1,
          placeholder: '请输入权利人'
        },
      ],
      //检索条件
      searchOption: {
        questionName: this.eventName,
        applicationScenario: this.applicationScenario
      },
      // 显示指定的子组件
      componentType: 'commodityTable',
      // 查询专利所需字段
      queryParams: {
        current: 1,
        size: 10,
      },
      // 专利总数
      total: 0,
      // 子组件table数据源
      tableData: [],
    }
  },
  mounted() {

  },
  methods: {
    onChange2(val) {
      this.componentType=val
    },
    // 选择专利事件
    handleSelectNumber(val) { },
    // 起始数字框
    change1(){},
    // 结束数字框
    change2(){},
    // 分页
    handleCurrentChange(val) { },
    // 删除等下拉菜单
    handleCommand(event) {
      console.log(event);
    },
    //获取检索条件检索
    search(val) {

    },
  },
}
</script>
<style lang="scss">
.commodity {
  .el-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1;
    background: #fff;
  }
}
.btn1 {
  background: #909399;
}

.btn1:hover {
  background-color: #a4a7ab;
}

.patent-fast-edit-popover {
  padding: 0 !important;

  .btn {
    color: #000;
    line-height: 40px;
    border-radius: 5px;
    padding-left: 10px;
    cursor: pointer;

    &:hover {
      background: #adadad;
      color: #fff;
    }
  }

  .disabled {
    cursor: not-allowed !important;
  }

  .bottom {
    text-align: right;
    color: #1e9fff;
    line-height: 40px;
    padding-left: 10px;
    font-size: 18px;
  }

  .el-divider--horizontal {
    margin: 10px 0 !important;
  }

  .select-number {
    .el-input {
      width: 70px;
    }

    span {
      padding: 0 3px;
    }
  }
}
.patent-left {
  margin-top: 69px;
  overflow: hidden;
  border-top: 1px solid rgb(228 231 237);
}
</style>
<style lang="scss" scoped>
.commodity {
  .header {
    height: 80px !important;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px !important;
  }

  .headerDiv_one {
    width: 100%;
    margin: 0 0 10px 10px
  }

  .headerDiv_two {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

}</style>