<template>
  <!-- 生成陈述意见方案 -->
  <div>
    <span>证据文献：</span>
    <el-select v-model="proofId" placeholder="请选择证据文献" @change="changeEvidence" style="padding:20px 0 0 0;margin-right: 20px;">
      <el-option v-for="item in EvidenceList" :key="item.sortStr" :value="item.id"
        :label="item.sortStr"></el-option>
    </el-select>
    <span>权要：</span>
    <el-select v-model="right" placeholder="请选择权要" @change="changeRight" style="padding:20px 0 0 0">
      <el-option v-for="item in rightList" :key="item.rightName" :value="item.sort"
        :label="item.rightName"></el-option>
    </el-select>
    <el-table :data="tableData" ref="table" border :height="tableHeight" v-loading="loading"
      style="min-width: 100%; margin-top: 20px;overflow:auto">
      <el-table-column prop="featureName" label="特征" align="center">
        <template slot-scope="scope">
          <div>
              <el-tooltip class="item" effect="dark" :content="scope.row.featureContent" placement="top">
               <span>{{ scope.row.featureName }}</span> 
              </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="proofStr" align="center" label="证据（无效请求人）">
        <template slot-scope="scope">
          <div v-html="scope.row.proofStr"> </div>
        </template>
      </el-table-column>
      <el-table-column prop="arguments" align="center" label="证据（权利人）">
        <template slot-scope="scope">
          <div class="innerTable" style="width:calc(100% + 20px);margin-left:-10px;word-wrap:break-word;">
            <div class="item" v-for="(item, index) in scope.row.arguments">
              <el-checkbox-group v-model="checkList">
                <el-checkbox :label="item.id" style="display: flex; align-items: center;">
                  <div v-html="item.argumentStr"> </div>
                </el-checkbox>
              </el-checkbox-group>
              <el-button @click.native.prevent="deleteRow(item.id)" type="text" size="small" style="margin-left: 10px;color: red;"> 删除 </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="display:flex; justify-content: space-between;align-items:center;padding-top:20px" v-if="show">
      <p>修改方案/理由:</p>
      <div style="width:calc(100% - 200px);">
        <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px;min-height:50px;" id="preview"
                  contenteditable="true" v-html="ruleForm.result" 
                  @blur="saveValue(ruleForm,'result',$event.target.innerHTML)" v-on:paste="handlePaste($event, 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>
</template>
<script>
import { explain1 } from "@/views/report/components/mixins";
export default {
  mixins: [explain1],
  props:['reportId','signPatentNo'],
  data() {
    return {
      ruleForm:{},
      tableData: [],
      tableData1: [],
      rightList: [],
      right: '',//当前权要
      tableHeight: null,
      loading: false,
      checkList: [],
      result: '',
      show: true,
      EvidenceList: [],//证据文献List
      proofId:'',
    }
  },
  watch: {
    tableData() {
      this.$nextTick(() => {
        this.setHeight()
      })
    },
  },
  async mounted() {
    await this.getPatentByPatentNo()
    await this.getQueryProofList()
    this.getList()
  },
  methods: {
    setHeight() {
      const offsetTop = window.innerHeight - this.$refs.table.$el.offsetTop - 140
      const body = document.querySelector('.el-table__body')
      if (!body) {
        return false
      }
      const offsetBodyHeight = body.offsetHeight
      //console.log( window.innerHeight,body,offsetBodyHeight,offsetTop)
      if (this.tableData.length && offsetBodyHeight < offsetTop) {
        this.tableHeight = offsetBodyHeight + 75
      } else if (!this.tableData.length) {
        this.tableHeight = null
      } else {
        this.tableHeight = offsetTop
      }
      this.tableHeight = this.tableHeight > 300 ? this.tableHeight : 300
    },
    // 查询专利权要
   async getPatentByPatentNo() {
      let params = {patentNo: this.signPatentNo,}
      await this.$api.getFeatureRights(params).then((res) => {
        if (res.code==200) {
          this.rightList = res.data
          this.right = res.data[0].sort
        }
      })
    },
    // 查询证据文献
    async getQueryProofList() {
      let params = {
        reportId:this.reportId,
        signPatentNo:this.signPatentNo,
        size: 99,
        current: 1,
      }
      await this.$api.queryProof(params).then((res) => {
        if (res.code==200) {
          this.EvidenceList = res.data
          this.proofId=res.data[0].id
        }
      }).catch((error) => {
        
      })
    },
    // 请求陈述意见列表
    getList() {
      let params = {
        proofId:this.proofId,
        rightSort:this.right,
        reportId:this.reportId,
      }
      this.$api.queryPoofArguments(params).then((res) => {
        if (res.code == 200) { 
          this.tableData=res.data
        }
      })
      // let PatentRight = {
      //   "patentNo": "CN102727071A",
      //   "splitType": "1",
      //   "splitBy": "2",
      //   "ReportId": 368
      // }
      // this.rightList = []
      // this.$api.splitPatentRight(PatentRight).then(res => {
      //   if (res.code == 200) {
      //     res.data.patentRightVos.forEach(item => {
      //       this.rightList.push({
      //         type: item.type,
      //         rightName: item.RightName
      //       })
      //       item.id = item.RightName
      //       item.features[0].evidence = '证据' //证据（无效请求人）
      //       item.features[0].evidence2 = [] //证据（权利人）
      //     })
      //     this.right = this.rightList[0].rightName
      //     this.tableData1 = res.data.patentRightVos;
      //     this.getTableData()
      //   }
      // })
    },
    getTableData() {
      // this.tableData = this.tableData1.find(item => {
      //   return item.RightName == this.right
      // }).features
    },
    changeRight(val) {
      console.log(val);
      // this.getTableData()
      this.clearChose()
      this.right=val
      this.getList()
    },
    changeEvidence(val) {
      this.clearChose()
      this.proofId=val
      this.getList()
    },
    //保存方案
    save() {
      console.log(this.result,this.checkList,this.right,this.ruleForm);
      let params = {
        reportId: this.reportId,
        rightSort: this.right,
        modifyReason: this.ruleForm.result,
        argumentIds: this.checkList
      }
      this.$api.addArgumentsScenario(params).then((res) => {
        if (res.code == 200) { 
          this.$message.success('保存成功')
          this.clearChose()
        }
      })
    },
    //清空信息
    clearChose() {
      this.checkList = []
      this.result = ''
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
    deleteRow(val) {
      console.log(val);
      let params = [
        val
      ]
      this.$api.deletePoofArguments(params).then((res) => {
        if (res.code == 200) {
          this.getList()
          this.$message.success('删除成功')
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.innerTable .item {
  /* 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 .item:last-child:first-child {
  //item 即是最后一个元素 又是第一个元素
  height: 100%;
}

.innerTable .item:nth-child(1) {
  border-bottom: 1px solid #EBEEF5;
}

.innerTable .item:last-child {
  border-bottom: none;
}
</style>