<template>
    <div class="height_100 plan">
        <el-container>
            <el-header>
                <div style="width:100%;display:flex; justify-content:flex-end;align-items: center;height: 50px;">
                    <el-button type="danger" size="small" @click="delPlan(0)" v-if="checkList.length>0 && $reportPermission(projectId,[0,1])">删除</el-button>
                </div>
            </el-header>
            <el-main v-DivHeight="getDivHeight">
                <el-table
                    :data="tableData"
                    border
                    class="table"
                    :maxHeight="tableHeight - 45"
                    :span-method="objectSpanMethod"
                    :row-class-name="tableRowClassName"
                    v-loading="loading"
                    :header-cell-style="{'text-align':'center'}"
                    style="min-width: 100%; overflow:auto">
                    <el-table-column prop="rightSort" label="权要"  align="center"  width="200px">
                        <template slot-scope="scope">  
                            <span>{{scope.row.rightName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="groupId" label="对比组合"  min-width="200px" >

                        <template slot-scope="scope" >
                            <div >
                                <el-checkbox-group v-model="checkList">
                                    <el-checkbox :label="scope.row.groupId" >
                                        <p ><span>{{ scope.row.groupName}} </span><span v-if="$reportPermission(projectId,[0,1])"><el-link style="color:red;margin-left:10px" @click.prevent="delPlan(scope.row.groupId)">删除</el-link></span></p>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="featureSysOrder" label="特征"  align="center"  width="200px">
                        <template slot-scope="scope">
                            <div class="innerTable"  style="width:calc(100% + 20px);margin-left:-10px">
                                <el-tooltip class="item" effect="dark" :content="scope.row.featureContent" placement="top">
                                    <span>特征{{scope.row.featureSysOrder}}</span>
                                </el-tooltip>  
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="PublicKnowledge" label="公识"  align="center"  width="100px">
                    <template slot-scope="scope">  
                        <div class="innerTable"  style="width:calc(100% + 20px);margin-left:-10px">
                                <span>
                                    {{ scope.row.publicKnowledge }}
                                </span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="patentNo" label="对比专利"  width="200px">
                    <template slot-scope="scope">  
                        <div>
                            {{ scope.row.literatureName }}
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="content" label="对比内容"  min-width="200px">
                    <template slot-scope="scope">  
                        <div>
                            <span v-if="scope.row.fieldName">
                                【{{scope.row.fieldName}}】
                            </span>
                            <span v-if="scope.row.recordCommon">
                                ({{ scope.row.recordCommon }})
                            </span>
                            <span>
                                {{ scope.row.evidenceText }}
                            </span>
                            <span v-if="scope.row.fileGuid">
                                <el-image
                                    ref="image"
                                    :preview-src-list="[$commonJS.checkViewer(scope.row.fileGuid)]"
                                    :src="$commonJS.checkViewer(scope.row.fileGuid)"
                                    style="vertical-align: middle; width: 100px"
                                ></el-image>
                            </span>
                            <span v-if="scope.row.conclusion">
                                ({{ scope.row.conclusion }})
                            </span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="groupId" label="对比结论/理由"  align="center"  width="300px">
                        <template slot-scope="scope">  
                            <span v-html="scope.row.common"></span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
export default {
    mixins:[getTableHeight],
    props:{
        projectId:{
            default:0
        }
    },
    components:{
    },
    data() {
        return {
            tableData:[],
            mergeArr:['rightSort','groupId','featureSysOrder'],
            mergeObj:{},
            loading:false,
            checkList:[],
            rightList:[],
            resultant:[]
        }
    },
    mounted() {
        this.getContrastPlan()
    },
    watch:{

    },
    methods: {
        
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        // 表格隔行变色
        tableRowClassName({ row, rowIndex }) {
            // if (rowIndex % 2 === 0) {
            //   return 'success-row1'
            // } else  {
            //   return ''
            // }
        },
        delPlan(id) {
            if(id){
                a = [id]
            } else {
                var a = this.checkList
            }
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.removeCompareGroups(a).then(response=>{
                    if(response.code == 200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.rightList = []
                        this.resultant = []
                        this.getContrastPlan()
                        this.checkList = []
                    }
                    
                })
            
            }).catch(() => {        
            });
            
        },
        getContrastPlan(){
            var params = {
                projectId:this.projectId
            }
            this.loading = true
            this.$api.getCompareGroups(params).then(response=>{
                if(response.code == 200){
                    // this.tableData = response.data.data
                    var data = []
                    var groupOrder = 0
                    response.data.data.forEach(item=>{
                        groupOrder += 1
                        var obj = {
                            groupName:`对比组合${groupOrder}`,
                            groupId:item.groupId,
                            common:item.common,
                            rightSort:item.rightSort,
                            rightName:item.rightName,
                            rightContent:item.rightContent
                        }
                        var feature = item.featureMessages
                        if(feature.length>0){
                            for(let i = 0;i<feature.length;i++){
                                var obj2 = {
                                    featureSysOrder : feature[i].sysOrder,
                                    featureName: feature[i].featureName,
                                    featureContent : feature[i].content
                                }
                                var evidenceReasons = feature[i].evidenceReasons
                                if(evidenceReasons && evidenceReasons.length>0){
                                    for(let j= 0;j<evidenceReasons.length;j++){
                                        if(evidenceReasons[j].evidenceId == 0){
                                            data.push(
                                                {
                                                    ...obj,
                                                    ...obj2,
                                                    publicKnowledge:'公知'
                                                }
                                            )
                                        }else{
                                            evidenceReasons[j].recordCommon = evidenceReasons[j].common
                                            delete evidenceReasons[j].common;
                                            data.push(
                                                {
                                                    ...obj,
                                                    ...obj2,
                                                    ...evidenceReasons[j]
                                                }
                                            )
                                        }
                                    }
                                }else{
                                    data.push(
                                        {
                                            ...obj,
                                            ...obj2,
                                        }
                                    )
                                }
                            }
                        }else{
                            data.push(
                                {
                                    ...obj
                                }
                            )
                        }

                    })
                    this.tableData = data
                    this.getSpanArr(this.tableData)
                    this.loading = false
                }
            }).catch(error=>{
                this.tableData = []
                this.loading = false
            })
        },
        getSpanArr(data) {
            this.mergeArr.forEach((key, index1) => {
                let count = 0;
                this.mergeObj[key] = [];
                data.forEach((item, index) => {
                    if(key == 'featureSysOrder'){
                        if (index === 0) {
                            this.mergeObj[key].push(1);
                        } else {
                            if (item[key] === data[index - 1][key] && item[key].groupId === data[index - 1].groupId) {
                                this.mergeObj[key][count] += 1;
                                this.mergeObj[key].push(0);
                            } else {
                                count = index;
                                this.mergeObj[key].push(1);
                            }
                        }
                    }
                    else{
                        if (index === 0) {
                            this.mergeObj[key].push(1);
                        } else {
                            if (item[key] === data[index - 1][key]) {
                                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];
                    } 
                }

        }
    },
}
</script>
<style>
.plan .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: #ffffff !important;
}
.el-popover{
  min-width: 0;
}
.success-row1 {
  background-color:#eaf3fb !important; 
}
.success-row1:first-child td:first-child{
  background-color: #FFF;
}
</style>
<style lang="scss" scoped>
.innerTable p{
  // min-width:200px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items:center;
  height: 130px;
  line-break:normal;
  overflow: auto;
  border-bottom:1px solid #EBEEF5;
}

.innerTable p:nth-child(1){
  border-bottom: 1px solid #EBEEF5;
}
.innerTable p:last-child{
  border-bottom: none;
}
.table{
  cursor: pointer;
}
</style>