
<template>
    <div class="height_100">
      <el-container>
        <el-header>
              <div class="head">
                  <el-button type="primary" size="small"  @click="showField" class="margin-right_10">显示栏位管理</el-button>
                  <el-button type="primary" size="small"  @click="addInvalidStatueDialog()" class="margin-right_10">添加</el-button>
              </div>
          </el-header>
          <el-main v-DivHeight="getDivHeight" class="Evidence_details">
            <el-table :data="tableData" border v-loading="loading" :maxHeight="tableHeight - 35" @cell-dblclick="cellDblclick" @cell-click="cellClick" :span-method="objectSpanMethod" :cell-style="cellStyle">
                <el-table-column  v-for="item in column.filter(item=>!item.ifHidden)" :key="item.field" :prop="item.field" :label="item.name" :width="item.width || 'auto'"
                align="center">
                    <template slot-scope="scope">
                        <div>
                            <div v-if="editMessage.field && editMessage.field.field == item.field && editMessage.data.proofGroupId == scope.row.proofGroupId">
                                <!-- <el-select clearable v-if="item.field == 'courtOpinions1' || item.field == 'courtOpinions2'" :value="getColumnData(scope.row,item)" @change="(value)=>changeMessage(item,scope.row,value)" placeholder="请选择">
                                    <el-option label="基于原权要维持有效"  value="基于原权要维持有效"></el-option>
                                    <el-option label="基于修改后权要维持有效"  value="基于修改后权要维持有效"></el-option>
                                    <el-option label="全部无效"  value="全部无效"></el-option>
                                </el-select> -->
                                <my-RichText :ref="item.field + scope.row.proofGroupId" :autoFocus="true" :value="getColumnData(scope.row,item)" @blur="(value)=>changeMessage(item,scope.row,value)"></my-RichText>
                            </div>
                            
                            <div class="text" v-else >
                                <span v-html="getColumnData(scope.row,item)"></span>
                                <span v-if=" item.field == 'invalidReasonDTO.claimSort'">
                                        <el-popover
                                                popper-class="reasonAndEvidence"
                                                placement="bottom"
                                                width="100"
                                                trigger="click"
                                            >
                                                <div class="menuList">
                                                    <div class="menuListLi" @click="delInvalidStatue(scope)">删除</div>
                                                </div>
                                                <i slot="reference" class="el-icon-caret-bottom"></i>
                                            </el-popover>
                                    </span>
                            </div>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" size="small" @click="delFeature(scope)">删除</el-button>
                            <el-button type="text" size="small" @click="addFeature(scope,'up')">在上方新增</el-button>
                            <el-button type="text" size="small" @click="addFeature(scope,'down')">在下方新增</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
          </el-main>
      </el-container>
 
      <addStatute ref="addStatute" :claims="claims" :projectId="projectId" :statueType='statueType' @save="save"></addStatute>
      <fields ref="field" :type="type" :projectId="projectId" @getFieldList="getFieldList"></fields>
    </div>
</template>
<script>
import common from './common';

const column = [
    {
        field:'invalidReasonDTO.statuteId',
        type:'string',
        label:'法条',
        editable:false,
        width:100
    },
    {
        field:'invalidReasonDTO.claimSort',
        type:'string',
        label:'权利要求',
        editable:false,
        width:120
    },
    {
        field:'featureContent',
        type:'string',
        label:'特征',
        editable:true,
        width:180
    },
    {
        field:'invalidReason',
        type:'string',
        label:'证据公开',
        editable:true
    },
    {
        field:'presentOpinions',
        type:'string',
        label:'权利人答复',
        editable:true
    },
    {
        field:'rbDecision',
        type:'string',
        label:'合议组认定',
        editable:true,
        width:180
    },
    {
        field:'courtOpinions1',
        type:'string',
        label:'一审',
        editable:true,
        width:100
    },
    {
        field:'courtOpinions2',
        type:'string',
        label:'二审',
        editable:true,
        width:100,
        ifHidden:true
    }
]
export default {
  components: {
    
  },
  mixins:[common],
  props: {},
  data() {
    return {
        column:[],
        statueType:1,
        // 计算表格合并行的数量
        mergeObj: {},
        // 表格合并行的栏位
        mergeArr: ['invalidReasonDTO.claimSort','invalidReasonDTO.statuteId'],
        type:'finalInvalidReasonInThree',
    };
  },
  watch: {},
  computed: {
    
  },
  created() {},
  mounted() {
  },
  methods: {

    //获取每个元素所需合并的行数
    getSpanArr(data) {
        var mergeObj = {}
        this.mergeArr.forEach((key, index1) => {
            let count = 0;
            mergeObj[key] = [];
            if(key == 'invalidReasonDTO.claimSort'){
                data.forEach((item, index) => {
                    if (index === 0) {
                        mergeObj[key].push(1);
                    } else {
                    if (item.invalidReasonDTO.claimSort === data[index - 1].invalidReasonDTO.claimSort && item.invalidReasonDTO.statuteId === data[index - 1].invalidReasonDTO.statuteId) {
                        mergeObj[key][count] += 1;
                        mergeObj[key].push(0);
                    } else {
                        count = index;
                        mergeObj[key].push(1);
                    }
                    }
                })
            }
            else if(key == 'invalidReasonDTO.statuteId'){
                data.forEach((item, index) => {
                    if (index === 0) {
                        mergeObj[key].push(1);
                    } else {
                    if (item.invalidReasonDTO.statuteId === data[index - 1].invalidReasonDTO.statuteId) {
                        mergeObj[key][count] += 1;
                        mergeObj[key].push(0);
                    } else {
                        count = index;
                        mergeObj[key].push(1);
                    }
                    }
                })
            }
            
        })
        this.mergeObj = mergeObj
        return this.mergeObj
    },
        // 表格合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (!row) {
            return false
        }
        if (this.mergeArr.indexOf(column.property) !== -1) {
            if (this.mergeObj[column.property][rowIndex]) {
                return [this.mergeObj[column.property][rowIndex], 1]
            } else {
                return [0, 0];
            }
        }
    },
    
    
    delFeature(scope){
        this.$confirm('确认删除本条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            var row = scope.row
            var index = scope.$index
            var arr = this.tableData.filter(item=>{
                return item.invalidReasonDTO.invalidStatueId == row.invalidReasonDTO.invalidStatueId
            })
            this.loading = true
            if(arr.length == 1){
                var params = {
                    ...row
                }
                var keys = ['featureContent','invalidReason','presentOpinions','rbDecision','courtOpinions1','courtOpinions2']
                keys.forEach(item=>{
                    params[item] = ''
                })
                this.$api.editFeature(params).then(response=>{
                    if(response.code == 200){
                        this.$message.success('删除成功')
                        this.tableData.splice(index,1,params)
                        this.loading = false
                    }
                }).catch(error=>{
                    this.loading = false
                })
                return
            }
            
            var params = {
                proofGroupId:row.proofGroupId
            }
            var featureSort = row.featureSort
            var invalidStatueId = row.invalidStatueId
            this.$api.delFeature(params).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功')
                    this.loading = false
                    this.updateSort(featureSort,invalidStatueId,'del')
                    this.tableData.splice(index,1)
                    this.getSpanArr(this.tableData)
                }
            }).catch(error=>{
                this.loading = false
            })
        })
        

        
    },
   

  },

};
</script>
<style lang="scss">
    .reasonAndEvidence {
        min-width: 80px ;
        border: 1px solid #ACA9A9;
    }
    .link{
        color: #409EFF;
        cursor: pointer;
    }
</style>
<style lang="scss" scoped>
.head{
    width:100%;
    display: flex;
    flex-direction: row-reverse;
}
.text{
    text-align: left;
}
.menuList :first-child{
  padding-top: 0px;
}
.menuList :hover{
  color: #5c67ff;
}

.menuListLi{
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
  padding: 10px 0 3px 0;
  cursor: pointer;
}
.menuListLi :first-child{
  padding-right: 5px;
}
</style>
<style lang="scss">
.Evidence_details .el-table .el-table__cell {  
    vertical-align: top;  
    /* 其他样式... */  
}  
</style>