<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div class="head">
                <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" v-if="reportType != 7">Excel导入</el-dropdown-item>
                        <el-dropdown-item command="5" v-if="reportType != 7">检索导入</el-dropdown-item>
                        <el-dropdown-item command="2">上传非专利文件</el-dropdown-item>
                        <el-dropdown-item command="3" v-if="reportType == 7">批量手动添加</el-dropdown-item>
                        
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            
        </el-header>
        <el-main v-DivHeight="getDivHeight">
            <el-progress style="margin-bottom:10px;" v-if="showPercentage" :text-inside="true" :stroke-width="20" :percentage="percentage>100?100:percentage" :color="customColors"></el-progress>
            <el-table :data="tableData" border :maxHeight="tableHeight - 35" style="width: 100%">
                <el-table-column prop="sysOrder" label="序号" width="80" align="center">
                    <template slot-scope="scope">
                        <div>
                            <span>D{{ scope.row.sysOrder }}</span>
                            <span>
                                <my-draggable :list="tableData" :check="scope.row.id" @change="changeOrder" @update="updateOrder"></my-draggable>
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="专利号/标题" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="checkDetails(scope)">
                            {{scope.row.name}}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="authorName" label="权利人/作者" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.authorName}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="publicNo" label="公开号" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.publicNo}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="publicDate" label="公开日" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.publicDate}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="appDate" label="申请日" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.appDate}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="文献类型" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.type==1?'非专利文献':'专利文献'}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="fitType" label="是否适格" align="center" v-if="reportType == 7">
                    <template slot-scope="scope">
                        <div>
                            {{fitType[scope.row.fitType]}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="备注" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.description}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <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>

    <edit-Evidence ref="editEvidence" :projectId="projectId" @save="getList"></edit-Evidence>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import editEvidence from '../dialog/editEvidence.vue';
import { getTableHeight } from '@/views/components/mixins'
import myDraggable from '../draggable'
export default {
  components: {
    editEvidence,
    myDraggable
  },
  mixins:[getTableHeight],
  props: {
    projectId:{
        default:0
    },
    reportType:{
        default:0
    },
    patentNo:{
        default:''
    }
  },
  data() {
    return {
        tableData:[],
        queryParams:{
            projectId:this.projectId,
        },
        fitType:{
            0:'不适格',
            1:'抵触申请',
            2:'现有技术'
        },
        percentage:0,
        customColors: [
            {color: '#f56c6c', percentage: 20},
            {color: '#e6a23c', percentage: 40},
            {color: '#5cb87a', percentage: 60},
            {color: '#1989fa', percentage: 80},
            {color: '#6f7ad3', percentage: 100}
        ],
        showPercentage:false
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['webSocket', 'userinfo']),
  },
  created() {},
  mounted() {
    this.initTask()
    this.getList()
  },
  methods: {
    initTask() {
          this.webSocket.onmessage = (e) => {
            if(e.data.indexOf('{') == -1){
                return false
            }
            const { code, data, message } = JSON.parse(e.data)

            if(code === 600){
                if(data.doneType == -1){
                    
                }
            }
          }
        },
    //查看详情
    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: {
                projectId: this.projectId,
                reportType: this.reportType,
                evidenceType:row.type,
                evidence:JSON.stringify(row),
                signPatentNo:this.patentNo
            }
            }
        )
    },
    //获取证据文献
    getList(){
        this.$api.queryCompareLiterature(this.queryParams).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data.sort((a,b)=>{
                    return a.sysOrder - b.sysOrder
                })
            }
        }).catch(error=>{
            this.tableData = []
        })
    },
    //上传证据文献
    andClick(option){
        switch(option){
            case '1'://专利号导入
                this.patentImport(2)
                break;
            case '4'://Excel导入
                this.patentImport(1)
                break;
            case '5'://检索导入
                this.patentImport(4)
                break;
            case '2'://非专利文献导入
                this.addLiterature({type:1})
                break;
            case '3'://批量手动添加
                this.manualImport()
                break;
        }
    },
    //专利导入
    patentImport(type){
      var form = {
        importToId:this.projectId,
        importToType:1,
        type:type,
      }
      if(type == 4){
        form.reportType = this.reportType
      }
      this.$commonJS.toImportParent(form,type)
    },
    //非专利文献导入
    addLiterature(data){
        var form = data
        this.$refs.editEvidence.open(form)
    },
    //批量手动添加证据文献
    manualImport(){
        this.$router.push(
            {
                path:'/manualImport',
                query:{
                    projectId:this.projectId
                }
            }
        )
    },
    //删除
    remove(scope){
        var row = scope.row
        var index = scope.$index
        var ids=[row.id]
        this.$confirm('确认删除本条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$api.deleteCompareLiterature(ids).then(response=>{
                if(response.code == 200){
                    this.$message('删除成功')
                    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)
    },
    //编辑
    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
                }
            }else{
                if(i == min){
                    obj.sysOrder = currentOrder
                }else{
                    obj.sysOrder = Number(order)-1
                }
            }
            data.push(obj)
        }
        this.updateLiteratureOrder(data)
    },
    //更新排序
    updateLiteratureOrder(dtoList){
        this.$api.updateLiteratureOrder(dtoList).then(response=>{
            if(response.code == 200){
                this.$message.success('更新排序成功')
                this.getList()
            }
        }).catch(error=>{
            this.$message.error('更新排序失败')
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.head{
    width:100%;
    display: flex;
    flex-direction: row-reverse;
}
</style>