<template>
    <div>
        <div class="content">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <changeNav :navs="navs"></changeNav>
            <h1>项目状态:{{ remark }}</h1>
            <div class="flex state">
                <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>
                <!-- <ul class="flex">
                    <li v-for="(item, index) in states" :key="index">
                        <el-button type="primary" @click="jump(item.button, item.uri)">{{ item.button }}</el-button>
                    </li>
                </ul> -->
            </div>
            <div class="centerButton">
                <el-button type="primary" @click="back">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
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 {
            breads: ['投标管理', '我参与的项目 ', '工作台'],
            navs: ['工作台'],
            states: [
                {
                    title: '公告',
                    modulars: [
                        {
                            id: 50,
                            label: '变更公告查看',
                            url: '/supply/bid/joinProject/bidStage/changeList',
                            bright: false
                        },
                        {
                            id: 51,
                            label: '流标公告查看',
                            url: '/supply/bid/joinProject/bidStage/failList',
                            bright: false
                        }
                    ]
                },
                {
                    title: '招标',
                    modulars: [
                        {
                            id: 52,
                            label: '项目信息',
                            url: '/supply/bid/joinProject/bidStage/projectInformation',
                            bright: false
                        },
                        {
                            id: 53,
                            label: '查看询价公告',
                            url: '/supply/bid/joinProject/bidStage/seePrice',
                            bright: false
                        },
                        {
                            id: 54,
                            label: '查看招标公告',
                            url: '/supply/bid/signupOnline/seeAnnouncement',
                            bright: false
                        },
                        {
                            id: 55,
                            label: '招标文件下载',
                            url: '/supply/bid/joinProject/bidStage/fileDownload',
                            bright: false
                        },
                        {
                            id: 56,
                            label: '招标文件澄清管理',
                            url: '/supply/bid/joinProject/bidStage/clearManagement',
                            bright: false
                        }
                    ]
                },
                {
                    title: '投标',
                    modulars: [
                        {
                            id: 68,
                            label: '制作投标文件',
                            url: '/supply/markBid/markBid',
                            bright: false
                        },
                        {
                            id: 57,
                            label: '递交投标文件',
                            url: '/supply/bid/joinProject/bidSubmit/bidSubmit',
                            bright: false
                        }
                    ]
                },
                {
                    title: '开标',
                    modulars: [
                        {
                            id: 58,
                            label: '参与开标',
                            url: '/supply/bid/joinProject/bidOpen/bidOpenhal',
                            bright: false
                        },
                        {
                            id: 59,
                            label: '开标一览表查看',
                            url: '/supply/bid/joinProject/bidEvaluation/hallInformation',
                            bright: false
                        }
                    ]
                },
                {
                    title: '评标',
                    modulars: [
                        {
                            id: 60,
                            label: '评标问题澄清',
                            url: '/supply/bid/joinProject/bidEvaluation/evaluationList',
                            bright: false
                        }
                    ]
                },
                {
                    title: '定标',
                    modulars: [
                        {
                            id: 61,
                            label: '中标候选人公示查看',
                            url: '/supply/bid/joinProject/bidSure/candidateSee',
                            bright: false
                        },
                        {
                            id: 62,
                            label: '中标公告查看',
                            url: '/supply/bid/joinProject/bidSure/noticeSee',
                            bright: false
                        },
                        {
                            id: 63,
                            label: '中标通知书查看',
                            url: '/supply/bid/joinProject/bidSure/bidwinAdvice',
                            bright: false
                        },
                        {
                            id: 64,
                            label: '招标结果通知书查看',
                            url: '/supply/bid/joinProject/bidSure/bidresultAdvice',
                            bright: false
                        },
                        {
                            id: 65,
                            label: '合同管理',
                            url: '/supply/bid/joinProject/bidSure/contractManagement',
                            bright: false
                        }
                    ]
                },
                {
                    title: '费用',
                    modulars: [
                        {
                            id: 66,
                            label: '递交标书费缴纳证明',
                            url: '/supply/bid/joinProject/bidStage/tenderFee',
                            bright: false
                        },
                        {
                            id: 67,
                            label: '递交保证金缴纳证明',
                            url: '/supply/bid/joinProject/bidStage/bond',
                            bright: false
                        }
                    ]
                }
            ],
            remark: ''
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        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;
        },
        jump(mods) {
            if (mods.bright) {
                this.$router.push(mods.url);
            }
        },
        async getprojectConsole() {
            try {
                let message = {};
                message.projectId = localStorage.getItem('projectId');
                message.type = 2;
                const { data, msg, code } = await projectConsole(message);
                if (code == 200) {
                    for (let item of this.states) {
                        for (let item1 of item.modulars) {
                            for (let item2 of data) {
                                if (item1.id == item2.buttonId) {
                                    item1.bright = true;
                                    if (item2.buttonId == 66 && item2.status == 2) {
                                        item1.url = '/supply/bid/joinProject/bidStage/tenderFee/detail';
                                        item1.label = '查看标书费缴纳';
                                    } else if (item2.buttonId == 67 && item2.status == 2) {
                                        item1.url = '/supply/bid/joinProject/bidStage/bond/detail';
                                        item1.label = '查看保证金缴纳';
                                    } else {
                                        item1.url = this.geturl(item1.url, item2.status);
                                        item1.label = this.getlabel(item1.label, item2.status);
                                    }
                                }
                            }
                        }
                    }
                    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 > li {
    margin-right: 50px;
    cursor: pointer;
}

.flex-left > li {
    font-weight: bold;
    font-size: 20px;
    height: 70px;
    line-height: 70px;
}

.flex-left > li > div {
    margin-right: 50px;
    padding-right: 30px;
    border-right: 1px solid #000;
}

.inside > li > div {
    padding: 0 10px;
    background: #ccc;
    color: #ffff;
    font-size: 14px;
    margin-right: 30px;
    border-radius: 2px;
    line-height: 35px;
    height: 35px;
}
.inside > li > .active {
    background: #ff5203;
}
</style>
