<template>
    <div>
    <div class="demo-input-suffix" style="float:left;height:40px;line-height:40px">
        标的专利号：<el-link type="primary"  @click="toPatentDetails(patentNo)">{{patentNo}}</el-link>
      </div>
        <div style="display:flex;justify-content:center">
            <el-select placeholder="请选择显示类型" v-model="Type"  @change="TypeSelect($event)" >
                <el-option label="仅显示主权要" value="1"></el-option>
                <el-option label="全部显示" value="0"></el-option>
            </el-select> 
        </div>
       
        <el-table
        :data="tableData"
        border
        ref="table"
        :span-method="objectSpanMethod"
        v-loading="loading"
        :height="tableHeight - 25"
        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>
              <el-checkbox-group v-model="selected" v-if="isSelect">

                <el-checkbox  :label="scope.row.id" @change="getFunInfo(scope.row)" style="display: flex; align-items: center;">
                  <!-- <el-input type="textarea" style="width:250px" autosize v-model="scope.row.content"> {{scope.row.content}}</el-input> -->
                  <div style="white-space:normal; word-break:break-all;text-align:left">{{scope.row.content}}</div>
                </el-checkbox>

             </el-checkbox-group>  
             <span v-else>{{scope.row.content}}</span>
            </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" id="preview" contenteditable="true" 
              v-html="scope.row.explainText"  @input="saveValue($event.target.innerHTML)"  @click="saveValue($event.target.innerHTML)"
              @blur="getValue(scope.row,'explainText')"  v-on:paste="handlePaste($event,scope.row,'explainText')">
            </div> -->
            <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="comResult" align="center" label="结论"  v-if="isSelect">
          <template slot-scope="scope">   
            <div>
                <el-select
                    v-model="scope.row.comResult"
                    filterable
                    allow-create
                    default-first-option
                    @change="getRow(scope.row)"
                    placeholder="请输入或选则结论">
                    <el-option label="公开" value="公开"></el-option>
                    <el-option label="部分公开" value="部分公开"></el-option>
                </el-select>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import { PatentDetails } from '@/views/components/common/mixins';
export default{
    mixins:[PatentDetails],
    props:["reportId",'patentNo','selectedFeatures','selectedFeaturesId'],
    data() {
        return {
            tableHeight:null,
            isSelect:false,
            tableData1:[],
            tableData:[],
            mergeObj: {},
            row: this.selectedFeatures?this.selectedFeatures:[],//选中特征push到row中
            mergeArr: ['id', 'pRightName'],//解释
            loading:false,
            Type: "1",//下拉框
            typeArr:[1],//显示权要还是全部显示
            checkList:[],
            selected:this.selectedFeaturesId?this.selectedFeaturesId:[]
        }
    },
    mounted() {
        console.log(this.row,this.selected)
        this.getFeatures();
        if(this.selectedFeatures!==undefined){
            this.isSelect = true

        }
    },
    watch:{
        tableData(){
            this.$nextTick(() => {
                this.setHeight()
            })
        },
        'selectedFeatures'(val){
            console.log(val)
            this.row = val
            if(this.row){
                    this.row.forEach(item=>{
                        var index = this.tableData1.findIndex(i=>{
                            return i.id == item.id
                        })
                        if(index!=-1){
                            this.$set(this.tableData1[index],'comResult',item.comResult)
                        }
                    })
                }
        },
        selectedFeaturesId(val){
            console.log(val)
            this.$set(this,"selected",val?val:[])
            // this.selected = val           
            this.getFeatures();
            
        },
    },
    methods: {
        setHeight() {
            const offsetTop = window.innerHeight - this.$refs.table.$el.offsetTop - 40
            const body = document.querySelector('.el-table__body')
            if (!body) {
                return false
            }
            const offsetBodyHeight = body.offsetHeight
            if (this.tableData.length && offsetBodyHeight < offsetTop) {
                this.tableHeight = offsetBodyHeight + 75
            } else if (!this.tableData.length) {
                this.tableHeight = null
            } else {
                this.tableHeight = offsetTop
            }
        },
        getRow(row){
            var index = this.row.findIndex(item=>{
                return item.id == row.id
            })
            if(index!=-1){
                this.row[index].comResult = row.comResult
            }
            this.$emit('getFeatures', this.row)
        },
         //选中特征
        getFunInfo(row) {
            console.log("row",row)
            let Index=this.row.findIndex(item => {return item.id==row.id })
            if (Index<0) {
                this.row.push(row)
            } else {
                row.comResult = '公开'
                this.row.splice(Index,1)
            }
            console.log(this.row)
            this.$emit('getFeatures', this.row)
        },
        getFeatures() {
            this.loading=true
            let PatentRight = {
                patentNo: this.patentNo,
                reportId:this.reportId
            }
            this.$api.getFeatures(PatentRight).then(res => {
                console.log("res",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].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.tableData1.push(res.data.patentRightVos[i].features[m])
                    }
                    // } else {
                    // this.tableData1.push({
                    //     pSignPatentNo:res.data.patentRightVos[i].signPatentNo,
                    //     pPatentId:res.data.patentRightVos[i].patentId,
                    //     pContent:res.data.patentRightVos[i].content,
                    //     pType:res.data.patentRightVos[i].type,
                    //     pSort:res.data.patentRightVos[i].sort,
                    //     pReportId:res.data.patentRightVos[i].reportId,
                    //     pContentOut: res.data.patentRightVos[i].contentOut,
                    //     pRightName : res.data.patentRightVos[i].RightName,
                    //     content : res.data.patentRightVos[i].content,
                    // })
                    // }
                }
                if(this.row){
                    this.row.forEach(item=>{
                        var index = this.tableData1.findIndex(i=>{
                            return i.id == item.id
                        })
                        if(index!=-1){
                            this.$set(this.tableData1[index],'comResult',item.comResult)
                        }
                    })
                }
                this.TypeSelect(this.Type)//调用显示权要
                this.loading=false
                }
                // console.log("@@",this.tableData1);
            })
        },
        TypeSelect(event) {//显示
            this.typeArr = [];
            if (event==1) {
                this.typeArr.push(1);
            } else {
                this.typeArr.push(1, 0);
            }
            // console.log("@@",this.tableData);
            // console.log("@@",this.tableData1);
            this.tableData = this.tableData1.filter(item => {
                return this.typeArr.includes(item.pType)
            })
            // console.log("tableData",this.tableData);
            this.getSpanArr(this.tableData)
        },
        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>