<template>
    <div>
        <div class="content">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <changeNav :navs="navs"></changeNav>
            <div class="flex-between" style="width:89%">
               <h1>项目状态:{{ remark }}</h1>
               <div class="view flex">
                 <div  v-for="(item,index) in views" :key="index" :class="viewIdx==index?'active':''" @click="viewChange(index)">
                    {{item}}
                 </div>
               </div>
            </div>
            <div class="flex state" v-show="viewIdx==1">
                <ul class="flex-left">
                    <li v-for="(item, index) in states" :key="index" class="flex">
                        <div>{{ item.title }}</div>
                        <ul class="inside flex">
                            <li v-for="(mods, index) in item.modulars" :key="index" class="flex-center">
                                <div :class="mods.bright ? 'active' : ''" @click="jump(mods)">{{ mods.label }}</div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div class="flex state" v-show="viewIdx==0">
                <ul class="flex-left flex">
                    <img src="@static/images/arrow.png" alt="" class="arrow abs1">
                    <img src="@static/images/arrow.png" alt="" class="arrow abs2">
                    <img src="@static/images/arrow.png" alt="" class="arrow abs3">
                    <img src="@static/images/arrow.png" alt="" class="arrow abs4">
                    <img src="@static/images/arrow.png" alt="" class="arrow abs5">
                    <img src="@static/images/arrow.png" alt="" class="arrow abs6">
                    <img src="@static/images/arrow.png" alt="" class="arrow abs7">
                    <li v-for="(item, index) in states1" :key="index" class="card" style="margin-bottom：50px">
                        <div class="card-title">{{ item.title }}</div>
                        <ul class="inside flex-between card-item">
                            <li v-for="(mods, index) in item.modulars" :key="index" class="flex-center">
                                <div :class="mods.bright ? 'active' : ''" @click="jump(mods)">{{ mods.label }}</div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="centerButton">
                <el-button type="primary" @click="back">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { projectEnd } from '@api/common/list';
import { projectConsole } from '@api/purchaser/bid';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import changeNav from '@components/changeNav.vue';
export default {
    components: {
        dataBreadcrumb,
        changeNav
    },
    data() {
        return {
            viewIdx:0,
            states1:[],
            states: [
                {
                    title: '公告',
                    modulars: [
                        {
                            id: 1,
                            label: '变更公告管理',
                            url: '/purchaser/bid/bidStage/changeList',
                            bright: false
                        },
                        {
                            id: 2,
                            label: '流标公告管理',
                            url: '/purchaser/bid/bidStage/failList',
                            bright: false
                        }
                    ]
                },
                {
                    title: '招标',
                    modulars: [
                        {
                            id: 3,
                            label: '项目信息',
                            url: '/purchaser/bid/seeProject',
                            bright: false
                        },
                        {
                            id: 4,
                            label: '发布询价公告',
                            url: '/purchaser/bid/reviewed/inquiryAnnouncement',
                            bright: false
                        },
                        {
                            id: 5,
                            label: '发布招标公告',
                            url: '/purchaser/bid/reviewed/tenderAnnouncement',
                            bright: false
                        },
                        /* {
                            id: 6,
                            label: '投标邀请书',
                            url: '1',
                            bright: false
                        }, */
                        {
                            id: 7,
                            label: '招标文件澄清管理',
                            url: '/purchaser/bid/bidStage/clearManagement',
                            bright: false
                        }
                    ]
                },
                {
                    title: '投标',
                    modulars: [
                        {
                            id: 8,
                            label: '投标信息查看',
                            url: '/purchaser/bid/bidStage/tenderInformationlist',
                            bright: false
                        }
                    ]
                },
                {
                    title: '开标',
                    modulars: [
                        {
                            id: 9,
                            label: '开标设置',
                            url: '/purchaser/bid/bidStage/bidSet',
                            bright: false
                        },
                        {
                            id: 10,
                            label: '开标大厅',
                            url: '/purchaser/bid/bidOpen/bidOpenhal',
                            bright: false
                        },
                        {
                            id: 11,
                            label: '开标过程纪录查看',
                            url: '/purchaser/bid/bidEvaluation/hallInformation',
                            bright: false
                        }
                    ]
                },
                {
                    title: '评标',
                    modulars: [
                        {
                            id: 12,
                            label: '评标管理',
                            url: '/purchaser/bid/bidEvaluation/projectManager/content',
                            bright: false
                        },
                        {
                            id: 13,
                            label: '开始评标',
                            url: '/purchaser/bid/bidEvaluation/review/review',
                            bright: false
                        }
                    ]
                },
                {
                    title: '定标',
                    modulars: [
                        {
                            id: 14,
                            label: '发布中标候选人公示',
                            url: '/purchaser/bid/bidSure/publicity',
                            bright: false
                        },
                        {
                            id: 15,
                            label: '确认中标人',
                            url: '/purchaser/bid/bidSure/determine',
                            bright: false
                        },
                        {
                            id: 16,
                            label: '发布中标公告',
                            url: '/purchaser/bid/bidSure/notice',
                            bright: false
                        },
                        {
                            id: 17,
                            label: '查看中标通知书',
                            url: '/purchaser/bid/bidSure/winBid/list',
                            bright: false
                        },
                        {
                            id: 18,
                            label: '发布招标结果通知书',
                            url: '/purchaser/bid/bidSure/bidResult/list',
                            bright: false
                        }
                        // {
                        //     id: 19,
                        //     label: '合同管理',
                        //     url: '/purchaser/bid/bidSure/contract',
                        //     bright: false
                        // }
                    ]
                },
                {
                    title: '费用',
                    modulars: [
                        {
                            id: 20,
                            label: '标书费缴纳管理',
                            url: '/purchaser/bid/bidStage/tenderFeelist',
                            bright: false
                        },
                        {
                            id: 21,
                            label: '保证金缴纳管理',
                            url: '/purchaser/bid/bidStage/bondList',
                            bright: false
                        }
                    ]
                },
                {
                    title: '功能',
                    modulars: [
                        {
                            id: 22,
                            label: '项目终止',
                            url: '1',
                            bright: false
                        }
                    ]
                }
            ],
            breads: ['招标管理', '招标项目管理 ', '工作台'],
            navs: ['工作台'],
            remark: '',
            buttonList: [],
            views:["卡片试图","列表试图"]
        };
    },
    methods: {
        viewChange(index){
          this.viewIdx=index
        },
        geturl(url, status) {
            let newUrl = '';
            if (status == 0) {
                newUrl = url;
            } else if (status == 1) {
                newUrl = `${url}?type=1`; //编辑
            } else {
                newUrl = `${url}?type=2`; //查看
            }
            return newUrl;
        },
        getlabel(label, status) {
            let newlabel = '';
            if (status == 0) {
                newlabel = label;
            } else if (status == 1) {
                newlabel = label;
                newlabel = label.replace('发布', '编辑');
            } else {
                newlabel = label.replace('发布', '查看');
            }
            return newlabel;
        },
        back() {
            this.$router.go(-1);
        },
        jump(mods) {
            if (mods.bright) {
                if (mods.label == '项目终止') {
                    this.$confirm('确定要终止吗？', '提示', {
                        type: 'warning'
                    })
                        .then(async () => {
                            let projectId = localStorage.getItem('projectId');
                            const { msg, code } = await projectEnd(projectId);
                            if (code == 200) {
                                this.$message({
                                    message: msg,
                                    type: 'success',
                                    duration: 1500
                                });
                                setTimeout(() => {
                                    this.$router.go(-1);
                                }, 1500);
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                } else {
                    this.$router.push(mods.url);
                }
            }
        },
        async getprojectConsole() {
            try {
                let message = {};
                message.projectId = localStorage.getItem('projectId');
                message.type = 1;
                const { data, msg, code } = await projectConsole(message);
                if (code == 200) {
                    let states = this.states;
                    for (let item of states) {
                        for (let item1 of item.modulars) {
                            for (let item2 of data) {
                                if (item1.id == item2.buttonId) {
                                    item1.bright = true;
                                    if (item2.buttonId == 4 && item2.status == 2) {
                                        item1.url = '/purchaser/bid/reviewed/SeeinquiryAnnouncement';
                                        item1.label = '查看询价公告';
                                    } else if (item2.buttonId == 5 && item2.status == 2) {
                                        item1.url = '/purchaser/bid/reviewed/SeetenderAnnouncement';
                                        item1.label = '查看招标公告';
                                    } else if (item2.buttonId == 9 && item2.status == 2) {
                                        item1.url = '/purchaser/bid/bidStage/seeBidSet';
                                        item1.label = '开标设置查看';
                                    } else if (item2.buttonId == 3 && item2.status == 1) {
                                        item1.url = '/purchaser/bid/editProject';
                                        item1.label = '编辑项目信息';
                                    } else if (item2.buttonId == 12 && item2.status == 2) {
                                        item1.url = '/purchaser/bid/bidSure/see';
                                        item1.label = '查看评标';
                                    } else if (item2.buttonId == 15 && item2.status == 2) {
                                        item1.url = '/purchaser/bid/bidSure/determine?type=2';
                                        item1.label = '查看中标人';
                                    } else {
                                        item1.url = this.geturl(item1.url, item2.status);
                                        item1.label = this.getlabel(item1.label, item2.status);
                                    }
                                }
                            }
                        }
                    }
                    this.states = states;
                     [ states[3],  states[5]] = [ states[5],  states[3]];
                     this.states1=states
                    this.remark = data[0].remark;
                } else {
                    this.$message.error(msg);
                }
            } catch (e) {
                console.log(e);
            }
        }
    },
    created() {
        this.getprojectConsole();
    }
};
</script>

<style scoped>
.state {
    margin-top: 30px;
    margin-left: 50px;
}

.state > ul {
    flex-wrap: wrap;
}
.state > ul > .card {
    width: 25%;
    height: 240px;
    box-sizing: border-box;
    padding:0 30px;
    margin-bottom:100px;
    margin-right: 7%;
}
.state > ul > li {
    margin-right: 50px;
    border: 1px solid #dadada;
}
.flex-left{
    position: relative;
}
.flex-left > li {
    font-weight: bold;
    font-size: 20px;
    height: 70px;
    line-height: 70px;
}

.flex-left > li > div {
    margin-right: 30px;
    padding: 0 30px;
    border-right: 1px solid #dadada;
}
.flex-left > li > .ca0rd-title {
   text-align: center;
   border-right: none;
}

.inside > li > div {
    padding: 0 10px;
    background: #ccc;
    color: #ffff;
    font-size: 14px;
    margin-right: 30px;
    border-radius: 2px;
    line-height: 35px;
    height: 35px;
    cursor: pointer;
}
.inside > li > .active {
    background: #ff5203;
}
.flex-left > li>.card-title{
    text-align: center;
    border-right: none;
}
.card-item{
    flex-wrap: wrap;
}
.card-item>li{
    margin-bottom: 15px;
}
.card-item>li>div{
    margin-right:0
}
.arrow{
    width:60px;
    height:60px;
}
.abs1 {
    position: absolute;
    top: 90px;
    left: 26.5%
}
.abs2 {
    position: absolute;
    top: 100px;
    left: 58.5%
}
.abs3 {
    position: absolute;
    top: 260px;
    left: 74%;
    transform: rotate(90deg);
}
.abs4 {
    position: absolute;
    top: 430px;
    left: 26.5%;
    transform: rotate(180deg);
}
.abs5 {
    position: absolute;
    top: 430px;
   left:58.5%;
    transform: rotate(180deg);
}
.abs6 {
    position: absolute;
    top: 600px;
    left: 10.5%;
    transform: rotate(90deg);
}
.abs7 {
    position: absolute;
    top: 770px;
    left: 26.5%;
}
.view>div{
    width:100px;
    height:40px;
    border:1px solid #000;
    line-height: 40px;
    font-size:16px;
    text-align: center;

}
.view>.active{
    background: #ccc;
}

/* 切换 */

</style>
