<template>
  <div>
    <div class="demo-input-suffix">
     <!-- <p>标的专利：<el-link type="primary" @click="toPatentDetails(patentNo)">{{ patentNo }}</el-link></p>  -->
     <p>所属证据：{{ evidence.sortStr }}</p>
     <p>所属权要：权要{{ right+1 }}</p>
    </div>
    <div style="margin-top: 20px; display: flex; justify-content: space-between">
        <el-button @click="addInvalid" type="primary" size="small">添加无效证据</el-button>
    </div>
    <div>
      <el-table v-if="refreshData" :data="tableData" ref="table" border height="300"
        :span-method="objectSpanMethod" v-loading="loading" style="min-width: 100%; margin-top: 20px;overflow:auto">
        <el-table-column prop="proofStrId" label="#" align="center" width="200px">
          <template slot-scope="scope">
            <el-checkbox-group v-model="evidence.proofStrIds">
              <el-checkbox :label="scope.row.proofStrId">
                {{ scope.$index+1 }}
                <!-- <el-tooltip class="item" effect="dark" :content="scope.row.rightContent" placement="top">
                  <span>{{ scope.row.rightName }}</span>
                </el-tooltip> -->
              </el-checkbox>
            </el-checkbox-group>

          </template>
        </el-table-column>
        <el-table-column prop="content" label="特征" align="center" width="300px">
          <template slot-scope="scope">
            <div v-if="scope.row.edit">
                    <div class="selectButton">
                      <el-select v-model="scope.row.featureId" placeholder="请选择"  style="width:100%" :popperAppendToBody="false" >
                        <el-option v-for="item in featureList" :key="item.featureId" :label="item.featureName" :value="item.featureId" :disabled="tableData.findIndex(item1=>{return item1.featureId == item.featureId})!=-1">
                          <el-tooltip class="item" effect="dark" :content="item.content" placement="top">
                                    <span>{{ item.featureName }}</span>
                                </el-tooltip>
                        </el-option>
                      </el-select>
                      <el-button @click.stop="addFeature(scope.row)" ><i class="el-icon-plus"></i></el-button>
                    </div>
            </div>
            <div v-else>
              <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">
            <myRich-Text placeholder="请输入无效请求书理由" v-model="scope.row.proofStr" v-if="scope.row.edit"></myRich-Text>
            <div v-html="scope.row.proofStr" v-else></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">
                <myRich-Text placeholder="请输入答辩意见" v-model="item.argumentStr" style="width:100%" v-if="scope.row.edit"></myRich-Text>
                <div v-else v-html="item.argumentStr"></div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div v-if="!scope.row.edit">
              <span class="margin-left_10"><el-link type="primary" @click="editInvalid(scope.row,scope.$index)">编辑</el-link></span>
              <span class="margin-left_10"><el-link type="danger" @click="getProofId(scope.row.proofStrId)">删除</el-link></span>
            </div>
            <div v-else>
                <span class="margin-left_10"><el-link type="primary" @click="updateInvalid(scope.row,scope.$index)">保存</el-link></span>
                <span class="margin-left_10"><el-link type="danger" @click="cancelEdit(scope.row,scope.$index)">取消</el-link></span>
            </div>
            
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="添加特征" :visible.sync="addFeatureVisible" width="800px" :before-close="closeFeature" append-to-body>
      <div>
        <rightContent :reportId="reportId" ref="rightContent"></rightContent>
      </div>
    </el-dialog>
    <addInvalidDialog ref="addInvalidDialog" @submit="submitInvalid" :featureList="featureList" @addFeature="getFeature(right)"></addInvalidDialog>
  </div>
</template>
<script>
import { explain1 } from "../../components/mixins";
import { PatentDetails } from "@/views/workspace/folder/components/mixins";
import addInvalidDialog from "./InvalidDetails/addInvalidDialog.vue";
import rightContent from './addFeatures/rightContent.vue'
export default {
  mixins: [explain1, PatentDetails],
  props: ['patentNo','reportId'],
  components: {
    addInvalidDialog,
    rightContent
  },
  data() {
    return {
      refreshData: true,
      tableData: [],
      btnLoading: false,
      loading: false,
      checkList: [],
      mergeObj: {},
      mergeArr: ['id', 'rightName'],//解释
      featureList: [],//选择特征数组
      featureName:'',
      addFeatureVisible:false,
      evidence:'',
      right:null,
      rightDetails:{}
    };
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    //添加无效证据
    addInvalid(){
      var form = {
        rightId:this.right,
        proofId:this.evidence.id,
        proofSortStr:this.evidence.sortStr,
        reportId:this.reportId
      }
      this.$refs.addInvalidDialog.open(form,this.rightDetails)
    },
    submitInvalid(){
      this.getPoofArguments(this.evidence,this.right)
    },
    //编辑无效证据
    editInvalid(row,index){
      if(row.arguments && row.arguments.length==0){
        row.arguments.push({
          argumentStr:''
        })
      }
      this.tableData[index].oldData = JSON.parse(JSON.stringify(row))
      this.$set(row,'edit',true)
      this.refreshData = false
      this.$nextTick(()=>{
        this.refreshData = true
      })
      // row.edit = true
    },
    //取消编辑
    cancelEdit(row,index){
      this.tableData[index] = JSON.parse(JSON.stringify(row.oldData))
      // this.$set(row,'edit',false)
      this.refreshData = false
      this.$nextTick(()=>{
        this.refreshData = true
      })
    },
    //更新无效证据
    updateInvalid(row,index){
      var params = {
        reportId:this.reportId,
        rightId:this.right,
        featureId:row.featureId,
        proofId:row.proofId,
        proofStrId:row.proofStrId,
        proofStr:row.proofStr
      }
      if(row.arguments.length>0){
        params.argumentId = row.arguments[0].id
        params.argumentStr = row.arguments[0].argumentStr
      }
      this.$api.addArguments(params).then(response=>{
        if(response.code == 200){
          this.$message.success('更新成功')
          row.oldData = null
          this.$set(row,'edit',false)
          this.$emit('edit',false)
          this.tableData[index] = JSON.parse(JSON.stringify(row))
          
          this.refreshData = false
          this.$nextTick(()=>{
            this.refreshData = true
          })
        }
      })
    },
    //获取需要删除的无效证据Id
    getProofId(id){
      this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          this.evidence.proofStrIds.splice(this.evidence.proofStrIds.indexOf(id), 1)
          this.deletes([id])
        }).catch(() => {          
        });
      
    },
    //删除无效证据
    deletes(ids){
      this.$api.deleteProofStr(ids).then(response=>{
        if(response.code == 200){
          this.$message.success('删除成功')
          this.$emit('edit',false)
          this.getPoofArguments(this.evidence,this.right)
        }
      })
    },
    // 查询陈述意见
    getPoofArguments(row, right) {
      this.tableData=[]
      let params = {
        reportId  : this.reportId,
        rightSort: right,
        proofId : row.id,
      }
      this.$api.queryPoofArguments(params).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            // res.data.forEach(item => {
            //   let a = {
            //     pRightName: item.rightName,
            //     pContent: item.rightContent,
            //     content: item.featureId,
            //     featureName: item.featureName,
            //     evidence:item.proofStr,
            //     evidence2: item.arguments,
            //     rightSort: params.rightSort,
            //     proofId:item.proofId,
            //   }
            //   this.tableData.push(a)
            // })
            this.tableData = res.data
          } 
          this.TypeSelect()
        }
          
      }).catch(error=>{
      })
    },
    // 查已添加的特征
    getFeature(right) {
      let params = {
        reportId: this.reportId,
        rightSort:right
      }
      this.$api.getFeatureList(params).then((res) => {
        if (res.code==200) {
          this.featureList=res.data
        }
      })
    },

    open(row, right) {
      this.evidence = row
      this.right=right.sort
      this.rightDetails = right
      // row.evidence = this.tableData
      this.getFeature(this.right)
      this.getPoofArguments(row, this.right)
    },
    //添加特征
    addFeature() {
      this.addFeatureVisible=true
      this.$nextTick(()=>{
        this.$refs.rightContent.open(this.rightDetails)
    })
    },
    closeFeature() {
      this.addFeatureVisible = false
      this.featureName=''
      this.getFeature(this.right)
    },
    submitFeature() {
      let params = {
        content:this.featureName,
        rightId:this.tableData[0].rightSort,//权要的id
        reportId:this.reportId
      }
      this.$api.addSingleFeature(params).then((res) => {
        if (res.code==200) {
          this.getFeature(params.rightId)
          this.$message.success('添加特征成功')
          this.closeFeature()
        }
      })
    },
    //获取每个元素所需合并的行数
    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] !== 'evidence') {
              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];
        }
      }
    },

    refreshTable() {
      this.refreshData = false
      this.$nextTick(() => {
        this.refreshData = true
      })
    },

    TypeSelect(event) {//显示
      this.tableData = this.tableData
      this.getSpanArr(this.tableData)
    },
  },
};
</script>
<style lang="scss">
  @import '@/assets/css/selectButton.scss';
</style>
<style lang="scss" scoped>
.innerTable .item {
  /* min-width:200px; */
  padding: 20px 0;
  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>