<template>
  <!-- 商品化专利主页面 -->
  <div class="commodity height_100">
    <el-container>
      <el-header class="header">
        <div class="headerDiv_one">产品名称：{{ productName }}</div>
        <div class="headerDiv_two">
          <div>
            <!-- 检索信息 -->
            <searchPatent ref="searchPatent" style="margin-left: 10px;" :searchFiled="searchFiled"
              @searchValue="handleSearchValue"></searchPatent>
          </div>
          <div style="margin-right: 10px;display: flex;">
            <!-- 视图切换 -->
            <div style="margin-right: 10px;">
              <el-button-group class="margin-left_10">
                <el-tooltip v-for="item in viewList" :key="item.value" class="item" effect="dark" :content="item.title"
                  placement="top">
                  <el-button @click="handleChangeView(item)" size="small"
                    :type="viewSelected === item.value ? 'primary' : ''">
                    <i :class="item.btn" style="font-size: 12px !important;"></i>
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </div>
            <!-- 显示栏位管理等下拉菜单 -->
            <div>
              <el-dropdown trigger="click" split-button type="primary" size="small">
                <span @click="handleCommand('3')">显示栏位管理</span>
                <el-dropdown-menu slot="dropdown" class="text-align_center">
                  <el-dropdown-item>
                    <el-dropdown @command="handleCommand($event)" placement="left-start">
                      <p> 专利导入 </p>
                      <el-dropdown-menu style="text-align:center">
                        <el-dropdown-item command="0"> Excel导入 </el-dropdown-item>
                        <el-dropdown-item command="1">专利号导入 </el-dropdown-item>
                        <el-dropdown-item command="2">检索条件导入 </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-main v-loading="loading" style="padding: 0 !important;">
        <div class="patent-list-container">
          <div class="height_100"> 
            <component :is="viewSelected" :tableData="tableData" :queryParams="queryParams" :patentNoList.sync="patentNoList"
              :column="customList" @on-sort="handleSort" @addSelect="getChoosePatentNo" :refresh='refresh' @clickPatentNo="handleClick">
            </component>
          </div>
        </div>
      </el-main>
      <el-footer style="display: flex;justify-content: space-between;align-items: center;">
        <div>
          <div style="display:flex;align-items:center">
            <span v-if="selectedTotal > 0">
              已勾选 <b>{{ selectedTotal }}</b> 条
            </span>
            <el-popover placement="bottom" title="" width="220" trigger="click">
              <el-main class="patent-fast-edit-popover" v-loading="selectNumberLoading">
                <div class="btn" @click="handleCancelSelectNumber">取消选择</div>
                <div class="btn" @click="handleSelectNumber(0)">本页选择</div>
              </el-main>
              <el-button type="info" size="small" class="margin-left_10" slot="reference"> 选择专利<i
                  class="el-icon-arrow-down el-icon--right"></i></el-button>
            </el-popover>
            <el-button @click="handleDel" v-if="selectedTotal > 0" type="primary" size="small" style="margin-left: 10px;">
              删除</el-button>
          </div>
        </div>
        <div>
          <el-pagination background layout="total, sizes, prev, pager, next, jumper"
            :current-page.sync="queryParams.current" :page-sizes="sizeArr" :page-size.sync="queryParams.size"
            @current-change="handleCurrentChange" @size-change="changeSize" :total="total">
          </el-pagination>
        </div>

      </el-footer>
    </el-container>

    <field ref="field" type="patent" :productId="productId" @getFieldList="getFieldList"></field>
  </div>
</template>

<script>
import { fastSelectPatent } from '@/views/project/patentCollection/components/mixins/fastSelectPatent'
import PatentAbstractListView from '@/views/project/patentCollection/components/views/Abstract.vue'
import PatentTableListView from '@/views/project/patentCollection/components/views/Table.vue'
import PatentPictureListView from '@/views/project/patentCollection/components/views/Picture'
import searchPatent from '@/views/report/components/patentList/components/searchPatent.vue';
import field from '@/views/components/dialog/fields.vue';
export default {
  mixins: [fastSelectPatent],
  components: {
    PatentAbstractListView,
    PatentTableListView,
    PatentPictureListView,
    searchPatent,
    field,
  },
  props: {
    productId: {
      default: 0
    },
    productName: {
      default: '--'
    },
    projectType:{
      default:3
    }
  },
  data() {
    return {
      //视图方式
      viewList: [
        {
          value: 'patent-table-list-view',
          title: '表格视图',
          btn: 'el-icon-tickets',
        },
        {
          value: 'patent-abstract-list-view',
          title: '摘要视图',
          btn: 'el-icon-news',
        },
        {
          value: 'patent-picture-list-view',
          title: '图片视图',
          btn: 'el-icon-picture-outline',
        },
        // {
        //   value: 'PatentPDFListView',
        //   title: 'PDF视图',
        //   btn: 'iconfont icon-pdf',
        // }
      ],
      //选择的视图
      viewSelected: "patent-table-list-view",
      //检索字段
      searchFiled: [],
      // 检索条件
      searchStr: '',
      // sort表格排序
      sort: [],
      //页大小
      sizeArr: [10, 20, 30, 40, 50, 100],
      // 分页信息
      // queryParams: {
      //   current: 1,
      //   size: 10,
      // },
      // 专利总数
      // total: 0,
      // 子组件table数据源
      // tableData: [],
      // 显示栏位
      customList: [],
      // 表格的loading
      loading: false,

    }
  },
  async mounted() {
    this.customList = await this.$commonJS.getCustomField('patent', { productId: this.productId })
    await this.getColumn()
    // 获取专利信息
    this.getList()
  },
  methods: {
    // 点击专利号进行跳转
    handleClick(row, location) {
      var searchOption = {
        searchQuery: this.searchStr,
        orderDTOList: this.sort,
        moreConditions:true
      }
      var search = {
        searchOption: searchOption,
        location: location,
      }
      this.$s.setSession('search', search)
      this.$router.push(
        {
          path: '/patentDetails/' + row.patentNo,
          query: {
            productId: this.productId,
            projectType:'3',//判断是不是从专题库进入专利详情1为专题库2为报告(报告未传2)
            productName:this.productName
          }
        }
      )
    },
    // 删除
    handleDel() {
      this.$confirm('此操作将永久删除选中的专利, 不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          productIds: [this.productId],
          patentNos: this.patentNoList,
        }
        this.$api.delProductPatent(params).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除操作')
      });
    },
    // 处理后的条件
    handleSearchValue({ searchStr, customFields }) {
      this.searchStr = searchStr
      // this.customFields = customFields
      // this.$refs.customFields.close()
      this.getList()
    },
    //获取检索字段
    async getColumn() {
      let params = [{
        tableName: 'patent',
        productId: this.productId,
      }]
      await this.$api.getQueryFields(params).then(res => {
        if (res.code == 200) {
          let conditionDTOList = JSON.parse(JSON.stringify(res.data.data[0].conditionDTOList))
          // 搜索字段
          this.searchFiled = this.$commonJS.getField(conditionDTOList, (u) => u.ifSearch == true, {
            label: 'name',
            value: 'field',
            type: 'type',
            group: 'group',
            // fieldType: 'fieldType',
            groupBy: 'groupBy',
          })
        }
      })
    },
    //获取专利信息
    getList(size) {
      if (size) {
        this.queryParams.size = size
      }
      this.queryParams.isAdd=[]
      this.queryParams.isDelete=[]
      let params = {
        ...this.queryParams,//分页信息及区分同族类型
        productId: this.productId,
        from: 'product',
        searchQuery: this.searchStr || '',//检索条件
        customFields: [],
        orderDTOList: this.sort,//排序信息
      }
      this.loading = true
      this.$store.commit("SET_PATENT_RECORDS", []);
      this.$api.QueryPatent(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.total = res.data.total

          // this.$set(this.queryParams, 'startNumber', this.endNumber > 0 ? this.startNumber : 1)
          // this.$set(this.queryParams, 'endNumber', this.endNumber > 0 ? this.endNumber : this.total)
          // this.$store.commit("SET_PATENT_PARAMS", params);
          this.$store.commit("SET_PATENT_RECORDS", res.data.data);
          if (this.quickSelect) {
            this.commonSwitch()
          }
          this.loading = false
          this.isRefresh()
        }
      }).catch(error => {
        this.tableData = []
        this.total = 0
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    },
    //切换页大小
    changeSize(val){
      this.queryParams.size = val
      this.queryParams.current = 1
      this.getList()
    },
    //排序
    handleSort({ column, prop, order }) {
      //如需要多个字段排序，则不需要清空
      var params = {
        sort: this.sort,
        column,
        prop,
        order,
      }
      this.sort = this.$commonJS.getSortData(params)
      this.queryParams.current = 1
      this.getList()
    },
    //切换视图
    async handleChangeView(item) {
      this.viewSelected = item.value
      this.queryParams.current = 1
      // if (this.viewSelected == 'PatentPDFListView') {
      //   return false
      // }
      if (this.viewSelected === 'patent-picture-list-view') {
        this.$set(this.queryParams, 'size', 20)
      } else {
        this.queryParams.size = 10
      }
      this.getList()
    },
    // 显示栏位管理下拉菜单事件
    handleCommand(even) {
      switch (even) {
        case '0'://Excel导入
          this.patentImport(this.productId, 1)
          break
        case '1'://专利号导入
          this.patentImport(this.productId, 2)
          break
        case '2'://检索条件导入
          this.patentImport(this.productId, 4)
          break
        case '3'://显示栏位管理
          this.handleFieldManage()
          break

        default:
          break;
      }
    },
    //显示栏位管理
    async handleFieldManage() {
      this.$refs.field.open(this.customList)
    },
    //获取自定义显示栏位
    getFieldList(data) {
      this.customList = []
        this.$nextTick(()=>{
            this.customList = data
        })
    },
    //专利导入
    patentImport(productId, type) {
      var form = {
        importToId: productId,
        importToType: 2,//0专题库1报告2产品
        type: type,
        // ifUpdate: false,
        // crons: '',
      }
      this.$commonJS.toImportParent(form, type)
    },
  },
}
</script>
<style lang="scss"></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;
  }
}

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

  .btn {
    color: #000;
    line-height: 30px;
    border-radius: 5px;
    padding-left: 10px;
    text-align: left;
    font-size: 14px;
    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;
    }
  }
}
</style>