<template>
    <div>
        <el-container>
            
            <el-aside style="background:white" :style="{width:'calc(100% - ' + width +')'}">
                <div style="display:flex; justify-content:flex-end;align-items:center;margin-bottom: 10px;">
                    <el-button @click="taskWork" type="primary" size="small" >协同办公</el-button>
                    <el-dropdown size="medium" style="margin:10px 20px 10px 20px">
                        <el-button type="primary" size="small" >
                            创建报告<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" style="margin-top:0px" v-if="dictMessage.REPORT_TYPE">
                            <!-- 遍历按钮 -->
                            <el-dropdown-item v-for="item in dictMessage.REPORT_TYPE" :key="item.dictChildLabel" v-if="![3,6].includes(Number(item.dictChildValue))"  @click.native="handleAnalyse(item.dictChildValue)">{{item.dictChildLabel}}</el-dropdown-item>
                            </el-dropdown-menu>
                    </el-dropdown>
                    <div style="display:flex; justify-content:flex-end;align-items:center" v-if="row.type!=4">
                      <el-button class="changePatent" type="" size="small" :disabled="index == 0" @click="handleLink1()" >
                        <span class="p"><i class="el-icon-arrow-up"></i>
                            <span>上一篇</span>
                            <!-- <span class="t" v-if="records.prev">({{ records.prev.total }})</span> -->
                        </span>
                        <span class="n" v-if="patentList[index-1]">
                            <span>{{ patentList[index-1].patentNo }}</span>
                        </span>
                        <span class="n" v-else>无数据</span>
                        </el-button>
                        <div style="width:100px;height:50px;border-radius:5px ;border:1px solid #DCDCDC;display:flex; justify-content:flex-start;margin:0 10px">
                            <div class="t" style="width:50px;text-align:center;line-height:50px;border-right:1px solid #DCDCDC;">{{ patentList[index-1]?index:'0' }}</div>
                            <div class="t" style="width:50px;text-align:center;line-height:50px">{{ patentList[index+1]?total-index-1:'0' }}</div>
                        </div>
                        <el-button class="changePatent" style="margin-right:10px" type="" size="small" :disabled="index == patentList.length-1 || patentList.length == 0" @click="handleLink()" >
                        <span class="p">
                            <i class="el-icon-arrow-down"></i>
                            <span>下一篇</span>
                            <!-- <span class="t" v-if="records.next">({{ records.next.total }})</span> -->
                        </span>
                        <span class="n" v-if="patentList[index+1]">
                            <span>{{ patentList[index+1].patentNo }}</span>
                        </span>
                        <span class="n" v-else>无数据</span>
                        </el-button>  
                    </div>
                        
                        <!-- <patent-list v-if="taskId" :patent-id="patentId" @on-change="onChange" :location="location1" :state="state" :ban='ban'/> -->
                        <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧菜单'" placement="top">
                            <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 25px; margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showRight = !showRight"></i>
                        </el-tooltip>
                </div>
                <div>
                    <table class="PatentMessage">
                        <tr>
                            <td>公告号</td>
                            <td><span v-if="patent">{{patent.patentNo}}</span></td>
                            <td>公告日</td>
                            <td><span v-if="patent">{{patent.publicDate}}</span></td>
                            <td>专利权人</td>
                            <td><span v-if="patent&&patent.applicant"><span v-for="item in patent.applicant.filter(a => a.dataType === 1)">{{ item.name }}</span></span></td>
                        </tr>
                        <tr>
                            <td>优先权</td>
                            <td><span v-if="patent">{{patent.priorityNo}}</span></td>
                            <td>案件状态</td>
                            <td> <span v-if="patent&&patent.affair">{{patent.affair[0].status}}</span></td>
                            <td>同族专利</td>
                            <td><span v-if="patent" v-html="getPatentFamily(patent)"></span></td>
                        </tr>
                    </table>
                   
                      
                    <el-table
                    :data="tableData1"
                    border
                    :span-method="objectSpanMethod"
                    v-loading="loading"
                    height="600px"
                    style="min-width: 100%; margin-top: 20px;overflow:auto">
            
                    <el-table-column 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.pContent}}</span> -->
                            <span>{{scope.row.pRightName}}</span>
                        </el-tooltip>     
                        </template>
                    </el-table-column>
            
                    <el-table-column prop="content" label="特征" align="center" width="300px">
                        <template slot-scope="scope">   
                            <div style="width:100%;outline: #dcdfe6;white-space:normal; word-break:break-all;text-align:left" id="preview"  v-html="scope.row.content"  ></div>
                        </template>
                    </el-table-column>
                    
                    <el-table-column  prop="explainText" align="center" label="解释(可粘贴图片)" min-width="300px">
                        <template slot-scope="scope">   
                            <div style="width:100%;outline: #dcdfe6;white-space:normal; word-break:break-all;text-align:left" id="preview"  v-html="scope.row.explainText"  ></div>
                        </template>
                    </el-table-column>
                    <el-table-column  prop="targetDescription" align="center" label="标的说明(可粘贴图片)" min-width="300px">
                        <template slot-scope="scope">   
                            <div style="width:100%;outline: #dcdfe6;white-space:normal; word-break:break-all;text-align:left" id="preview"  v-html="scope.row.targetDescription"  ></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="compareResult" align="center" label="比对结果" width="300px">
                        <template slot-scope="scope">
                                <div v-if="scope.row">
                                   <span v-if="scope.row.compareResult.toString()!=''">{{ options.filter(item=>item.value==scope.row.compareResult)[0].label }}</span> 
                                </div>
                            </template>
                    </el-table-column>
                    <el-table-column  prop="compareDescription" align="center" label="比对说明(可粘贴图片)" min-width="300px">
                        <template slot-scope="scope">   
                            <div style="width:100%;outline: #dcdfe6;white-space:normal; word-break:break-all;text-align:left" id="preview"  v-html="scope.row.compareDescription"  ></div>
                        </template>
                    </el-table-column>
                    </el-table>
                </div>
            </el-aside>
            <el-main v-show="showRight == true" :width="width" style="padding:5px">
                <!-- <div style="display:flex;justify-content:flex-end;align-items:center">
                 <el-input  size="small" placeholder="请输入查询"></el-input>
                <el-button  @click="handleSearch(item)" size="small" type="primary" icon="el-icon-search" style="margin-left:10px" circle></el-button>   
                </div> -->
                <el-select v-model="queryParams.compareResult" clearable @change="change" placeholder="请选择对比结果">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <div class="infinite-list-wrapper" style="overflow:auto">
                    <ul
                        class="list"
                        v-infinite-scroll="load"
                        infinite-scroll-disabled="disabled">
                        <li v-for="(i,index) in patentList" :key="index" class="list-item" @click="patentChange(i,index)"> {{ i.patentNo }}</li>
                    </ul>
                    <!-- <p v-if="loading">加载中...</p>
                    <p v-if="noMore">没有更多了</p> -->
                </div>
            </el-main>
        </el-container>
        <CreateReport ref="ReportForm" @getList="isGetList"></CreateReport>
        <sendCollaboration :visibleCollaborations="visibleWork" @collaboration="collaboration" :reportId="queryParams.reportId" :compareResultA="compareResult"></sendCollaboration>
    </div>
</template>

<script>
import CreateReport from '@/views/report/components/CreateReport.vue'
import sendCollaboration from "@/views/report/components/sendCollaboration.vue"
export default {
    components: {
    CreateReport,
    sendCollaboration
    },
    props:['reportId','row','taskId'],
    data() {
      return {
            visibleWork:false,
            total:'',
            index:0,
            loading:false,
            patent:{},
            showRight:false,
            width:'0px',
            patentList:[],
            tableData:[],
            tableData1:[],
            mergeObj: {},
            mergeArr: [ 'pRightName'],
            queryParams:{
                taskId:this.taskId?this.taskId:null,
                size:10,
                current:1,
                reportId:this.reportId,
                compareResult:null,
        },
        compareResult:null,
            options: [
                {
                    value: 1,
                    label: '相同'
                }, {
                    value: 0,
                    label: '不相同'
                }, {
                    value: 2,
                    label: '待确定'
                }
            ],
        }
    },
    computed:{
        dictMessage() {
        // console.log(111,this.$store.state.dictMessage.dictMessage);
         return this.$store.state.dictMessage.dictMessage
        },
    },
    watch:{
        showRight(val){
            if(val){
                this.width = '200px'
            }else{
                this.width = '0px'
            }
      },
        
    },
   async mounted() {
       await this.getPatentList()
       if(this.patentList.length>0){
        this.patent = this.patentList[0]
        this.queryCompareMessage(this.patent.patentNo)
       }
       
    },
    methods: {
      async handleAnalyse(id) {
        //     let a = {
        //         reportId:this.reportId
        //     }
        //    await this.$api.getProduct(a).then(response=>{
        //         if(response.code == 200){
        //             this.product = response.data

        //         }else{

        //         }
        //     })
            var form = {
                signPatentNo:this.patent?this.patent.patentNo:'',
                type:id,
                associateReportName:this.row.volumeNumber?this.row.volumeNumber:this.row.name
            }
            this.$refs.ReportForm.open(form)
        },
        isGetList(val){
            // if(val == true){
            //     this.getList()
            // }
        },
        //切换专利
        patentChange(patent,index){
            this.patent = patent
            this.index = index
            this.queryCompareMessage(this.patent.patentNo)
        },

        //上一篇
        handleLink1(){
            this.index -= 1
            this.patent = this.patentList[this.index]
            this.queryCompareMessage(this.patent.patentNo)
        },
        //下一篇
       async handleLink(){
            this.index += 1
            this.patent = this.patentList[this.index]
            this.queryCompareMessage(this.patent.patentNo)
            if(index == this.queryParams.size*this.queryParams.current-1){
               await this.getPatentList()
            }
        },
        getPatentFamily(patent){
            var a = []
            var str = ''
            for(var key in patent.family){
                a.push(key)
            }
            if(a.length>0){
                var b = []
                a.forEach((item,index1)=>{
                        if(patent.family[item] && patent.family[item].length>0){
                            patent.family[item].forEach((i)=>{
                                b.push(i)
                            })
                        }
                })
                const arr = [...new Set(b)]
                str = arr.join('、')
            }
           
            return str
            
        },
       async load(){
            this.queryParams.current+=1
           await this.getPatentList()
        },
      async change() {
          console.log(this.queryParams.compareResult);
            this.index = 0
          this.patentList = []
          await this.getPatentList()
          if(this.patentList.length>0){
            this.patent = this.patentList[0]
            this.queryCompareMessage(this.patent.patentNo)
          }
        },
        async getPatentList(){
           await this.$api.getComparedMessage(this.queryParams).then(response=>{
             if (response.code == 200) {
                  this.total = response.data.total
                  this.patentList=this.patentList.concat(response.data.records)
                }
            })
        },
        queryCompareMessage(patentNo) {//patentRightVos
        this.loading=true
        let PatentRight = {
          patentNo: patentNo,
          reportId: this.reportId,
        }
        this.$api.queryCompareMessage(PatentRight).then(res => {
          if (res.code == 200) {
            this.tableData1 = [];
            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].compareMessageVOS.length; m++){
                  res.data.patentRightVos[i].compareMessageVOS[m].pSignPatentNo=res.data.patentRightVos[i].signPatentNo
                  res.data.patentRightVos[i].compareMessageVOS[m].pPatentId=res.data.patentRightVos[i].patentId
                  res.data.patentRightVos[i].compareMessageVOS[m].pContent=res.data.patentRightVos[i].content
                  res.data.patentRightVos[i].compareMessageVOS[m].pType=res.data.patentRightVos[i].type
                  res.data.patentRightVos[i].compareMessageVOS[m].pSort=res.data.patentRightVos[i].sort
                  res.data.patentRightVos[i].compareMessageVOS[m].pReportId=res.data.patentRightVos[i].reportId
                  res.data.patentRightVos[i].compareMessageVOS[m].pRightName=res.data.patentRightVos[i].RightName
                  res.data.patentRightVos[i].compareMessageVOS[m].pContentOut = res.data.patentRightVos[i].contentOut
                  let a = ['explainText','targetDescription','compareDescription','compareResult']
                  a.forEach(item=>{
                    if (!res.data.patentRightVos[i].compareMessageVOS[m].hasOwnProperty(item)) {//hasOwnProperty判断属性是否存在
                      if(item == 'explainText'){
                        res.data.patentRightVos[i].compareMessageVOS[m][item]=res.data.patentRightVos[i].compareMessageVOS[m].contentOut
                      }else{
                        res.data.patentRightVos[i].compareMessageVOS[m][item]=''
                      }
                    } else {
                      if (res.data.patentRightVos[i].compareMessageVOS[m][item]=="") {//属性存在等于空
                        if(item == 'explainText'){
                          res.data.patentRightVos[i].compareMessageVOS[m][item]=res.data.patentRightVos[i].compareMessageVOS[m].contentOut
                        }
                      }
                    }
                  })
                  
                  this.tableData1.push(res.data.patentRightVos[i].compareMessageVOS[m])
                }
            }
            console.log(this.tableData1)
            // this.tableData = this.tableData1
            // this.$set(this,'tableData',this.tableData1)
            // this.TypeSelect(this.Type)//调用显示权要
            this.getSpanArr(this.tableData1)
            
            // this.$forceUpdate()
            this.loading=false
          }
          // console.log("@@",this.tableData1);
        })
      },
       //获取每个元素所需合并的行数
       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 }) {
        // column.property=“id”  
        if (this.mergeArr.indexOf(column.property) !== -1) {
          if (this.mergeObj[column.property][rowIndex]) {
            console.log("@@",this.mergeObj[column.property][rowIndex]);
            return [this.mergeObj[column.property][rowIndex], 1]
          } else {
            return [0, 0];
          }
        }
      },
       // 工作协同
      taskWork() { 
        this.visibleWork = true
        this.compareResult=this.queryParams.compareResult
      },
      collaboration(val) { 
        this.visibleWork=val
      },
    },
}
</script>

<style lang="scss" scoped>
.changePatent {
    height: 50px;
    width: 200px;
    margin-left: 0 !important;
//   margin-bottom: 15px;
    // margin-top: 10px;
    text-align: left;
    font-size: 12px;
    .p {
      display: block;
      margin-bottom: 5px;
      color: black;
      .t {
        height: 50px;
        width: 100px;
        border: 1px solid #797979;
        padding-left: 10px;
        color: #1e9fff;
        font-size: 14px;
        font-weight: bold;
      }
    }
    .n {
      margin-left: 18px;
      font-size: 12px;
      color: #797979;
    }
  }
.infinite-list-wrapper {
    // height: 300px;
    text-align: center;
}
.infinite-list-wrapper .list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list-wrapper .list-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin:10px 0;
    // border:1px solid #ebeef5 ;
    background: #e8f3fe;
    // color: #ff8484;
}
    .avatar {
        position: relative;
        width: 148px;
        height: 148px;
        display: inline-block;
    }
    .avatar image{
        width: 148px;
        height: 148px;
    }
    .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>
