<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div class="head">
                <div>
                    <el-button @click="changeShow(1)" type="primary" :plain="!isSelect">对比结果查看</el-button>
                    <el-button @click="changeShow(2)" type="primary" :plain="isSelect" v-if=" $reportPermission(projectId,[0,1])">对比方案选择</el-button>
                </div>
                <div>
                    <el-select placeholder="请选择显示类型" v-model="Type" style="margin-left: 10px;" @change="TypeSelect($event)" >
                        <el-option label="仅显示主权要" value="1"></el-option>
                        <el-option label="全部显示" value="0"></el-option>
                    </el-select>
                </div>
                <div></div>
            </div>
        </el-header>
        <el-main>
            <div class="height_100" v-show="!isSelect">
                <el-container>
                    <el-header class="basic_header">
                        <el-tabs v-model="activeName" style="width:100%">
                            <el-tab-pane v-for="item in menu" :key='item.path' :label="item.label" :name="item.path"></el-tab-pane>
                        </el-tabs>
                    </el-header>
                    <el-main>
                        <component :is='activeName' :loading="loading" :patentNo="patentNo" :reportType="reportType" :projectId="projectId" :tableData="tableData" :tableHeader="tableHeader" :showType="Type" @changeOrder="changeOrder" @updateOrder="updateOrder" @update="getData"></component>
                    </el-main>
                </el-container>
            </div>
            <div class="height_100" v-if="isSelect">
                <chooseContrastPlan :loading="loading" :patentNo="patentNo" :reportType="reportType" :projectId="projectId" :tableData="tableData" :tableHeader="tableHeader" :rightList="rightList" :showType="Type"></chooseContrastPlan>
            </div>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import chooseContrastPlan from './components/chooseContrastPlan.vue'
import contrastRecord from './components/contrastRecord.vue'
import contrastResult from './components/contrastResult.vue'
export default {
  components: {
    chooseContrastPlan,
    contrastRecord,
    contrastResult
  },
  props: {
    projectId:{
        default:0
    },
    reportType:{
        default:''
    },
    patentNo:{
        default:''
    }
  },
  data() {
    return {
        tableHeader:[],
        tableData:[],
        originalData:[],
        Type:'0',
        isSelect:false,
        activeName:'contrastResult',
        menu:[
            {
                label:'对比结果',
                path:'contrastResult'
            },
            {
                label:'对比记录',
                path:'contrastRecord'
            }
        ],
        loading:false,
        rightList:[],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getData()
  },
  methods: {

    async getData(){
        this.loading = true
        const [tableHeader,originalData] = await Promise.allSettled([this.getTableHeader(),this.getList()])
        this.tableHeader = tableHeader.status =='fulfilled'?tableHeader.value:[]
        this.originalData = originalData.status =='fulfilled'?originalData.value:[]
        this.TypeSelect(this.Type)
        this.getRightList()
        this.loading = false
    },
    getTableHeader(){
        var params = {
            projectId:this.projectId
        }
        return this.$api.getComparedLiteratures(params).then(response=>response.data.data)
    },
    //获取对比结果
    getList(){
        var params = {
            projectId:this.projectId
        }
        return this.$api.queryAllCompareRecord(params).then(response=>response.data.data)
    },
    getRightList(){
        var obj = {}
        for(var i = 0;i<this.originalData.length;i++){
            if(!obj[this.originalData[i].rightSort]){
                obj[this.originalData[i].rightSort] = {
                    rightContent: this.originalData[i].rightContent,
                    rightName: this.originalData[i].rightName,
                    rightSort: this.originalData[i].rightSort,
                    rightType:this.originalData[i].rightType,
                }
            }
        }
        this.rightList = Object.values(obj)
    },
    //切换查看结果和选择对比方案
    changeShow(type){
        if(type == 1){
            this.isSelect = false
        }
        else if(type == 2){
            this.isSelect = true
        }
    },
    //切换主权要
    TypeSelect(val){
        this.tableData = []
        if(val == 1){
            this.tableData = this.originalData.filter(item=>{
                return item.rightType == 1
            })
        }else if(val == 0){
            this.tableData = this.originalData
        }
    },
        /**
         * 交换位置
         * @param {*} now 和谁交换，交换后的排序
         * @param {*} old 交换前的
         */
         changeOrder(now,old){
            var nowIndex = this.tableHeader.findIndex(item=>{
                return item.id == now
            })
            var oldIndex = this.tableHeader.findIndex(item=>{
                return item.id == old
            })
            if(nowIndex == -1 || oldIndex == -1){
                return
            }
            var data = [
                {
                    id:now,
                    sysOrder:this.tableHeader[oldIndex].sysOrder
                },
                {
                    id:old,
                    sysOrder:this.tableHeader[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.tableHeader[now].sysOrder
            var data = []
            for(var i = min;i<= max;i++){
                var order = this.tableHeader[i].sysOrder
                var obj = {
                    id:this.tableHeader[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.updateHeader()
                }
            }).catch(error=>{
                this.$message.error('更新排序失败')
            })
        },
        async updateHeader(){
            const [tableHeader] = await Promise.allSettled([this.getTableHeader()])
            this.tableHeader = tableHeader.status =='fulfilled'?tableHeader.value:[]
            this.TypeSelect(this.Type)
        }
  },
};
</script>
<style lang="scss" scoped>
.head{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

</style>