<template>
    <div>
        <div class="content">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <div class="message">
                <div class="flex-between bond">
                    <div>
                        招标文件：<span @click="download(bidDetail.fileUrl)">{{ bidDetail.fileName }}</span>
                    </div>
                    <div>开标信息：<span @click="changeOpen">开标一览表</span></div>
                </div>
                <div class="flex-item upload">
                    <div>变更信息：</div>
                    <ul class="title flex-item">
                        <li v-for="(item, index) in changeList" :key="index">
                            <router-link :to="{ path: '/purchaser/bid/bidStage/changeList/see', query: { id: item.noticeId } }">{{
                                item.title
                            }}</router-link>
                        </li>
                    </ul>
                </div>
                <!-- 投标文件 -->
                <div>
                    <div>投标文件：</div>
                    <dataTable :table-data="bids" :columns="bidTitle" :is-index="true">
                        <el-table-column slot="operate" label="文件" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div class="flex file">
                                    <div @click="down(scope.row.fileUrl)">{{ scope.row.fileName }}</div>
                                    <div v-for="(file, index) in scope.row.fileList" :key="index" @click="down(file.fileUrl)">
                                        {{ file.fileName }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </dataTable>
                </div>
                <!-- 评审信息 -->
                <div style="margin-top: 100px">
                    <div class="flex-between">
                        <h5>评审信息</h5>
                        <el-button type="primary" size="small" @click="jump">澄清质询查看</el-button>
                    </div>
                    <dataTable :table-data="review" :columns="reviewTitle" :is-index="true">
                        <el-table-column slot="operate" label="资格审查" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.qualification">通过</div>
                                <div v-else>未通过</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="符合性审查" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.conformity">通过</div>
                                <div v-else>未通过</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="手动废标" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.bidRejection">通过</div>
                                <div v-else>未通过</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="结论" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.conclusion">通过</div>
                                <div v-else>未通过</div>
                            </template>
                        </el-table-column>
                    </dataTable>
                </div>
                <!-- 排名信息 -->
                <div>
                    <h5>排名信息</h5>
                    <dataTable :table-data="rank" :columns="rankTitle" :is-pageobj="false" :is-index="true">
                        <el-table-column slot="operate" label="是否中标候选人" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.winPerson">是</div>
                                <div v-if="!scope.row.winPerson">否</div>
                            </template>
                        </el-table-column>
                        <el-table-column slot="operate" label="排名" align="center" fixed="right">
                            <template slot-scope="scope">
                                <div v-if="scope.row.finalScore">{{ scope.$index + 1 }}</div>
                            </template>
                        </el-table-column>
                    </dataTable>
                </div>
                <div class="flex">
                    <div>评标附件：</div>
                    <ul class="upload">
                        <li class="flex" v-for="(item, index) in downloadList" :key="index">
                            <div>{{ item.fileName }}</div>
                            <button @click="down(item.fileUrl)">下载</button>
                        </li>
                    </ul>
                </div>
                <div class="centerButton">
                    <el-button @click="back">返回</el-button>
                </div>
            </div>
            <!-- 开标一览表 -->
            <el-dialog title="开标一览表" :visible.sync="isOpenInfo">
                <dataTable :tableData="tableData" :columns="nopagecolumns" :margin-top="0" :margin-bottom="0"> </dataTable>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="isOpenInfo = false">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    companyRank,
    CompanyEvaluatec,
    bidBookDownload,
    openInfo,
    accessorydownload,
    bidFilelist,
    changeNoticelist
} from '@api/purchaser/bid';
import dataTable from '@components/nopageTable.vue';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
export default {
    components: {
        dataTable,
        dataBreadcrumb
    },
    data() {
        return {
            changeList: [],
            isOpenInfo: false,
            tableData: [],
            nopagecolumns: [
                {
                    label: '投标人名称',
                    prop: 'companyName'
                },
                {
                    label: '投标报价(元)',
                    prop: 'price'
                },
                {
                    label: '是否签名',
                    prop: 'isSign'
                }
            ], //
            bidDetail: '',
            projectId: 2,
            rankTitle: [
                {
                    label: '投标人名称',
                    prop: 'companyName'
                },
                {
                    label: '投标价(元)',
                    prop: 'price'
                },
                {
                    label: '商务评分',
                    prop: 'commercialGrade'
                },
                {
                    label: '技术评分',
                    prop: 'skillGrade'
                },
                {
                    label: '价格评分',
                    prop: 'priceGrade'
                },
                {
                    label: '评标价(元)',
                    prop: 'evaluationPrice'
                },
                {
                    label: '最终得分',
                    prop: 'finalScore'
                },
                {
                    slot: 'operate'
                }
            ],
            rank: [],
            bidTitle: [
                {
                    label: '投标人',
                    prop: 'companyName'
                },
                {
                    slot: 'operate'
                }
            ],
            bids: [
                {
                    name: '上海致远有限公司',
                    files: ['313121.zip', '546465.zip']
                }
            ],
            breads: ['招标管理', '招标项目管理', '工作台'],
            review: [],
            reviewTitle: [
                {
                    label: '投标人名称',
                    prop: 'companyName'
                },
                {
                    slot: 'operate'
                }
            ] // 操作列
        };
    },
    created() {
        this.getcompanyRank();
        this.getCompanyEvaluatec();
        this.getbidBookDownload();
        this.getchangeNoticelist();
        this.getaccessorydownload();
        this.getbidFilelist()
    },
    methods: {
        down(url) {
            window.open(url);
        },
        back() {
            this.$router.go(-1);
        },
        changeOpen() {
            this.isOpenInfo = true;
            this.getopenInfo();
        },
        // 开标一览表
        async getopenInfo() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await openInfo(projectId);
                if (code == 200) {
                    for (let item of data) {
                        if (item.isSign) {
                            item.isSign = '是';
                        } else {
                            item.isSign = '否';
                        }
                    }
                    this.tableData = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        download(url) {
            window.open(url);
        },
        back() {
            this.$router.go(-1);
        },
        jump() {
            this.$router.push('/purchaser/bid/bidEvaluation/review/clear');
        },
        compare(property) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1;
            };
        },
        examine() {
            this.$router.push('/admin/bid/bidingDetail');
        },
        fail() {
            this.$router.push('/purchaser/bid/bidEvaluation/projectManager/fail');
        },
        // 查投标公司评审信息
        async getCompanyEvaluatec() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await CompanyEvaluatec(projectId);
                if (code === 200) {
                    this.review = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        // 查看投标公司排名信息
        async getcompanyRank() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await companyRank(projectId);
                if (code === 200) {
                    this.rank = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        // 查看招标文件
        async getbidBookDownload() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await bidBookDownload(projectId);
                if (code === 200) {
                    this.bidDetail = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        // 查看评标附件
        async getaccessorydownload() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await accessorydownload(projectId);
            if (code === 200) {
                this.downloadList = data;
            }
        },
        // 查看投标文件
        async getbidFilelist() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await bidFilelist(projectId);
            if (code === 200) {
                this.bids = data;
            }
        },
        // 查看变更信息
        async getchangeNoticelist() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await changeNoticelist(projectId);
            if (code === 200) {
                this.changeList = data;
            }
        }
        //
    }
};
</script>

<style scoped>
.bond span {
    cursor: pointer;
}

.file{
    flex-wrap: wrap;
}
.file > div {
    margin-right: 10px;
    color: #113dee;
    cursor: pointer;
}

.message {
    margin-left: 50px;
    margin-bottom: 50px;
}

.message span {
    color: #113dee;
}

.message > div {
    margin-bottom: 15px;
}

.title > li {
    margin-right: 15px;
}

.upload button {
    border: 1px solid #000000;
    background: #fff;
    width: 50px;
    height: 20px;
    margin-left: 10px;
}
h5 {
    font-weight: bold;
    margin-bottom: 20px;
}
.button {
    width: 280px;
    margin: 80px auto 30px;
}
</style>

