
<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" :cell-style="cellStyle">
                <el-table-column  v-for="item in column.filter(item=>!item.ifHidden)"
                :render-header="$commonJS.renderHeaderMethods" :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 :autoFocus="true" :value="getColumnData(scope.row,item)" @blur="(value)=>changeMessage(item,scope.row,value)"></my-RichText>
                            </div>
                            
                            <div class="text" v-else v-html="getColumnData(scope.row,item)"></div>
                            
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120px">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" size="small" @click="delInvalidStatue(scope)">删除</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.claimText',
        type:'string',
        label:'权利要求',
        editable:true,
        width:120
    },
    {
        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:2,
        type:'finalInvalidReason',
    };
  },
  watch: {},
  computed: {
    
  },
  created() {},
  mounted() {
    
  },
  methods: {


  },

};
</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>