<template>
    <div>
        <el-container>
            <el-aside width="500px" style="border:0;padding:20px">
                <div style="margin-top:10px">
                    <el-form ref="form" :model="product" label-width="120px">
                        <el-form-item label="标的专利/产品：">
                        <span>手机</span>
                    </el-form-item> 
                    <el-form-item label="产品说明：">
                       <span>UWB定位方法UWB基站功能UWB基站与UWB标签之间信号通讯</span>
                    </el-form-item>
                    <el-form-item label="产品图：">
                       <img src="https://img0.baidu.com/it/u=4009797821,3177655892&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=330" alt="" style="width:200px">
                    </el-form-item>
                    </el-form>
                </div>
            </el-aside>
            <el-main style="background:white">
                <div style="display:flex; justify-content:flex-end">
                    <el-dropdown size="medium" style="margin-top:15px;margin-right:20px">
                        <el-button type="primary"  >
                            分析<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" style="margin-top:-10px">
                            <el-dropdown-item @click.native="handleAnalyse(0)">无效分析</el-dropdown-item>
                            <el-dropdown-item @click.native="handleAnalyse('report')">稳定性分析</el-dropdown-item>
                            <el-dropdown-item @click.native="handleTemplate">第三方意见</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <patent-list style="max-width:500px;" :patent-id="patentId" :project-id="projectId" @on-change="onChange" :patentList="PList"/>
                </div>
            <div>
              <table class="PatentMessage">
              <tr>
                <td>公告号</td>
                <td>CN107479513B</td>
                <td>公告日</td>
                <td>2022-10-14</td>
                <td>专利权人</td>
                <td>纳恩博(北京)科技有限公司 </td>
              </tr>
              <tr>
                <td>优先权日</td>
                <td>无</td>
                <td>案件转态</td>
                <td>已授权，维持中</td>
                <td>同族专利</td>
                <td>WO2019007257A1、US20210157323A1 </td>
              </tr>
              </table>
              <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                border
                style="width: 100%;"
                height="620"
              >
              <el-table-column
                prop="name"
                label="权要"
                align="center"
                width="200px">
                <template slot-scope="scope">  
                  <el-tooltip class="item" effect="dark" :content="scope.row.contentOut" placement="top">
                    <span>{{scope.row.name}}</span>
                  </el-tooltip>     
                      
                </template>
              </el-table-column>
              <el-table-column
                prop="features"
                label="特征"
                align="center"
                width="300px">
                <!-- <template slot-scope="scope" >
                  <el-input type="textarea" style="width:250px" autosize v-model="scope.row.features"> {{scope.row.features}}</el-input> 
                </template> -->
              </el-table-column>
                <el-table-column
                  prop="explain"
                  align="center"
                  label="解释"
                  min-width="300px"
                  >
                  <!-- <template slot-scope="scope">  
                    <el-input type="textarea" style="width:100%" autosize v-model="scope.row.explain"> {{scope.row.explain}}</el-input>
                  </template> -->
                </el-table-column>
                <el-table-column
                  prop="productfeatures"
                  align="center"
                  label="产品特征"
                  width="300px"
                  >
                </el-table-column>
                <el-table-column
                  prop="result"
                  align="center"
                  label="比对结果"
                  width="200px"
                  >
                </el-table-column>
              </el-table>
            </div>
          </el-main>
        </el-container>
    </div>
</template>

<script>
import PatentList from '../../../components/PatentList.vue'
export default {
  components: {
    PatentList
  },
  data() {
    return {
      product: {},
      btnLoading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      tableData: [],
      patentId: localStorage.PatentLists ? JSON.parse(localStorage.PatentLists)[0].id : parseInt(this.$route.params.id || 0),
      projectId: '73',
      PList: localStorage.PatentLists ? JSON.parse(localStorage.PatentLists) : [],
      options: [{
        value: '选项1',
        label: '相同'
      }, {
        value: '选项2',
        label: '不相同'
      }, {
        value: '选项3',
        label: '等同'
      }],
      mergeObj: {},
      row: [],
      mergeArr: ['name', 'features', 'explain', 'add'],
      checkList: [],
      option: [
        {
          features: 'UWB定位方法',
          explain: ''
        },
        {
          features: 'UWB基站功能',
          explain: ''
        },
        {
          features: 'UWB基站与UWB标签之间信号通讯',
          explain: ''
        },
      ],
    }
  },
  mounted() {
    this.getfeatures()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    async getfeatures() {
      console.log(this.patentId, this.projectId)
      await this.$api.getPatentById(this.patentId, { projectId: this.projectId }).then(response => {
        this.tableData = []
        this.patent = response.data
        // console.log(this.patent)
        this.$nextTick(() => {
          var id = 0
          for (var i = 0; i < this.patent.rights.length; i++) {
            var a = this.patent.rights[i].contentOut.split('，')
            this.patent.rights[i].total = a.length
            id += 1
            for (var j = 0; j < a.length; j++) {

              this.tableData.push({
                id: this.patent.rights[i].id,
                contentOut: this.patent.rights[i].contentOut,
                features: a[j],
                name: "权利要求" + id,
                explain: '',
                productfeatures: this.option[Math.floor(Math.random() * 3)].features,
                result: this.options[Math.floor(Math.random() * 3)].label
              })
            }

          }
          localStorage.PatentFeatures = JSON.stringify(this.tableData)
          // console.log(this.tableData)
          this.getSpanArr(this.tableData);
        })
      })


    },
    async onChange(data) {
      // console.log(this.projectId,data)
      //   this.message=data.id
      //   if(this.fix!=true){
      //     await this.getPatent(data.id)
      //   }
      //   if(this.patentList){

      //   }else{
      //     await this.$router.push({
      //     path: '/workspace/folder/' + data.id,
      //     query: {
      //       id: this.projectId,
      //     }
      //   })
      //   }

      this.patentId = data.id
      console.log(this.patentId)
      this.getfeatures()
    },
    getSpanArr(data) {
      this.row = []
      this.productFeatures = []
      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]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }


        })
        this.mergeObj.explain = this.mergeObj.features
        this.mergeObj.add = this.mergeObj.features
      })
    },


    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>
.PatentMessage {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-spacing: 0;
}

.PatentMessage td {
  padding: 10px 30px;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
</style>