<template>
  <div class="patent-articles-patent-family">
    <el-form :inline="true" style="">
      <el-form-item label="同族类型">
        <el-select v-model="type" size="small" @change="onChange">
          <el-option label="简单同族" :value="1"></el-option>
          <el-option label="INPADOC同族" :value="2"></el-option>
          <el-option label="扩展同族" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公开号">
        <el-input v-model="queryParams.patentNo" size="small" placeholder="请输入公开号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="" size="small" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" header-row-class-name="custom-table-header">
      <el-table-column label="摘要附图" align="center" min-width="120px" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-image v-if="scope.row.patentId !== -1" :src="getImagePath(scope.row.abstractPath)" :preview-src-list="[getImagePath(scope.row.abstractPath)]" style="height: 150px;"></el-image>
          <span v-else v-html="getViewDom(scope.row.name)"></span>
        </template>
      </el-table-column>
      <el-table-column label="公开号" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-html="getViewDom(scope.row.patentNo)"></span>
        </template>
      </el-table-column>
      <el-table-column label="专利名称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-html="getViewDom(scope.row.name)"></span>
        </template>
      </el-table-column>
      <el-table-column label="申请人" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.patentId !== -1">
            <span v-for="item in scope.row.applicant.filter(a => a.dataType === 2)">
              <span v-html="getViewDom(item.name)"></span> <span>;</span>
            </span>
          </div>
          <span v-else v-html="getViewDom(scope.row.name)"></span>
        </template>
      </el-table-column>
      <el-table-column label="权利人" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.patentId !== -1">
            <span v-for="item in scope.row.applicant.filter(a => a.dataType === 1)">
              <span v-html="getViewDom(item.name)"></span> <span>;</span>
            </span>
          </div>
          <span v-else v-html="getViewDom(scope.row.name)"></span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
    </div>
  </div>
</template>

<script>
import { commonMixins } from "./mixins"

export default {
  mixins: [commonMixins],
  data() {
    return {
      type: 1,
      queryParams: {
        familyId: 0,
        patentNo: '',
        current: 1,
        size: 10,
      },
      loading: false,
      tableData: [],
      total: 0
    }
  },
  watch: {
    patentId() {
      this.queryParams.current = 1
      this.onChange()
    }
  },
  mounted() {
    this.onChange()
  },
  methods: {
    getList() {
      this.loading = true
      this.$api.getPatentFamilyList(this.queryParams).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    onChange() {
      if (this.type === 1) {
        this.queryParams.familyId = this.patent.simpleFamily
      } else if(this.type === 2) {
        this.queryParams.familyId = this.patent.inpadocFamily
      }else{
        this.queryParams.familyId = this.patent.patSnapFamily
      }
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
  }
}
</script>

<style lang="scss">
.patent-articles-patent-family {
  .el-image {
    width: 100%;
  }
}
</style>