<template>
  <div class="height_100" >
    <el-container>
        <el-header v-if="!choose">
            <div class="head">
                <el-button type="primary" size="small" @click="exportReport">生成报告</el-button>
            </div>
        </el-header>
        <el-main v-DivHeight="getDivHeight">
            <el-table ref="table" class="hideIconTable" :data="tableData" border v-loading="loading" :header-cell-style="{'text-align':'center'}" :maxHeight="tableHeight - 50" row-key="keyId"  :span-method="objectSpanMethod"  @cell-dblclick="cellDblclick" @cell-click="cellClick">
                <el-table-column v-for="item in column.filter(item=>!item.ifHidden)" :key="item.field" :prop="item.field" :label="item.name"  align="center">
                    <template slot-scope="scope">
                        <div v-if="item.field == 'markSelectText'">
                            <div v-html="`[${scope.row.markSelectField}]${scope.row[item.field]}`"></div>
                        </div>
                        <div v-else-if="item.field == 'technicalFeature'">
                            <div style="width:100px;height:100px" v-if="scope.row.systemFileList && scope.row.systemFileList.length>0">
                                <el-image v-for="picture in scope.row.systemFileList" :key="picture.guid" fit="contain" ref="image" style="width:100%;height:100%"  :src="$commonJS.checkViewer(picture.guid)" :preview-src-list="scope.row.systemFileList.map(item=>$commonJS.checkViewer(item.guid))"></el-image>
                            </div>
                            <div v-html="scope.row[item.field]"></div>
                        </div>
                        <div v-else>
                            <div v-if="editedMessage.field && editedMessage.field == item.field && editedMessage.data.id == scope.row.id">
                                <my-RichText :autoFocus="true" :ref="item.field" :value="scope.row[item.field]" @blur="(value)=>changeMessage(item,scope.row,value)"></my-RichText>
                            </div>
                            <div v-else v-html="scope.row[item.field]"></div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="choose" align="center" width="50">
                    <template slot-scope="scope">
                        <div >
                            <el-checkbox-group v-model="checkList1">
                                <el-checkbox :label="scope.row.id">{{ '' }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" v-if="!choose">
                      <template slot-scope="scope">
                          <div>
                              <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
                          </div>
                      </template>
                  </el-table-column>
            </el-table> 
        </el-main>
    </el-container>
    <reportTemplateDialog ref="reportTemplate"></reportTemplateDialog>
  </div>
</template>

<script>
const column = [
            {
                field:'patentNo',
                name:'对比文件',
                ifHidden:false,
                editable:false,
            },
            {
                field:'generalRemark',
                name:'总说明',
                ifHidden:false,
                editable:true,
            },
            {
                field:'technicalPoints',
                name:'现有技术要点',
                ifHidden:false,
                editable:true,
            },
            {
                field:'excuteCase',
                name:'实施方案',
                ifHidden:false,
                editable:true,
            },
            {
                field:'beneficialEffect',
                name:'有益效果',
                ifHidden:false,
                editable:true,
            },
            {
                field:'technicalFeature',
                name:'技术特征',
                ifHidden:false
            },
            {
                field:'markSelectText',
                name:'选中的文本',
                ifHidden:false
            },
            {
                field:'markNoteText',
                name:'说明',
                ifHidden:false
            },
        ]
import { getTableHeight } from '@/views/components/mixins'
  import {tableEdit,updateNoveltyCompareFile} from '../contrastFile/mixins'
import reportTemplateDialog from '@/views/noveltySearch/components/dialog/reportTemplate/reportTemplateDialog.vue';
export default {
  components: {
    reportTemplateDialog
  },
  mixins:[getTableHeight,tableEdit,updateNoveltyCompareFile],
  props: {
    choose:{
        type:Boolean,
        default:false
    },
    checkList:{
        type:Array,
        default:()=>{
            return []
        }
    },
    projectId:{}
  },
  data() {
    return {
        checkList1:this.checkList,
        tableData:[],
        loading:false,
        column:column,
        // 计算表格合并行的数量
        mergeObj: {},
        // 表格合并行的栏位
        mergeArr: ['patentNo','generalRemark','technicalPoints','excuteCase','beneficialEffect'],
        mergeArr1:['generalRemark','technicalPoints','excuteCase','beneficialEffect']
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    exportReport(){
        this.$refs.reportTemplate.open(this.projectId)
    },
    //删除对比记录
    remove(row){
        var ids=[row.id]

          this.$confirm('确认删除该数据吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.$api.removeNoveltyCompareRecord(ids).then(response => {
                if(response.code == 200){
                    this.$message.success('删除成功')
                    this.getList()
                }
              }).catch(error => {
              })
          })
    },
    getList(){
        var params = {
            projectId :this.projectId
        }
        this.loading = true
        this.$api.queryNoveltyCompareRecord(params).then(response=>{
            if(response.code == 200){
                this.tableData = response.data
                this.getSpanArr(this.tableData)
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            this.loading = false
        })
        
    },
      //获取每个元素所需合并的行数
      getSpanArr(data) {
        var mergeObj = {}
        this.mergeArr.forEach((key, index1) => {
            let count = 0;
            mergeObj[key] = [];
            if(key == 'claimSort'){
                data.forEach((item, index) => {
                    if (index === 0) {
                        mergeObj[key].push(1);
                    } else {
                    if (item[key] === data[index - 1][key] && item.relatedContent === data[index - 1].relatedContent) {
                        mergeObj[key][count] += 1;
                        mergeObj[key].push(0);
                    } else {
                        count = index;
                        mergeObj[key].push(1);
                    }
                    }
                })
            }
            else{
                data.forEach((item, index) => {
                    if (index === 0) {
                        mergeObj[key].push(1);
                    } else {
                    if (item[key] === data[index - 1][key]) {
                        mergeObj[key][count] += 1;
                        mergeObj[key].push(0);
                    } else {
                        count = index;
                        mergeObj[key].push(1);
                    }
                    }
                })
            }
            
        })
        for(var i = 0;i<this.mergeArr1.length;i++){
            mergeObj[this.mergeArr1[i]] = mergeObj.patentNo
        }
        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];
            }
        }
    },

  },
};
</script>
<style lang="scss" scoped>
.head{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>