<template>
    <div class="height_100">
      <el-container>
          <el-header v-if="!choose">
                <div class="head">
                    <el-button type="primary" size="small" @click="andClick('5')">
                          专利检索
                    </el-button>
                    <el-dropdown trigger="hover" @command="andClick($event)" :hide-on-click="false" type="primary" size="small">
                      <el-button type="primary" size="small">
                          上传对比文件<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown" class="text-align_center">
                          <el-dropdown-item command="1">专利号导入</el-dropdown-item>
                          <el-dropdown-item command="4">Excel导入</el-dropdown-item>
                          <!-- <el-dropdown-item command="5">检索导入</el-dropdown-item> -->
                      </el-dropdown-menu>
                    </el-dropdown>
                </div>
              
          </el-header>
          <el-main v-DivHeight="getDivHeight">
              <el-table v-loading="loading" :data="tableData" border :maxHeight="tableHeight - 35" style="width: 100%" @cell-dblclick="cellDblclick" @cell-click="cellClick">
                  <el-table-column prop="sysOrder" label="序号" width="80" align="center">
                      <template slot-scope="scope">
                          <div v-if="!choose">
                              <el-link type="primary" @click="checkDetails(scope)">D{{ scope.$index+1 }}</el-link>
                              <span>
                                <my-draggable :list="tableData" :check="scope.row.id" @change="changeOrder" @update="updateOrder">
                                    <template v-slot:default="data">
                                        D{{ data.data.sysOrder }}-{{ data.data.name }}
                                    </template>
                                    
                                </my-draggable>
                            </span>
                          </div>
                          <div v-else>
                            <el-checkbox-group v-model="checkList1">
                                <el-checkbox :label="scope.row.id">D{{ scope.$index+1 }}</el-checkbox>
                            </el-checkbox-group>
                          </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>
                            <div v-if="editedMessage.field && editedMessage.field == item.field && editedMessage.data.id == scope.row.id">
                                <my-RichText :autoFocus="true" :ref="item.field" :value="$commonJS.getColumnData(scope.row,item)" @blur="(value)=>changeMessage(item,scope.row,value)"></my-RichText>
                            </div>
                            <div v-else v-html="$commonJS.getColumnData(scope.row,item)"></div>
                          </div>
                      </template>
                  </el-table-column>

                  <el-table-column label="操作" align="center" v-if="!choose">
                      <template slot-scope="scope">
                          <div>
                              <!-- <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button> -->
                              <el-button @click="remove(scope)" type="text" size="small">删除</el-button>
                          </div>
                      </template>
                  </el-table-column>
              </el-table>
          </el-main>    
      </el-container>
  
    </div>
</template>
  
<script>
  import { mapGetters } from "vuex";
  import { getTableHeight } from '@/views/components/mixins'
  import {tableEdit,updateNoveltyCompareFile} from './mixins'
  import myDraggable from '@/views/report/InvalidResponse/components/draggable/index.vue'

  const column = [
    {
        field:'literatureNo',
        type:'string',
        name:'专利号',
        editable:false,
    },
    {
        field:'name',
        type:'string',
        name:'名称',
        editable:false,
    },
    {
        field:'grantNo',
        useFunction:(data)=>{
            return data.grantNo || data.publicNo || ''
        },
        type:'function',
        name:'公开/公告号',
        editable:false,
    },
    {
        field:'grantDate',
        useFunction:(data)=>{
            return data.grantDate || data.publicDate || ''
        },
        type:'function',
        name:'公开/公告日',
        editable:false,
    },
    {
        field:'appDate',
        type:'string',
        name:'申请日',
        editable:false,
    },
    {
        field:'applicant',
        useFunction:(data)=>{
            if(data.applicant && data.applicant.length>0){
                return data.applicant.map(item=>item.name).join('、')
            }
            return  ''
        },
        type:'function',
        name:'申请人',
        editable:false,
    },
    {
        field:'noveltyCompareRecordVOS',
        useFunction:(data)=>{
            if(data.noveltyCompareRecordVOS && data.noveltyCompareRecordVOS.length>0){
                return data.noveltyCompareRecordVOS[0].markNoteText
            }
            return '';
        },
        type:'function',
        name:'标注',
        editable:true,
    },
    {
        field:'relevance',
        type:'string',
        name:'相关度',
        editable:true,
    },
    {
        field:'ifEffectinv',
        type:'string',
        name:'影响新创新',
        editable:true,
    },
    {
        field:'fileRemark',
        type:'string',
        name:'备注',
        editable:true,
    },
  ]
  export default {
    components: {
        myDraggable
    },
    mixins:[getTableHeight,tableEdit,updateNoveltyCompareFile],
    props: {
      projectId:{
          default:null
      },
      projectName:{
  
      },
      projectType:{
  
      },
      reportType:{
          default:0
      },
      choose:{
        type:Boolean,
        default:false
      },
      checkList:{
        type:Array,
        default:()=>{
            return []
        }
      }
    },
    data() {
      return {
         checkList1:this.checkList,
          tableData:[],
          queryParams:{
              projectId:this.projectId,
          },
          loading:false,
          column:column
      };
    },
    watch: {},
    computed: {
      ...mapGetters(['webSocket', 'userinfo']),
    },
    created() {},
    mounted() {
      this.getList()
    },
    methods: {

      //查看详情
      checkDetails(scope){
          var index = scope.$index
          var row = scope.row
          var search = {
              location: index + 1
          }
          this.$s.setSession('search', search)
          this.$router.push(
              {
              path: '/patentDetails/' + row.literatureNo,
              query: {
                noveltySearch:true,
                projectId:this.projectId
              }
              }
          )
      },
      //获取证据文献
      getList(){
        this.loading = true
          this.$api.queryComparePatent(this.queryParams).then(response=>{
              if(response.code == 200){
                  this.tableData = response.data.data
                  this.loading = false
              }
          }).catch(error=>{
            this.loading = false
          })
      },
      //上传证据文献
      async andClick(option){
          if(!(await this.$permission.projectPermission(this.projectId))){
              this.$showPermissionDialog()
              return false
          }
          switch(option){
              case '1'://专利号导入
                  this.patentImport(2)
                  break;
              case '4'://Excel导入
                  this.patentImport(1)
                  break;
              case '5'://检索导入
                  this.patentImport(4)
                  break;
          }
      },
      //专利导入
      patentImport(type){
        var form = {
          importToId:this.projectId,
          importToType:3,
          type:type,
        }
        var params = {}
        if(type == 4){
          form.reportType = this.reportType
          params = {
            projectId:this.projectId,
            noveltySearch:true
          }
        }
        this.$commonJS.toImportParent(form,type,params)
      },

      //删除
    remove(scope){
        var row = scope.row
        var index = scope.$index
        var ids={
            compareLitertureId:row.id
        }
        this.$confirm('确认删除本条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$api.delCompareFile(ids).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功')
                    this.deleteUpdateOrder(index)
                }
            }).catch(error=>{
                this.$message.error('删除失败')
            })
        })
        
    },
    //删除后更新排序
    deleteUpdateOrder(index){
        var data = []
        for(var i = index+1;i<this.tableData.length;i++){
            var order = this.tableData[i].sysOrder
            data.push(
                {
                    id:this.tableData[i].id,
                    sysOrder:Number(order) - 1
                }
            )
        }
        this.updateLiteratureOrder(data,true)
    },
    //编辑
    edit(row){
        this.addLiterature(row)
    },
    
    /**
     * 交换位置
     * @param {*} now 和谁交换，交换后的排序
     * @param {*} old 交换前的
     */
    changeOrder(now,old){
        var nowIndex = this.tableData.findIndex(item=>{
            return item.id == now
        })
        var oldIndex = this.tableData.findIndex(item=>{
            return item.id == old
        })
        if(nowIndex == -1 || oldIndex == -1){
            return
        }
        // var order = this.tableData[nowIndex].sysOrder
        // this.tableData[nowIndex].sysOrder = this.tableData[oldIndex].sysOrder
        // this.tableData[oldIndex].sysOrder = order
        var data = [
            {
                id:now,
                sysOrder:this.tableData[oldIndex].sysOrder
            },
            {
                id:old,
                sysOrder:this.tableData[nowIndex].sysOrder
            }
        ]
        this.updateLiteratureOrder(data)
    },
    /**
     * 拖动排序
     * @param {*} now 拖动后的位置
     * @param {*} old 拖动前的位置
     */
    updateOrder(now,old){
        if(now == old){
            return
        }
        var min = 0,
        max = 0,
        type=true,
        currentOrder = null
        if(now<old){//上移
            min = now
            max = old
        }else{//下移
            min = old
            max = now
            type = false
        }
        currentOrder = this.tableData[now].sysOrder
        var data = []
        for(var i = min;i<= max;i++){
            // var order = this.tableData[i].sysOrder
            var obj = {
                id:this.tableData[i].id
            }
            if(type){
                if(i == max){
                    obj.sysOrder = currentOrder
                }else{
                   
                    // obj.sysOrder = Number(order)+1
                    obj.sysOrder = this.tableData[i+1].sysOrder
                }
            }else{
                if(i == min){
                    obj.sysOrder = currentOrder
                }else{
                    // obj.sysOrder = Number(order)-1
                    obj.sysOrder = this.tableData[i-1].sysOrder
                }
            }
            data.push(obj)
        }
        this.updateLiteratureOrder(data)
    },
    //更新排序
    async updateLiteratureOrder(dtoList,type){
        if(!(await this.$permission.projectPermission(this.projectId)) && !type){
            this.$showPermissionDialog()
            return false
        }
        this.$api.updateLiteratureOrder(dtoList).then(response=>{
            if(response.code == 200){
                if(!type){
                 this.$message.success('更新排序成功')   
                }
                this.getList()
            }
        }).catch(error=>{
            if(!type){
                this.$message.error('更新排序失败') 
            }
        })
    }
     
    },
  };
  </script>
  <style lang="scss" scoped>
  .head{
      width:100%;
      display: flex;
    //   flex-direction: row-reverse;
    justify-content: flex-end;
  }
  </style>