<template>
  <div>
    <div style="margin-top: 20px; display: flex; justify-content: space-between">
            <!-- <el-button @click="addInvalid" type="primary" size="small">添加/更新无效证据</el-button> -->
            <el-dropdown @command="getProof" v-if=" $reportPermission(reportId,[0,1])">
                <span class="el-dropdown-link">
                    <el-button type="primary" size="small">
                        添加/更新无效证据<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="item in proofs" :key="item.id" :command="item.id" >添加/更新<span style="color:#66b1ff">D{{item.sort}}</span>的无效证据</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
            <div>
                <el-table v-if="refreshData" :data="tableData" ref="table" border maxHeight="400" v-loading="loading" style="min-width: 100%; margin-top: 20px;overflow:auto">
                    <el-table-column prop="featureId" label="特征" align="center" width="300px">
                        <template slot-scope="scope">
                            <!-- <div class="selectButton" v-if="scope.row.edit">
                                <el-select v-model="scope.row.featureId" placeholder="请选择"  style="width:100%">
                                    <el-option v-for="feature in featureList" :key="feature.featureId" :label="feature.featureName" :value="feature.featureId" :disabled="tableData.findIndex(item1=>{return item1.featureId == feature.featureId})!=-1">
                                    </el-option>
                                </el-select>
                                <el-button @click.stop="addFeature(scope.row)" ><i class="el-icon-plus"></i></el-button>
                            </div> -->
                            <div >
                                <el-tooltip class="item" effect="dark" :content="scope.row.featureContent" placement="top">
                                    <span>特征{{ scope.row.featuresOrder }}</span>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" align="center" label="证据文献">
                        <template slot-scope="scope">
                            D{{ scope.row.sort }}
                        </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" class="div_MAX_Height"></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 div_MAX_Height" v-for="(item1, index) in scope.row.arguments" :key="index+'p'">
                                    <myRich-Text placeholder="请输入答辩意见" v-model="item1.argumentStr" style="width:100%" v-if="scope.row.edit"></myRich-Text>
                                    <div v-else v-html="item1.argumentStr" class="div_MAX_Height"></div>
                                </div>
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" v-if=" $reportPermission(reportId,[0,1])">
                        <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)">删除</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="visible" width="800px" append-to-body>
                <div>
                    <el-radio-group v-model="proofId" @input="getProof">
                        <el-radio v-for="item in proofs" :key="item.id" :label="item.id">
                            D{{item.sort}}
                        </el-radio>
                    </el-radio-group>
                </div>
            </el-dialog> -->
            <!-- <addInvalidDialog ref="addInvalidDialog" :featureList="featureList" v-bind="$attrs" v-on="$listeners"></addInvalidDialog> -->
            <el-dialog title="添加证据" :visible.sync="EvidenceVisible" width="1000px" :before-close="closeEvidence" custom-class="addInvalid" append-to-body>
                <Invalid-Evidence ref="invalid" :reportId="reportId" :patentNo="patentNo" @edit="getEdit"></Invalid-Evidence>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeEvidence">取 消</el-button>
                    <el-button type="primary" @click="submitEvidence">确 定</el-button>
                </div>
            </el-dialog>
  </div>
</template>

<script>
import addInvalidDialog from "../InvalidDetails/addInvalidDialog.vue";
import InvalidEvidence from '../InvalidEvidence.vue'
export default {
  components: {
    addInvalidDialog,
    InvalidEvidence
  },
  props: ['reportId','rightSort','tableData','proofs','patentNo','proofGroup','right'],
  data() {
    return {
        loading:false,
        row:[],
        refreshData:true,
        checkList:[],
        featureList: [],//选择特征数组
        proofId:'',//证据id
        visible:false,
        EvidenceVisible:false,
        evidence:null,
    };
  },
  watch: {
    rightSort(){
        this.getFeature()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getFeature()
  },
  methods: {
    getEdit(){
      this.$emit('submit',true)
    },
    //编辑无效证据
    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.rightSort,
        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.tableData[index] = JSON.parse(JSON.stringify(row))
          
          this.refreshData = false
          this.$nextTick(()=>{
            this.refreshData = true
          })
        }
      })
    },
    //获取需要删除的无效证据Id
    getProofId(row){
      this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var proofStrIds = this.tableData.map(item=>{
                if(item.sort == row.sort){
                    return item.proofStrId
                }
            }).filter(item=>{
                return item != row.proofStrId
            })
            var params = {
                ...this.proofGroup,
                compareFileId:row.proofId,
                proofStrIds:proofStrIds
            }
            this.$api.updateProofGroup(params).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功')
                    var index = this.tableData.findIndex(item=>{
                        return item.proofStrId == row.proofStrId
                    })
                    if(index!=-1){
                        this.tableData.splice(index,1)
                    }
                }
            }).catch(error=>{
                this.$message.error('删除失败')
            })
        //   this.deletes([id])
        }).catch(() => {          
        });
      
    },
    //删除无效证据
    deletes(ids){
      this.$api.deleteProofStr(ids).then(response=>{
        if(response.code == 200){
          this.$message.success('删除成功')
          this.$emit('submit',true)
        }
      })
    },

    //关闭添加证据弹窗
    closeEvidence() {
      this.evidence.proofStrIds = []
      this.EvidenceVisible = false
    },
    submitEvidence(){
        var params = {
            ...this.proofGroup,
            compareFileId:this.evidence.id,
            proofStrIds:this.evidence.proofStrIds
        }
        this.$api.updateProofGroup(params).then(response=>{
            if(response.code == 200){
                this.$message.success('更新成功')
                this.EvidenceVisible = false
                this.$emit('submit',true)
            }
        }).catch(error=>{
            this.$message.error('更新失败')
        })
      
    },
    //获取证据详情并打开无效证据弹窗
    getProof(val){
        this.evidence = this.proofs.find(item=>{return item.id == val})
        this.evidence.sortStr = 'D'+this.evidence.sort
        this.$set(this.evidence,'proofStrIds',this.tableData.map(item=>{
            // if(item.sort == this.evidence.sort){
                return item.proofStrId
            // }
        }))
        this.EvidenceVisible = true
        this.$nextTick(() => {
            this.$refs.invalid.open(this.evidence,this.right)
        })
    },
    // 查已添加的特征
    getFeature() {
      let params = {
        reportId: this.reportId,
        rightSort:this.rightSort
      }
      this.$api.getFeatureList(params).then((res) => {
        if (res.code==200) {
          this.featureList=res.data
        }
      })
    },
    //打开添加新特征弹框
    addFeature() {
    //   this.addFeatureVisibe=true
    },
    //添加无效证据
    addInvalid(){
        this.proofId = ''
        this.visible = true
    //   var form = {
    //     rightId:this.rightSort,
    //     reportId:this.reportId
    //   }
    //   this.$refs.addInvalidDialog.open(form)
    },
  },
};
</script>
<style lang="scss">
.addInvalid .el-dialog__body{
  padding-top:5px
}
</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>