<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div class="head">
                <div class="headLeft">
                    <el-button type="primary" size="small" @click="refreshData" class="margin-right_10">刷新</el-button>
                    <el-button type="primary" size="small" v-if="isEdit" @click="cancel" class="margin-right_10">取消编辑</el-button>
                    <el-button type="primary" size="small" v-if="isEdit" @click="save" class="margin-right_10">保存</el-button>
                    <el-button type="primary" size="small" v-else @click="edit" class="margin-right_10">编辑</el-button>
                    <el-dropdown :hide-on-click="false" @visible-change="visibleChange">
                        <el-button type="primary" size="small" class="el-dropdown-link">
                            显示栏位管理<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-checkbox-group v-model="checkList" @change="editColumn">
                                <el-dropdown-item v-for="item in column" :key="item.field">
                                    <el-checkbox  :label="item.field">{{ item.name }}</el-checkbox>
                                </el-dropdown-item>
                            </el-checkbox-group>
                            
                        </el-dropdown-menu>
                        </el-dropdown>
                </div>
                
            </div>
        </el-header>
        <el-main v-DivHeight="getDivHeight">
            <el-table v-loading="loading" :data="tableData" :maxHeight="tableHeight - 45" border :header-cell-style="{'text-align':'center'}" style="width: 100%"
            @cell-dblclick="cellDblclick">
                <el-table-column prop="sysOrder"  label="序号" width="100" align="center">
                    <template slot-scope="scope">
                        <div>
                            权要{{ scope.row.sysOrder+1 }}
                            <!-- <span v-if="!getClaimDel(scope.row)"><el-button type="text" size="small" @click="delClaim(scope.row)">删除</el-button></span> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="原权要内容" > 
                    <template slot-scope="scope">
                        <div>
                            <el-input type="textarea" autosize v-model="scope.row.content" v-if="isEdit" @blur="changeClaimOptionType($event,scope.row)"></el-input>
                            <span :class="getClaimDel(scope.row)?'del':''" v-else v-html="scope.row.content"></span> 
                        </div>
                    </template>
                </el-table-column>
                <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 v-if="item.field == 'historyContent1'">
                            <my-RichText v-if="editMessage && editMessage.field == item.field && editMessage.row.sysOrder == scope.row.sysOrder" :autoFocus="true" :value="getModifyClaim(scope.row,1)" @blur="(value)=>changeMessage(item.field,scope.row,value)"></my-RichText>
                            <div v-else v-html="getModifyClaim(scope.row,1)"></div>
                        </div>
                        <div v-if="item.field == 'historyDescription1'">
                            <my-RichText v-if="editMessage && editMessage.field == item.field && editMessage.row.sysOrder == scope.row.sysOrder" :autoFocus="true" :value="getModifyDescription(scope.row,1)" @blur="(value)=>changeMessage(item.field,scope.row,value)"></my-RichText>
                            <div v-else v-html="getModifyDescription(scope.row,1)"></div>
                        </div>
                        <div v-if="item.field == 'historyContent2'">
                            <my-RichText v-if="editMessage && editMessage.field == item.field && editMessage.row.sysOrder == scope.row.sysOrder" :autoFocus="true" :value="getModifyClaim(scope.row,2)" @blur="(value)=>changeMessage(item.field,scope.row,value)"></my-RichText>
                            <div v-else v-html="getModifyClaim(scope.row,2)"></div>
                        </div>
                        <div v-if="item.field == 'historyDescription2'">
                            <my-RichText v-if="editMessage && editMessage.field == item.field && editMessage.row.sysOrder == scope.row.sysOrder" :autoFocus="true" :value="getModifyDescription(scope.row,2)" @blur="(value)=>changeMessage(item.field,scope.row,value)"></my-RichText>
                            <div v-else v-html="getModifyDescription(scope.row,2)"></div>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="1" label="修改后权要内容" > 
                    <template slot-scope="scope">
                        <div>
                            <my-RichText v-if="editMessage && editMessage.field == '1' && editMessage.row.sysOrder == scope.row.sysOrder" :autoFocus="true" :value="getModifyClaim(scope.row)" @blur="(value)=>changeMessage('1',scope.row,value)"></my-RichText>
                            <div v-else v-html="getModifyClaim(scope.row)"></div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="2" label="修改说明"> 
                    <template slot-scope="scope">
                        <div>
                            <my-RichText v-if="editMessage && editMessage.field == '2' && editMessage.row.sysOrder == scope.row.sysOrder" :autoFocus="true" :value="getModifyDescription(scope.row,1)" @blur="(value)=>changeMessage('2',scope.row,value)"></my-RichText>
                            <div v-else v-html="getModifyDescription(scope.row,1)"></div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="3" label="第二次修改说明" v-if="secondModify"> 
                    <template slot-scope="scope">
                        <div>
                            <my-RichText v-if="editMessage && editMessage.field == '3' && editMessage.row.sysOrder == scope.row.sysOrder" :autoFocus="true" :value="getModifyDescription(scope.row,2)" @blur="(value)=>changeMessage('3',scope.row,value)"></my-RichText>
                            <div v-else v-html="getModifyDescription(scope.row,2)"></div>
                        </div>
                    </template>
                </el-table-column> -->
                <el-table-column prop="parentOrder" label="父权要" align="center" width="100"> 
                    <template slot-scope="scope">
                        <div>
                            <el-select  v-if="isEdit" v-model="scope.row.parentOrderIds" multiple placeholder="请选择" @change="changeParentOrder($event,scope.row)" style="width:100%">
                                <el-option
                                    v-for="item in tableData"
                                    :key="item.sysOrder"
                                    :label="`权要${Number(item.sysOrder)+1}`"
                                    :value="item.sysOrder+''">
                                </el-option>
                                <el-option
                                    label="主权要"
                                    value="-1">
                                </el-option>
                            </el-select>
                            <span v-else>{{ getParentOrder(scope.row) }}</span> 
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="claimType" label="权要类型" align="center" width="100"> 
                    <template slot-scope="scope">
                        <div>
                            <el-select  v-if="isEdit" v-model.number="scope.row.claimType" placeholder="请选择" @change="changeClaimOptionType($event,scope.row)" style="width:100%">
                                <el-option
                                    v-for="item in claimType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <span v-else>{{ getClaimData(scope.row) }}</span> 
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" v-if="isEdit" @click="del(scope)">删除</el-button>
                            <el-button type="text" v-if="isEdit" @click="add(scope)">在下方增加一行</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>

    
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
export default {
  components: {},
  mixins:[getTableHeight],
  props: {
    projectId:{
        default:null
    },
    patentNo:{
        default:''
    }
  },
  data() {
    return {
        tableData:[],
        checkList:[],
        currentCheckList:[],
        loading:false,
        isEdit:false,
        claimType:[
            {
                value:1,
                label:'主权利要求'
            },
            {
                value:0,
                label:'附属权利要求'
            }
        ],
        firstModify:false,
        secondModify:false,
        editMessage:{
            field:'',
            row:{}
        },
        column:[]
    };
  },
  watch: {},
  computed: {},
  created() {},
  async mounted() {
    this.column = await this.$commonJS.getCustomField('claimManage',{projectId:this.projectId})
    this.checkList = this.column.map(item=>{
        if(!item.ifHidden){
           return item.field 
        }
    })
    this.getList()
  },
  methods: {
    editColumn(){
        for (var i = 0; i < this.column.length; i++) {
                this.column[i].order = i
            if (this.checkList.includes(this.column[i].field)) {
                this.column[i].ifHidden = false
            } else {
                this.column[i].ifHidden = true
            }
        }
        
    },
    visibleChange(val){
        if(val){
            this.currentCheckList = JSON.parse(JSON.stringify(this.checkList))
            return
        }
        var sign = false
        if(this.checkList.length != this.currentCheckList.length){
            sign = true
        }else{
            for(var i = 0;i<this.checkList.length;i++){
                var value = this.checkList[i]
                var index = this.currentCheckList.indexOf(value)
                if(index == -1){
                    sign = true
                    break
                }
            }
        }
        
        if(!sign){
            return
        }
        var params = {
            tableName: 'claimManage',
            projectId:this.projectId,
            value: this.column,
        }
        this.$api.setTableColumns(params).then((response) => {
            if (response.code == 200) {
            }
        }).catch(error => {
        })
    },
     //是否有删除权要
     getClaimDel(row){ 
        return false
        if(row.patentClaimHistoryList){
            return row.patentClaimHistoryList.find(item=>{
                return item.operateType == 1
            })
        }else{
            return false
        }
        
    },
    //添加权要删除历史
    delClaim(row){
        var params = {
            claimId:row.id,
            ifFirst:!this.secondModify
        }
        this.$api.deletePatentClaim(params).then(response=>{
            if(response.code == 200){
                this.getList()
            }
        }).catch(response=>{

        })
    },
     //双击单元格进行编辑
     cellDblclick(row, column, cell, event){
       this.editMessage = {
            field:column.property,
            row:JSON.parse(JSON.stringify(row))
        }
     },
    changeMessage(field,row,value){
        var api = 'alterPatentClaim'
        var params = {
            claimId:row.id,
            content:'',
            description:'',
        }
        var obj = null
        switch(field){
            case 'historyContent1'://第一次修改后权利要求
                obj = this.getModifyClaim(row,1,'object')
                params.content = value
                params.ifFirst = true
                if(obj){
                    params.description = obj.description
                }
                break;
            case 'historyContent2'://第一次修改后权利要求
                obj = this.getModifyClaim(row,2,'object')
                params.content = value
                params.ifFirst = false
                if(obj){
                    params.description = obj.description
                }
                break;
            case 'historyDescription1'://第一次修改说明
                obj = this.getModifyDescription(row,1,'object')
                params.description = value
                params.ifFirst = true
                if(obj){
                    params.content = obj.content
                }
                break;
            case 'historyDescription2'://第二次修改说明
                obj = this.getModifyDescription(row,2,'object')
                params.description = value
                params.ifFirst = false
                if(obj){
                    params.content = obj.content
                }
                break;
        }
        if(obj){
            params.patentClaimHistoryId = obj.id
            api = 'editPatentClaimHistory'
        }
        
        this.$api[api](params).then(response=>{
            if(response.code == 200){
                this.$message.success('编辑成功')
                this.getList()
                this.editMessage = {
                    field:'',
                    row:{}
                }
            }
        }).catch(error=>{
            
        })
        
    },
    //导入数据
    refreshData(){
      this.$confirm('重置权利要求', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          patentNo:this.patentNo,
          refreshContent:['3'],
          projectId:this.projectId
        }
        this.loading = true
        this.$api.refreshPatent(params).then(response=>{
          if(response.code == 200){
            this.getList()
          }
        }).catch(error=>{
          this.$message.error('数据刷新失败')
          this.loading = false
        })
      })
      
    },
    //获取修改后权要
    getModifyClaim(row,type,dataType='string'){
        if(row.patentClaimHistoryList){
            var obj = row.patentClaimHistoryList.find(item=>{
                if(type == 1){
                    return item.operateType != 2 && item.ifFirst
                }else if(type == 2){
                  return item.operateType != 2 && !item.ifFirst
                }
            })
            if(obj){
                if(dataType == 'string'){
                   return obj.content 
                }else if(dataType == 'object'){
                    return obj
                }
            }else{
                return ''
            }
        }
        return ''
    },
    //获取权要修改说明
    getModifyDescription(row,type,dataType='string'){
        if(row.patentClaimHistoryList){
            var obj = row.patentClaimHistoryList.find(item=>{
                if(type == 1){
                    return item.operateType != 2 && item.ifFirst
                }else if(type == 2){
                    return item.operateType != 2 && !item.ifFirst
                }
            })
            if(obj){
                if(dataType == 'string'){
                   return obj.description 
                }else if(dataType == 'object'){
                    return obj
                }
            }else{
                return ''
            }
        }
        return ''
    },
    //获取权要
    getList(){
        var params = {
            projectId:this.projectId
        }
        this.loading = true
        this.$api.queryClaim(params).then(response=>{
            if(response.code == 200){
                var data = response.data.data
                var first = false
                var second = false
                for(var i = 0;i<data.length;i++){
                    
                    if(data[i].patentClaimHistoryList){
                        var history = data[i].patentClaimHistoryList
                        if(!first){
                            first = history.find(item=>{
                                return item.ifFirst
                            })
                        }
                        if(!second){
                            second = history.find(item=>{
                                return !item.ifFirst
                            })
                        }
                    }
                    if(first && second){
                        break;
                    }
                }
                this.firstModify = first
                this.secondModify = second
                this.tableData = response.data.data
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            this.loading = false
        })
    },
    //编辑
    async edit(){
        if(!(await this.$permission.projectPermission(this.projectId))){
            this.$showPermissionDialog()
            return false
        }
        if(this.tableData.length == 0){
            this.tableData.push({
                sysOrder : 0,
                optionType : 2,
                content : ''
            })
        }
        this.isEdit = true
    },
    //保存
    save(){
        var params = {
            addClaimDTOs:this.tableData,
            projectId:this.projectId
        }
        this.$api.addClaim(params).then(response=>{
            if(response.code == 200){
                this.isEdit = false
                this.$message.success('保存成功')
                this.getList()
            }
        }).catch(error=>{
            this.$message.error('保存失败')
        })
    },
    //取消编辑
    cancel(){
        this.isEdit = false
        this.getList()
    },
    //删除当前一行
    del(scope){
        var index = scope.$index
        this.tableData.splice(index,1)
        this.updateClaimOrder(index-1,1)
    },
    //在下方新增一行
    add(scope){
        var index = scope.$index
        var data = JSON.parse(JSON.stringify(scope.row))
        data.sysOrder = Number(data.sysOrder) + 1
        data.optionType = 2
        data.content = ''
        this.tableData.splice(index+1,0,data)
        this.updateClaimOrder(index+1,2)
    },
    //更新权要序号
    updateClaimOrder(index,type){
        for(var i = index+1;i<this.tableData.length;i++){
            if(type == 1){
                this.tableData[i].sysOrder = Number(this.tableData[i].sysOrder) - 1
            }else if(type == 2){
                this.tableData[i].sysOrder = Number(this.tableData[i].sysOrder) + 1
            }
            if(this.tableData[i].optionType != 2){
                this.tableData[i].optionType = 1
            }
        }
    },
    //切换父权要
    changeParentOrder(value,row){
        this.changeClaimOptionType(value,row)
        row.parentOrder = row.parentOrderIds.join(',')
    },
    changeClaimOptionType(value,row){
        if(row.optionType != 2){
            row.optionType = 1
        }
    },
    //获取父权要
    getParentOrder(row){
        if(row.claimType == 1){
            this.$set(row,'parentOrderIds',['-1'])
            return ''
        }
        var arr = []
        if(row.parentOrder){
           arr = row.parentOrder.split(/,|，/) 
        }
        this.$set(row,'parentOrderIds',arr)
        // row.parentOrderIds = arr
        var parentOrder = ''
        arr.forEach((item,index) => {
            var num = Number(item)+1
            parentOrder = parentOrder + `权要${num}`
            if(index != arr.length - 1){
                parentOrder = parentOrder + '、'
            }
        });
        return parentOrder
    },
    //获取权利要求类型
    getClaimData(row){
        var obj = this.claimType.find(item=>{
            return item.value == row.claimType
        })
        if(obj){
            return obj.label
        }
        return ''
    }
  },
};
</script>
<style lang="scss" scoped>
.head{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.headLeft{
    width:100%;
    display: flex;
    flex-direction: row-reverse;
}
</style>