<template>
  <div class="height_100">
    <div style="background:white;padding:20px;background:#99CCFF;height: calc(100% - 40px);"  v-DivHeight="getDivHeight">
        <div>
            <p style="margin-top:0">选择对比方案</p>
            <el-divider></el-divider>
            <el-select v-model="ruleForm.claimSort" placeholder="请选择" @change="changeRight" style="padding:20px 0 0 0">
                <el-option v-for="item in rightList2" :key="item.rightSort" :value="item.rightSort" :label="item.rightName"></el-option>
            </el-select>
        </div>
        <div style="height:(100% - 200px)" >
            <el-table
            ref="table"
            :data="tableData2"
            :span-method="objectSpanMethod"
            :row-class-name="tableRowClassName"
            :maxHeight="tableHeight - 240"
            border
            :header-cell-style="{'text-align':'center'}"
            style="min-width: 100%; margin-top: 20px;overflow:auto;">
            >
            <el-table-column
            prop="rightName"
            label="标的权利项"
            align="center"
            width="200px">
            <template slot-scope="scope">  
                <el-tooltip class="item" effect="dark" :content="scope.row.rightContent" placement="top">
                <span>{{scope.row.rightName}}</span>
                </el-tooltip>       
            </template>
            </el-table-column>
            <el-table-column
            prop="featureContent"
            label="标的权利要求特征"
            align="center"
            width="300px">
            <template slot-scope="scope" >       
                    {{scope.row.featureContent}}
            </template>
            </el-table-column>
            <el-table-column
            prop="content"
            label="公识"
            align="center"
            width="100px">
            <template slot-scope="scope" >     
                <el-checkbox-group v-model="checkList">  
                    <el-checkbox :label="scope.row.featureId" class="noWord" @change="changeCommon($event,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 :min-width="item.length > 7 ? '190' : '170'">
            <template slot="header">
                <span>
                    <el-link type="primary"  @click="editContrast(item)">{{ item.type == 0?item.literatureNo:item.name }}(D{{ item.sysOrder }})</el-link>
                </span>
                <el-tag style="font-size:12px;border-radius:50%;" v-if="item.remark">{{item.remark}}</el-tag>
                <span>
                    <my-draggable :list="tableHeader" :check="item.id" @change="changeOrder" @update="updateOrder"></my-draggable>
                </span>
            </template>
            <template slot-scope="scope">
                <el-checkbox-group v-model="checkList1">
                <div class="innerTable" v-if="scope.row.evidenceReasons" style="width:calc(100% + 20px);margin-left:-10px;word-wrap:break-word;">
                    <p v-for="(inc,index) in scope.row.evidenceReasons.filter(i=>i.literatureId == item.id)" :key="inc.evidenceId">
                    <el-checkbox :label="inc.evidenceId" v-if="scope.row.evidenceReasons" @change="changeEvidence($event,inc,scope.row)">
                    <!-- <el-input style="width:calc(100% + 20px);margin-left:-10px;word-wrap:break-word;" v-model="i"></el-input>  -->
                        <span>
                            [{{ inc.fieldName }}]
                            <span v-if="inc.common">
                                (解析过程：{{ inc.common }})
                            </span>
                            {{inc.evidenceText}}
                            <el-image ref="image" :preview-src-list="imgList" v-if="inc.fileGuid" :src="$commonJS.checkViewer(inc.fileGuid)"  style="vertical-align:middle;width:100px" @click.prevent="showImage($commonJS.checkViewer(inc.fileGuid))"></el-image>
                            <span v-if="inc.conclusion">
                                ({{ inc.conclusion }})
                            </span>
                        </span> 
                        </el-checkbox>
                    </p>
                </div>
                </el-checkbox-group>
            </template>
            </el-table-column>
            </el-table>   
        </div>
        
        <div style="display:flex; justify-content: space-between;align-items:center;padding-top:20px">
          <p>对比结论/原因:</p>
          <div style="width:calc(100% - 200px);">
            <myRichText v-model="ruleForm.common" placeholder="请输入对比结论/理由（可粘贴图片）"></myRichText>
          </div>
          <div >
            <el-button type="primary" :loading="btnLoading" @click="save">保存</el-button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import mixins from './mixins'
export default {
    mixins:[mixins],
  components: {},
  props: {
    rightList:{
        default:()=>{
            return []
        }
    },
  },
  data() {
    return {
        tableData2:[],
        rightList2:[],
        ruleForm:{
            claimSort:0,
            assoReasonFeatures:[],
        },
        checkList:[],
        checkList1:[],
        btnLoading:false
    };
  },
  watch: {
    tableData(val){
        if(val){
            this.changeRight()
        }
    },
    showType(val){
        this.$set(this.ruleForm,'claimSort',0)
        this.getRightList2()
    },
    rightList(val){
        if(val){
            this.getRightList2()
        }
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getRightList2()
    if(this.tableData.length>0){
        this.changeRight()
    }
  },
  methods: {
    getData(){
        this.tableData2 = this.tableData.filter(item=>{
            return item.rightSort == this.ruleForm.claimSort
        })
    },
    getRightList2(){
        if(this.showType == 1){
            this.rightList2 = this.rightList.filter(item=>{
                return item.rightType == 1
            })
        }else{
            this.rightList2 = this.rightList
        }
    },
    changeRight(val){
        this.tableData2 = this.tableData.filter(item=>{
            return item.rightSort == this.ruleForm.claimSort
        })
        this.getSpanArr(this.tableData2)
    },
    changeCommon(val,data){
        if(!val){
            var index = this.ruleForm.assoReasonFeatures.findIndex(item=>{
                return item.featureId == data.featureId && item.reasonId == 0
            })
            if(index != -1){
                this.ruleForm.assoReasonFeatures.splice(index,1)
            }
        }else{
            this.ruleForm.assoReasonFeatures.push(
                {
                    featureId:data.featureId,
                    reasonId:0
                }
            )
        }
    },
    changeEvidence(val,row,data){
        if(!val){
            var index = this.ruleForm.assoReasonFeatures.findIndex(item=>{
                return item.featureId == data.featureId && item.reasonId == row.evidenceId
            })
            if(index != -1){
                this.ruleForm.assoReasonFeatures.splice(index,1)
            }
        }else{
            this.ruleForm.assoReasonFeatures.push(
                {
                    featureId:data.featureId,
                    reasonId:row.evidenceId
                }
            )
        }
    },
    save(){
        this.ruleForm.projectId = this.projectId
        this.btnLoading = true

        if(this.ruleForm.assoReasonFeatures.length == 0){
            this.$message.warning('请选择对比记录')
            return
        }
        this.$api.addCompareRecordGroup(this.ruleForm).then(response=>{
            if(response.code == 200){
                this.$message.success('添加成功')
                this.$set(this.ruleForm,'assoReasonFeatures',[])
                this.$set(this,'checkList',[])
                this.$set(this,'checkList1',[])
                this.$set(this.ruleForm,'common','')
                this.btnLoading =false
            }
        }).catch(error=>{
            this.$message.error('添加失败')
            this.btnLoading = false
        })
    },
  },
};
</script>
<style lang="scss">
.success-row {
  background-color:#eaf3fb !important; 
}
.innerTable .el-checkbox__label{
  /* padding: 20px 0; */
  width: calc(100% - 20px);
  /* height: 128px; */
  text-align: left;
  display:inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: auto;
}
.innerTable p:last-child:first-child .el-checkbox__label{
   
    height: 100%;
  }

</style>
<style lang="scss" scoped>

.innerTable p{
  /* min-width:200px; */
  padding: 20px 10px;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items:center;
  // height: 130px;
  line-break:normal;
  overflow: auto;
  border-bottom:1px solid #EBEEF5;
}
.innerTable p:last-child:first-child {
    //item 即是最后一个元素 又是第一个元素
    height: 100%;
  }
.innerTable p:nth-child(1){
  border-bottom: 1px solid #EBEEF5;
}
.innerTable p:last-child{
  border-bottom: none;
}

</style>