<template>
  <div>
    <el-table
    v-if="false"
      :data="tableData"
      :maxHeight="tableHeight"
      border
      v-loading="loading"
      :span-method="objectSpanMethod"
      style="min-width: 100%; overflow: auto"
    >
      <el-table-column prop="patentNo" align="center" label="专利号" width="200px">
        <template slot-scope="scope">
          <div>
            <el-link type="primary" >{{ scope.row.CompareRecord.patentNo }}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" align="center" label="文字">
        <template slot-scope="scope">
          <div>
            {{ scope.row.CompareRecord.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Fcontent" align="center" label="特征">
        <template slot-scope="scope">
          <div>
            {{ scope.row.feature.content }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-table
      v-if="true"
      :data="tableData"
      :maxHeight="tableHeight"
      row-key="patentNo"
      :expand-row-keys="expands"
      @expand-change="expandChange"
      v-loading="loading"
      style="width:100%">
      <el-table-column type="expand">
      <template slot-scope="scope">
        <div style="padding:10px 20px">
          <el-table
          :data="scope.row.compareRecords"
          border
          v-loading="loading"
          :span-method="objectSpanMethod"
          style="min-width: 100%; overflow: auto"
        >
          <el-table-column prop="content" align="center" label="文字">
            <template slot-scope="scope">
              <div>
                {{ scope.row.content }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="Fcontent" align="center" label="特征">
            <template slot-scope="scope">
              <div>
                {{ scope.row.featureContent }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="专利号"
      prop="patentNo"
      align="center"
      >
    </el-table-column>
    <el-table-column
      label="标题"
      prop="title"
      align="center"
      >
    </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>
export default {
  components: {},
  props:["patent"],
  data() {
    return {
        tableData:[],
        expands:[],
        loading:false,
        mergeArr:['id', 'patentNo'],
        mergeObj:{},
        queryParams:{
          patentNo:this.patent.patentNo,
          current:1,
          size:10
        },
        total:0,
        tableHeight:document.documentElement.clientHeight- 320,
    };
  },
  watch: {
    patent(val){
      this.queryParams.patentNo = this.patent.patentNo
      this.getList()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    //展开行
    expandChange(row, expanded){
      if(this.expands.indexOf(row.patentNo)!=-1){
        this.expands = []
      }else{
        this.expands = [row.patentNo]
      }
      
    },
    //分页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    //获取数据
    getList(){
      this.loading = true
      // var params={
      //   patentNo:this.patent.patentNo
      // }
      this.tableData = []
      this.$api.querySimFeaturePatentByPatentNo(this.queryParams).then(response=>{
        if(response.code == 200){
          this.tableData = response.data.records
          this.total = response.data.total
          if (this.tableData.length > 0) {
            this.expands = [this.tableData[0].patentNo]
          }
          // response.data.forEach(item=>{
          //   item.features.forEach(y=>{
          //     y.CompareRecords.forEach(i=>{
          //       for(let key in y.feature){
          //         i['F'+key] = y.feature[key]
          //       }
          //       this.tableData.push(i)
          //     })
          //   })
            
          // })
          this.getSpanArr(this.tableData)
          this.loading = false
        }
      }).catch(error=>{
        this.tableData = []
        this.loading = false
      })
    },
    //获取每个元素所需合并的行数
    getSpanArr(data) {
      this.mergeArr.forEach((key, index1) => {
        let count = 0;
        this.mergeObj[key] = [];
        data.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            if (item[key] === data[index - 1][key] && item[key] !== 'explainText') {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }
        })
      })
    },
    //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeArr.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return [this.mergeObj[column.property][rowIndex], 1]
        } else {
          return [0, 0];
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>