<template>
    <div class="height_100 plan">
        <el-container>
            <el-header>
                <div style="display:flex; justify-content:flex-end;align-items: center;height: 50px;">
                    <el-button type="danger" @click="delPlan(0)" v-if="checkList.length>0 && $reportPermission(reportId,[0,1])">删除</el-button>
                </div>
            </el-header>
            <el-main>
                <el-table
                    v-if="show"
                    :data="tableData"
                    border
                    class="table"
                    height="750"
                    :span-method="objectSpanMethod"
                    :row-class-name="tableRowClassName"
                    v-loading="loading"
                    style="min-width: 100%; overflow:auto">
                    <el-table-column prop="right" label="权要"  align="center"  width="200px" :filters="rightList" :filter-method="filterHandler">
                        <template slot-scope="scope">  
                            <span>{{scope.row.right}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="resultant" label="对比组合" align="center" width="300px" >

                    <template slot-scope="scope" >
                        <div >
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox :label="scope.row.PlanId" >
                                    <p ><span>{{ scope.row.resultant}} </span><span v-if="$reportPermission(reportId,[0,1])"><el-link style="color:red;margin-left:10px" @click.prevent="delPlan(scope.row.PlanId)">删除</el-link></span></p>
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    
                    </template>
                    </el-table-column>
                    <el-table-column prop="assoRecordsFeatures" label="特征"  align="center"  width="200px">
                    <template slot-scope="scope">
                        <div class="innerTable"  style="width:calc(100% + 20px);margin-left:-10px">
                            <el-tooltip class="item" effect="dark" :content="scope.row.features.content" placement="top">
                                <span>特征{{scope.row.features.featuresOrder}}</span>
                            </el-tooltip>  
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="PublicKnowledge" label="公识"  align="center"  width="100px">
                    <template slot-scope="scope">  
                        <div class="innerTable"  style="width:calc(100% + 20px);margin-left:-10px">
                                <span  v-if="scope.row.compareRecords"></span>
                                <span v-else>公识 </span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="patentNo" label="对比专利"  align="center"  width="200px">
                    <template slot-scope="scope">  
                        <div class="innerTable" style="width:calc(100% + 20px);margin-left:-10px">
                                <span  v-if="scope.row.compareRecords"> {{scope.row.compareRecords.patentNo}}</span>
                                <span v-else ></span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="content" label="对比内容"  align="center" min-width="200px">
                    <template slot-scope="scope">  
                        <div class="innerTable" style="width:calc(100% + 20px);margin-left:-10px">
                            <span  v-if="scope.row.compareRecords">
                                {{scope.row.compareRecords.content}}<img v-if="scope.row.compareRecords.filePath" :src="$p + scope.row.compareRecords.filePath" width="100px" @click="showImage(scope.row.compareRecords.filePath)" />
                            </span>
                            <span v-else></span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="contrastResult" label="对比结论/理由"  align="center"  width="300px">
                        <template slot-scope="scope">  
                            <span v-html="scope.row.contrastResult"></span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { downLoad2 } from "@/utils";
export default {
    props:['reportId','row'],
    components:{
    },
    data() {
        return {
          btnLoading:false,
          loadingTemplate: false,
          reportType:this.row.type,
          reportTemplateId:'',
          show:true,
          showList:true,
          checkList2:[],
          imageUrl:'',
          showFile :false,
          checkList:[],
          rightList:[],
          resultant:[],
          tableData1:[],
            tableData:[],
            loading:false,
            mergeObj: {},
            mergeArr: [ 'right',"resultant",'contrastResult','patentNo','content'],
        }
    },
    mounted() {
        this.getContrastPlan()
    },
    watch:{
      checkList2(val){
        if(val.length>0){
          this.showList = false
        }else{
          this.showList = true
        }
      },
      reportId(val){

      }
    },
    methods: {
      //导出报告
      exportReport(row){
        this.reportTemplate = true
      },
      getReportTemplateId(val){
        this.reportTemplateId = val
      },
      close1(){
        this.reportTemplateId = ''
        this.reportTemplate = false
      },
      submitExport(){
      if (this.reportTemplateId) {
        this.loadingTemplate=true
        var a = {
          reportId : this.reportId,
          templeId :this.reportTemplateId
        }
        this.$api.exportReport(a).then(response => {
          if (response.code == 200) {
            this.$message.success('导出成功')
            downLoad2(response.data)
            this.reportTemplateId = ''
            this.reportTemplate = false
            this.loadingTemplate=false
          } else{
            this.$message.error('导出失败,请重试')
            this.loadingTemplate=false
          }
        }).catch(error => {
          this.$message.error('导出失败,请重试')
            this.loadingTemplate=false
        })
      }else{
        this.$alert('请选择报告模板', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            
          }
        });
      }
      
    },
      getInfo(val){
       //console.log(this.checkList2)
        var a = this.checkList2.findIndex(item=>{
          //console.log(item,val)
          return item == val
        })
        //console.log(a)
        if(a==-1){
          //console.log(1)
          this.checkList2.push(val)
        }else{
          this.checkList2.splice(a,1)
        }
        this.$forceUpdate()
        //console.log(val,this.checkList2)
      },
      checkPatentList(){
        var a = this.checkList2.map(item=>{
          return item.value
        })
        this.tableData = []
       this.tableData = this.tableData1.filter(item=>{
          return a.includes(item.resultant)
        })
        this.getSpanArr(this.tableData)
        // this.checkList2 = []
        // this.$refs.tree.setCheckedNodes([])
        this.show = false
        this.$nextTick(()=>{
          this.show = true
        })
        // //console.log(this.tableData)
      },
      getChecked(){
        this.$refs.tree.setCheckedNodes(this.checkList2)
      },
      reset(){
        this.checkList2 = []
        this.$refs.tree.setCheckedNodes([])
        this.tableData = []
        this.tableData = JSON.parse(JSON.stringify(this.tableData1))
        this.getSpanArr(this.tableData)
        //console.log(this.checkList2)
        this.show = false
        this.$nextTick(()=>{
          this.show = true
        })
      },
      getPatentList(){},
       //查看图片
    showImage(url){
      this.imageUrl =this.$p + url
      this.showFile = true
    },
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      // 表格隔行变色
      tableRowClassName({ row, rowIndex }) {
        // if (rowIndex % 2 === 0) {
        //   return 'success-row1'
        // } else  {
        //   return ''
        // }
      },
      delPlan(id) {
        if(id){
          a = [id]
        } else {
          var a = this.checkList
        }
        
        //console.log(this.checkList)
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteCompareScenarios(a).then(response=>{
            if(response.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.rightList = []
              this.resultant = []
              this.getContrastPlan()
              this.checkList = []
            }
            
          })
          
        }).catch(() => {        
        });
        
      },
        getContrastPlan(){
            this.$api.selectCompareScenarios({reportID:this.reportId}).then(response=>{
                if(response.code == 200){
                  var data = []
                  
                 
                    //console.log(response.data)
                    response.data.forEach((item,index)=>{
                      var a = this.rightList.findIndex(i=>{
                        return i.value == item.right
                      })
                      if(a==-1){
                        this.rightList.push({
                          text:item.right,
                          value:item.right
                        })
                      }
                      this.resultant.push({
                          text:'对比组合'+(index+1),
                          patentNoList:[],
                          value:'对比组合'+(index+1)
                      })
                      var i = 0
                      item.patentNoIndex=[]
                      item.assoRecordsFeatures.forEach((item1)=>{
                        if(item1.compareRecords.patentNo){
                          
                          var b = this.resultant[index].patentNoList.findIndex(i=>{
                            return i == item1.compareRecords.patentNo
                          })
                          if(b == -1){
                            this.resultant[index].patentNoList.push(item1.compareRecords.patentNo)
                          }
                          
                        }
                        var c = item.featuresList.findIndex(i=>{
                          return i.id == item1.features.id
                        })
                        if(c!=-1){
                          item1.compareRecords = null
                        }
                        
                      })
                      item.assoRecordsFeatures.forEach((item1,ele)=>{
                        
                           if(ele == 0){
                            item.patentNoIndex.push(ele)
                          }else{
                            if(item1.compareRecords&&item.assoRecordsFeatures[ele-1].compareRecords){
                              if(item1.compareRecords.patentNo == item.assoRecordsFeatures[ele-1].compareRecords.patentNo && item1.compareRecords.content == item.assoRecordsFeatures[ele-1].compareRecords.content){
                             
                              item.patentNoIndex[item.patentNoIndex.length-1]+=1
                            }else{
                              item.patentNoIndex.push(ele)
                            }
                            }else{
                              item.patentNoIndex.push(ele)
                            }
                            
                          }
                          
                          
                        //   item1.rightList = item
                        // data.push(item1)
                        
                        
                      })
                     
                      item.resultant = '对比组合'+(index+1)
                      // item.featuresList.forEach(i=>{
                      //   item.assoRecordsFeatures.push({
                      //     featureId:i.id,
                      //     features:i
                      //   })
                      // })
                      item.assoRecordsFeatures.sort((a,b)=>{
                        return a.featureId - b.featureId
                      })
                    })

                    this.tableData = []
                    response.data.forEach(item=>{
                      item.assoRecordsFeatures.forEach((item1,index)=>{
                        item1.contrastResult= item.contrastResult
                        item1.featuresIDList= item.featuresIDList
                        item1.featuresList= item.featuresList
                        item1.PlanId= item.id
                        item1.reportId= item.reportId
                        item1.right= item.right
                        item1.rightId= item.rightId
                        item1.signPatentNo= item.signPatentNo
                        item1.resultant = item.resultant
                        this.tableData.push(item1)
                      })
                    })
                  this.tableData.sort((a,b)=>{
                    return a.right.slice(2,a.right.length) - b.right.slice(2,b.right.length)
                  })
                    // console.log(data)
                    
                    // // response.data = data
                    // this.tableData = data
                    
                  //  debugger
                   this.getSpanArr(this.tableData)
                    // this.tableData = data
                    this.tableData1 = JSON.parse(JSON.stringify(this.tableData))
                    
                }
            })
        },
        getSpanArr(data) {
            this.mergeArr.forEach((key, index1) => {
                let count = 0;
                this.mergeObj[key] = [];
                data.forEach((item, index) => {
                  // item.assoRecordsFeatures.forEach(i=>{
                  //   if(i.compareRecords){
                  //     this.mergeObj[key].push(0)
                  //   }else{
                  //     this.mergeObj[key].push(2)
                  //   }
                  // })
                    if(key == 'right' || key == 'resultant'){
                      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);
                          }
                      }
                    }else if(key == 'patentNo' || key=='content'){
                      if (index === 0) {
                          this.mergeObj[key].push(1);
                      }else{
                        if(item.compareRecords&&data[index - 1].compareRecords){
                          if (item.compareRecords[key] === data[index - 1].compareRecords[key] && item.PlanId == data[index-1].PlanId) {
                            this.mergeObj[key][count] += 1;
                            this.mergeObj[key].push(0);
                          }else{
                              count = index;
                              this.mergeObj[key].push(1);
                            }
                        }else{
                          count = index;
                              this.mergeObj[key].push(1);
                        }
                        
                      }
                    }
                    // else{
                      
                    //   item.assoRecordsFeatures.forEach((i,index2)=>{
                    //     if(index == 0){
                    //        if(i.compareRecords){
                    //         if(index2 == 0){
                    //           this.mergeObj[key].push(1);
                    //         }else{
                    //           if(i[key] === item.assoRecordsFeatures[index2-1][key]){
                    //             this.mergeObj[key][count] += 1;
                    //             this.mergeObj[key].push(0);
                    //           }else{
                    //             count = index2;
                    //             this.mergeObj[key].push(1);
                    //           }
                    //         }
                    //         // else{
                    //         //   count = index;
                    //         //   this.mergeObj[key].push(1);
                    //         // }
                    //       }
                    //     }else{
                    //       if(item.resultant === data[index - 1].resultant){
                    //         if(i.compareRecords){
                    //           if(index2 == 0){
                    //             this.mergeObj[key].push(1);
                    //           }else{
                    //             if(i[key] === item.assoRecordsFeatures[index2-1][key]){
                    //               this.mergeObj[key][count] += 1;
                    //               this.mergeObj[key].push(0);
                    //             }else{
                    //               count = index2;
                    //               this.mergeObj[key].push(1);
                    //             }
                    //           }
                    //           // else{
                    //           //   count = index;
                    //           //   this.mergeObj[key].push(1);
                    //           // }
                    //         }
                    //       }
                    //     }
                         
                    //     })

                    // }


              
                })
            })
            this.mergeObj.contrastResult = this.mergeObj.resultant
            // data.forEach((item,index)=>{
            //   if (index === 0) {
            //         this.mergeObj[key].push(1);
            //   }
            // })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// console.log(this.mergeArr,column.property,rowIndex,this.mergeObj)
            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>
.plan .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: #ffffff !important;
}
.el-popover{
  min-width: 0;
}
.success-row1 {
  background-color:#eaf3fb !important; 
}
.success-row1:first-child td:first-child{
  background-color: #FFF;
}
</style>
<style lang="scss" scoped>
.innerTable p{
  // min-width:200px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items:center;
  height: 130px;
  line-break:normal;
  overflow: auto;
  border-bottom:1px solid #EBEEF5;
}

.innerTable p:nth-child(1){
  border-bottom: 1px solid #EBEEF5;
}
.innerTable p:last-child{
  border-bottom: none;
}
.table{
  cursor: pointer;
}
</style>