<template>
  <!-- 结果呈现5 -->
  <div style="padding:20px">
    <div class="menu">
      <div v-if="!taskType">
        <el-button @click="changeShow" type="primary" :plain="!isSelect">对比结果查看</el-button>
        <el-button @click="changeShow2" type="primary" :plain="isSelect" >对比方案选择</el-button>
      </div>
      <el-select placeholder="请选择显示类型" v-model="Type" style="margin-left: 10px;" @change="TypeSelect($event)" >
            <el-option label="仅显示主权要" value="1"></el-option>
            <el-option label="全部显示" value="0"></el-option>
        </el-select>
     <div>

      <!-- <el-button>提交审核</el-button>
      <el-dropdown trigger='click' :hide-on-click='false'>
      <el-button type="primary">导出报告<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
      <el-dropdown-menu slot="dropdown">
        <template v-for="item in menu">
          <el-dropdown-item v-if='!item.children'>{{item.title}}</el-dropdown-item>
          <el-dropdown-item v-else>
            <el-dropdown placement='right-start'  >
              <span class="el-dropdown-link">
                {{item.title}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template v-for='items in item.children'>
                  <el-dropdown-item>{{items.title}}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown> -->
       </div>
      </div>
  
      <el-table
      :data="tableData.filter(item=>typeArr.includes(item.pType))"
      :span-method="objectSpanMethod"
      :row-class-name="tableRowClassName"
      border
      style="min-width: 100%; margin-top: 20px;overflow:auto"
      v-if="show"
      >
      
      <el-table-column
        fixed
        prop="pRightName"
        label="标的权利项"
        align="center"
        width="200px">
        <template slot-scope="scope">  
          <el-tooltip class="item" effect="dark" :content="scope.row.pContent" placement="top">
            <span>{{scope.row.pRightName}}</span>
          </el-tooltip>     
              
        </template>
      </el-table-column>
      <el-table-column
        fixed
        prop="content"
        label="标的权利要求特征"
        align="center"
        width="300px">
        <template slot-scope="scope" >       
                 {{scope.row.content}}
        </template>
      </el-table-column>
     
      <el-table-column v-for="(item, index) in tableHeader" :key="index" align="center" :min-width="item.length > 7 ? '190' : '110'">
        <template slot="header">
          <span>
            <el-link type="primary"  @click="editContrast(item.patentNo)">{{item.patentNo}}</el-link>
            </span>
            <el-tag style="font-size:12px;border-radius:50%" v-if="item.remark">{{item.remark}}</el-tag>
            <el-popover
              placement="bottom"
              width="200"
              trigger="click">
              <el-input-number v-model="num" @change="handleChange" :controls="false" :min="1" :max="tableHeader.length" label="输入需要交换的位置"></el-input-number>
              <el-tree
                :data="tableHeader"
                :props="{label:'patentNo'}"
                show-checkbox
                @node-drop="handleDrop"
                draggable
                @check-change="handleCheckChange">
              </el-tree>
              <el-button @click="exchange">交换</el-button>
              <!-- <el-table :data="gridData">
                <el-table-column width="150" property="date" label="日期"></el-table-column>
                <el-table-column width="100" property="name" label="姓名"></el-table-column>
                <el-table-column width="300" property="address" label="地址"></el-table-column>
              </el-table> -->
              <i class="el-icon-arrow-down el-icon--right"  slot="reference"></i>
              <!-- <el-button slot="reference">click 激活</el-button> -->
            </el-popover>
            <!-- <el-dropdown size="small">
              <div class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in tableHeader" @click.native="handleClick(item)">
                  <i :class="item.icon"></i>
                  <span>{{ item.patentNo }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
        </template>
            <template slot-scope="scope" >
              <!-- <div v-if="scope.row[item.patentNo]" style="width:calc(100% + 20px);margin-left:-10px">
               <table style="width:100%;text-align:left">
                  <tr v-for="i in scope.row[item.patentNo]">{{i}}</tr>
              </table>
            </div> -->
            <div class="innerTable" v-if="scope.row[item.patentNo]" style="width:calc(100% + 20px);margin-left:-10px">
                  <p v-for="i in scope.row[item.patentNo]">{{i.content}}<img v-if="i.filePath" :src="i.filePath" width="100px" style="vertical-align:middle" @click="showImage(i.filePath)" /></p>
              </div>
                 <!-- <span>{{scope.row[item.patentNo]?scope.row[item.patentNo]:''}}</span> -->
            </template>
      </el-table-column>
      </el-table>

      <div style="background:white;padding:20px;background:#99CCFF;margin-top:20px" v-else>
          <p style="margin-top:0">选择对比方案</p>
          <el-divider></el-divider>
          <el-select v-model="ruleForm.type" placeholder="请选择"  style="padding:20px 0 0 0">
              <el-option v-for="item in rightList.filter(item=>typeArr.includes(item.type))" :key="item.rightId" :value="item.rightId" :label="item.pRightName"></el-option>
          </el-select>
        <el-table
          :data="tableData.filter(item=>item.rightId == ruleForm.type)"
          :span-method="objectSpanMethod"
          :row-class-name="tableRowClassName"
          border
          style="min-width: 100%; margin-top: 20px;overflow:auto;">
        >
        <el-table-column
          fixed
          prop="pRightName"
          label="标的权利项"
          align="center"
          width="200px">
          <template slot-scope="scope">  
            <el-tooltip class="item" effect="dark" :content="scope.row.pContent" placement="top">
              <span>{{scope.row.pRightName}}</span>
            </el-tooltip>       
          </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="content"
          label="标的权利要求特征"
          align="center"
          width="300px">
          <template slot-scope="scope" >       
                  {{scope.row.content}}
          </template>
        </el-table-column>
        <el-table-column
        fixed
        prop="content"
        label="公识"
        align="center"
        width="100px">
        <template slot-scope="scope" >     
          <el-checkbox-group v-model="checkRecord">  
          <el-checkbox :label="scope.row.content" @change="getFunInfo(scope.row)">
                  {{''}}
              </el-checkbox>
            </el-checkbox-group>
        </template>
      </el-table-column>
        <el-table-column v-for="(item, index) in tableHeader" :key="index" show-overflow-tooltip align="center" :min-width="item.length > 7 ? '190' : '110'">
          <template slot="header">
            <span><el-link type="primary"  @click="editContrast(item.patentNo)">{{item.patentNo}}</el-link></span><el-tag style="font-size:12px;border-radius:50%;" v-if="item.remark">{{item.remark}}</el-tag>
          </template>
          <template slot-scope="scope">
            <el-checkbox-group v-model="checkRecord">
              <div class="innerTable" v-if="scope.row[item.patentNo]" style="width:calc(100% + 20px);margin-left:-10px;word-wrap:break-word;">
                 <p v-for="(inc,index) in scope.row[item.patentNo]">
                  <el-checkbox :label="item.patentNo+scope.row[item.patentNo+'_Id'][index]" @change="getFunInfo(scope.row,item.patentNo,index)" v-if="scope.row[item.patentNo]">
                  <!-- <el-input style="width:calc(100% + 20px);margin-left:-10px;word-wrap:break-word;" v-model="i"></el-input>  -->
                  <span>{{inc.content}}<img v-if="inc.filePath" :src="inc.filePath" width="100px" style="vertical-align:middle" @click="showImage(inc.filePath)" /></span> 
                  </el-checkbox>
                </p>
              </div>
             </el-checkbox-group>
             <!-- <el-checkbox-group v-model="checkRecord">
            <el-checkbox :label="item.patentNo+scope.row[item.patentNo]" @change="getFunInfo(scope.row,item.patentNo)" v-if="scope.row[item.patentNo]">
              {{scope.row[item.patentNo]?scope.row[item.patentNo]:''}}
            </el-checkbox>
          </el-checkbox-group> -->
          </template>
        </el-table-column>
        </el-table>
        <div style="display:flex; justify-content: space-between;align-items:center;padding-top:20px">
          <p>对比结论/原因:</p>
          <div style="width:calc(100% - 200px);">
            <div style="min-height:60px;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;" id="preview" class="edit-box" contenteditable="true" placeholder="请输入对比结论/理由（可粘贴图片）"
              v-html="ruleForm.result"  @input="saveValue($event.target.innerHTML)"  @click="saveValue($event.target.innerHTML)"
              @blur="getValue(ruleForm,'result')"  v-on:paste="handlePaste($event,ruleForm,'result')">
              <!-- {{ruleForm.result}} -->
            </div>
            <!-- <el-input type="textarea" v-model="ruleForm.result" placeholder="请输入结论"></el-input> -->
          </div>
          <div >
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>

      <el-dialog :visible.sync="showFile">
       <img width="100%" :src="imageUrl" alt="查不到该图片">
    </el-dialog>
  </div>
</template>

  
<script>
import { CodeNode } from 'source-list-map'
import { editContrast } from '../../components/mixins'
import {explain} from '../../components/mixins'
export default {
  components: {

  },
  mixins:[editContrast,explain],
  props:['reportId2','signPatentNo'],
  data() {
    return {
      num:null,
      checked:[],
      showFile:false,
      imageUrl:'',
      checkRecord:[],
      recordList:[],
      featuresId:[],
      typeArr:[1],
      Type:"1",
      isSelect:true,
      menu: [
        {
          title: "无效分析",
          url: "",
          children: [
            {
              title: '模板一',
              url: '1111'
            },
            {
              title: '模板二',
              url: '2222'
            },
            {
              title: '模板三',
              url: '3333'
            }
          ]

        },
        {
          title: "稳定性分析",
          url: "",
          children: [
            {
              title: '模板一',
              url: '1111'
            },
            {
              title: '模板二',
              url: '2222'
            },
            {
              title: '模板三',
              url: '3333'
            }
          ]

        },
        {
          title: "第三方意见",
          url: "",
          children: [
            {
              title: '模板一',
              url: '1111'
            },
            {
              title: '模板二',
              url: '2222'
            },
            {
              title: '模板三',
              url: '3333'
            }
          ]

        },
      ],
      show: true,
      tableData: [],
      tableHeader: [],
      checkList: [],
      ruleForm: {
        type: 1
      },
      rightList: [],
      mergeObj: {},
      mergeArr: ['id', 'pRightName'],
      value: '',
      options: [
        {
          label: "仅显示主权项",
          value: 0
        },
        {
          label: "仅显示副主权项",
          value: 1
        },
        {
          label: "全部显示",
          value: 2
        },
      ],

    }
  },
  created() {

  },
  computed:{
    taskId(){
      return this.$route.query.taskId
    },
    taskType(){
      return this.$route.query.type
    },
    reportId(){
      return this.reportId2?this.reportId2:this.$route.query.reportId
    },
    patentNo(){
      return this.signPatentNo?this.signPatentNo:this.$route.query.signPatentNo
    }
  },
  mounted() {
    // if(this.reportId2){
    //   this.reportId = this.reportId2
    //   this.patentNo = this.signPatentNo
    // }
    this.getContrastList()
    
  },
  methods: {
    handleDrop(before,after,inner, ev) {
      this.show=false
      this.$nextTick(()=>{
        this.show = true
      })
        console.log(this.tableHeader)
        console.log('tree drop: ', before,after,inner,ev);
      },
    handleCheckChange(val1,val2,val3){
      console.log(val1,val2,val3)
      if(val2){
        if(this.checked.length>2){
          this.$alert('只能对2条特征进行交换','提示',{
            confirmButtonText: '确定',
            type:'warning',
            callback: action => {
            }
          })
          return false
        }
        this.checked.push(val1)
      }else{
        var a = this.checked.findIndex(item=>{
          return item.id == val1.id
        })
        if(a!=-1){
          this.checked.splice(a,1)
        }
      }
      
      console.log(this.checked)
    },
    exchange(){
      var a = this.checked[0]
      var b = this.checked[1]
      var index1 = this.tableHeader.findIndex(item=>{
        return item.id == a.id
      })
      var index2 = this.tableHeader.findIndex(item=>{
        return item.id == b.id
      })
      this.tableHeader[index1] = this.tableHeader.splice(index2,1,this.tableHeader[index1])[0]
      console.log(this.tableHeader)
      this.show = false
      this.$nextTick(()=>{
        this.checked = []
        this.show = true
      })
    },
    tableRowClassName({ row, rowIndex }){
      var a = false
      for(let key in row){
        if(key.indexOf('_Id')!=-1){
          a = true
        }
      }
      if(!a){
        return "success-row"
      }
      
    },
    //查看图片
    showImage(url){
      this.imageUrl = url
        this.showFile = true
    },

    TypeSelect(val) {//显示
      this.typeArr = [];
      if (val==1) {
        this.typeArr.push(1);
      } else {
        this.typeArr.push(1, 0);
      }
    },
    // open(row){
    //   console.log(row)
    //   this.patentNo = row.signPatentNo,
    //   this.reportId = row.id
    //   this.getContrastList()
    // },
    getContrastList(){
            let PatentRight = {
                patentNo: this.patentNo,
                reportId: this.reportId
            }
            this.$api.getFeatures(PatentRight).then(res => {
                if (res.code == 200) {
                  
                this.tableData = [];
                for (let i = 0; i < res.data.patentRightVos.length; i++){
                    // if (res.data.patentRightVos[i].features.length>0) {
                    for (let m = 0; m < res.data.patentRightVos[i].features.length; m++){
                        res.data.patentRightVos[i].features[m].pSignPatentNo=res.data.patentRightVos[i].signPatentNo
                        res.data.patentRightVos[i].features[m].pPatentId=res.data.patentRightVos[i].patentId
                        res.data.patentRightVos[i].features[m].pContent=res.data.patentRightVos[i].content
                        res.data.patentRightVos[i].features[m].pType=res.data.patentRightVos[i].type
                        res.data.patentRightVos[i].features[m].pSort=res.data.patentRightVos[i].sort
                        res.data.patentRightVos[i].features[m].pReportId=res.data.patentRightVos[i].reportId
                        res.data.patentRightVos[i].features[m].pRightName=res.data.patentRightVos[i].RightName
                        res.data.patentRightVos[i].features[m].pContentOut = res.data.patentRightVos[i].contentOut
                        res.data.patentRightVos[i].features[m].comResult = '公开'
                        if (!res.data.patentRightVos[i].features[m].hasOwnProperty("explainText")) {//hasOwnProperty判断属性是否存在
                          res.data.patentRightVos[i].features[m].explainText=res.data.patentRightVos[i].features[m].contentOut
                        } else {
                          if (res.data.patentRightVos[i].features[m].explainText=="") {//属性存在等于空
                              res.data.patentRightVos[i].features[m].explainText=res.data.patentRightVos[i].features[m].contentOut
                          }
                        }

                      this.tableData.push(res.data.patentRightVos[i].features[m])
                    }
                }
                console.log(this.tableData)
                var a = {
                  reportId:this.reportId,
                  taskId:this.taskId
                }
                // this.tableData = []
                this.$api.selectCompareRecord(a).then(response=>{
                  if(response.code == 200){
                    // console.log(response.data)
                    var b = JSON.parse(JSON.stringify(this.tableData[0]))
                    response.data.records.forEach(item => {
                      for(var i =0;i<item.features.length;i++){
                        var index = this.tableData.findIndex(ele=>{
                          return ele.id == item.features[i].id
                        })
                        if(index!=-1){
                          // if(item.filePath){
                          //   this.tableData[index].filePath = this.$p + item.filePath
                          // }
                          if(this.tableData[index][item.patentNo]){
                            var a = this.tableData[index][item.patentNo]
                            var b = ''
                            if(item.filePath){
                              b = this.$p + item.filePath
                            }
                            a.push({
                              content:item.content,
                              filePath:b
                            })
                            // a.push(item.content)
                            this.$set(this.tableData[index],[item.patentNo],a)
                          }else{
                            var a = []
                            var b = ''
                            if(item.filePath){
                              b = this.$p + item.filePath
                            }
                            a.push({
                              content:item.content,
                              filePath:b
                            })
                            this.$set(this.tableData[index],[item.patentNo],a)
                          }
                          if(this.tableData[index][item.patentNo+'_Id']){
                            var a = this.tableData[index][item.patentNo+'_Id']
                            a.push(item.assoRecordsFeatures[i].id)
                            this.$set(this.tableData[index],[item.patentNo]+'_Id',a)
                          }else{
                            var a = []
                            a.push(item.assoRecordsFeatures[i].id)
                            this.$set(this.tableData[index],[item.patentNo]+'_Id',a)
                          }
                          // this.$set(this.tableData[index],[item.patentNo]+'_Id',item.assoRecordsFeatures[i].id)
                          // this.$set(this.tableData[index],[item.patentNo],item.content)
                        }
                      }
                    });
                    this.tableHeader = response.data.tableHeader
                  }
                  
                })
                this.getRightList()
                this.getSpanArr(this.tableData)
                }
               
            }) 
    },
    // renderHeader(h, { column, $index }) {

    //   console.log($index, this.tableHeader)
    //   return (
    //     <div>
    //       <span>{this.tableHeader[$index - 2].head}</span>
    //       <el-tag style="font-size:12px;">{this.tableHeader[$index - 2].type} </el-tag>
    //     </div>
    //   )
    // },
    save() {
      if(this.recordList.length==0 && this.featuresId.length==0){
        this.$message('请选择特征或公识');
        return false;
      }
      var a = {
        reportId:this.reportId,
        rightId: this.ruleForm.type,
        right:this.rightList.filter(item=> item.rightId == this.ruleForm.type)[0].pRightName,
        contrastResult:this.ruleForm.result,
        signPatentNo:this.tableData[0].signPatentNo,
        featuresIDList:this.featuresId,
        recordIDList:this.recordList
      }
      // console.log(a)
      this.$api.addCompareScenarios(a).then(response=>{
        if(response.code == 200){
          this.recordList = []
          this.featuresId = []
          this.checkRecord = []
          this.ruleForm.result = ''
          this.$forceUpdate()
          this.$message.success('方案保存成功')
        }
      })

    },
    changeShow() {
      this.recordList = []
          this.featuresId = []
          this.checkRecord = []
          this.ruleForm.result = ''
          this.$forceUpdate()
      this.isSelect = true
      this.show = true
    },
    changeShow2() {
      this.isSelect = false
      this.show = false
    },
    getFunInfo(row, patentNo,i) {
      // console.log(row,patentNo?row[patentNo+'_Id']:'1')
      if(patentNo){
       var index = this.recordList.findIndex(item=>{
          return item == row[patentNo+'_Id'][i]
        })
        if(index == -1){
          this.recordList.push(row[patentNo+'_Id'][i])
        }
      }else{
        var index = this.featuresId.findIndex(item=>{
          return item == row.id
        })
        if(index == -1){
          this.featuresId.push(row.id)
        }
      }
      // var choose = {
      //   id: val.id,
      //   name: val.name,
      //   contentOut: val.contentOut,
      //   explain: val.explain,
      //   features: val.features,
      //   [patentNo]: content
      // }
      // this.checkList.push(choose)
    },
    getRightList() {
      for (var i = 0; i < this.tableData.length; i++) {
        var index2 = this.rightList.findIndex(item => {
          return item.rightId == this.tableData[i].rightId
        })
        if (index2 == -1) {
          this.rightList.push({
            type:this.tableData[i].pType,
            rightId: this.tableData[i].rightId,
            pRightName: this.tableData[i].pRightName
          })
        }
      }
      this.ruleForm.type = this.rightList[0].rightId

    },
    getSpanArr(data) {
      this.row = []
      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="less" scoped>
.success-row {
  background-color:#eaf3fb !important; 
}
.edit-box:empty::before {
        content: attr(placeholder);
        color:#fff;
      }
      .edit-box:focus:before {
        content:none;
      }

  .menu{
    display: flex;
    justify-content: space-between;
  }

.innerTable p{
  padding:0 0 20px 0;
border-bottom:1px solid #EBEEF5;
}

.innerTable p:last-child{
  padding: 20px 0 0 0;
  border-bottom: none;
}
</style>
<style>
.innerTable .el-checkbox__label{
  width: calc(100% - 50px);
  text-align: left;
  display:inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: hidden;
}
</style>