<template>
    <div>
        <h1>{{ detail.title }}</h1>
        <div class="flex-center" v-if="state">
            <h6 style="margin-right: 60px; margin-top: 30px" v-if="detail.area">询价所在地:{{ detail.area }}</h6>
            <h6 style="margin-buttom: 60px; margin-top: 30px">日期:{{ detail.createTime }}</h6>
        </div>
        <div class="form" v-if="state">
            <h3 style="margin-buttom: 30px">基本信息</h3>
            <table border="0" width="100%" height="120px">
                <tr>
                    <td>询价单编号</td>
                    <td>{{ detail.inquiryCode }}</td>
                    <td>采购目录</td>
                    <td>{{ detail.purchaseCategory }}</td>
                    <td>项目优先级</td>
                    <td>{{ detail.priority == 0 ? '普通' : '紧急' }}</td>
                </tr>
                <tr>
                    <td>报价开始时间</td>
                    <td>{{ detail.startTime }}</td>
                    <td>报价截止时间</td>
                    <td>{{ detail.endTime }}</td>
                    <td>采购单位</td>
                    <td>{{ detail.purchaseAgent }}</td>
                </tr>
                <tr>
                    <td>采购单位联系人</td>
                    <td>{{ detail.contact }}</td>
                    <td>联系方式</td>
                    <td>{{ detail.contactPhone }}</td>
                    <td>传真号码</td>
                    <td>{{ detail.facsimile }}</td>
                </tr>
            </table>
            <div class="appendix">
                <div>预算金额(元)</div>
                <div>{{ detail.budget }}</div>
            </div>
            <h3>供应商要求</h3>
            <div class="appendix">
                <div>供应商规模要求</div>
                <div>{{ detail.supplierScale }}</div>
            </div>
            <div class="appendix">
                <div>供应商资格要求</div>
                <div>{{ detail.supplierQualification }}</div>
            </div>
            <div class="appendix">
                <div>供应商区域范围要求</div>
                <div>{{ detail.supplierRegion }}</div>
            </div>
            <h3>询价商品清单</h3>
            <dataTable :table-data="detail.commodityVOList" :columns="columns"></dataTable>
            <div class="appendix list pos">
                <div>附件</div>
                <ul v-if="detail.accessoryPOList !== undefined && detail.accessoryPOList.length > 0" class="filelist">
                    <li v-for="(item, index) in detail.accessoryPOList" :key="index">
                        <div @click="open(item.accessoryUrl)" class="link">{{ item.fileName }}</div>
                    </li>
                </ul>
                <div v-else>无附件</div>
            </div>
            <h3>商务要求</h3>
            <div class="appendix bus-require pos">
                <div class="flex-center">
                    <p>商务要求</p>
                </div>
                <div v-html="detail.commercialRequirements"></div>
            </div>
            <slot></slot>
        </div>
        <div v-if="!state" class="no-notice">
            <div>{{ msg }}</div>
        </div>
    </div>
</template>

<script>
import { getTime1 } from '@utils/time';
import { enquiryProjectId } from '@api/common/list';
import dataTable from '@components/nopageTable.vue';
export default {
    components: {
        dataTable
    },
    data() {
        return {
            msg: '',
            state: true,
            tableData: [],
            projectName: '',
            detail: '',
            breads: ['投标管理 ', '在线报名', '询价公告'],
            columns: [
                {
                    label: '标的名称',
                    prop: 'bidName'
                },
                {
                    label: '数量',
                    prop: 'quantity'
                },
                {
                    label: '计量单位',
                    prop: 'unit'
                },
                {
                    label: '品牌',
                    prop: 'brand'
                },
                {
                    label: '规格型号',
                    prop: 'specification'
                },
                {
                    label: '标杆价(元)',
                    prop: 'price'
                },
                {
                    label: '备注',
                    prop: 'remark'
                }
            ]
        };
    },
    methods: {
        open(url) {
            window.open(url);
        },
        back() {
            this.$router.go(-1);
        },
        // 获取详情
        async getenquiryProjectId() {
            let projectId = localStorage.getItem('projectId');
            const { data, code, msg } = await enquiryProjectId(projectId);
            if (code == 200) {
                data.endTime = getTime1(data.endTime);
                data.startTime = getTime1(data.startTime);
                data.createTime = data.createTime.substring(0, 10);
                this.detail = data;
            } else if (code == 500) {
                this.state = false;
                this.msg = msg;
            }
        }
    },
    created() {
        this.projectName = localStorage.getItem('projectName');
        this.getenquiryProjectId();
    }
};
</script>

<style scoped>
.no-notice {
    margin-top: 30px;
    text-align: center;
    margin-bottom: 30px;
}
.filelist {
    box-sizing: border-box;
    padding: 20px;
}
.home {
    padding: 30px;
    background: #fff;
    box-sizing: border-box;
    /* margin-left:20px; */
}
.Tips {
    color: #409eff;
}

.notice > h4 {
    font-size: 16px;
    font-weight: bold;
    margin-right: 30px;
}

.notice {
    margin: 20px 0;
    border-bottom: 1px solid #ccc;
}

h2 {
    /* margin-top:; */
    margin-bottom: 10px;
}

h6 {
    margin-bottom: 10px;
}

h1 {
    display: flex;
    justify-content: center;
}

.form {
    padding: 20px;
    box-sizing: border-box;
}

.form h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* table>tr{
	  text-align: center;
	} */

table {
    border-collapse: collapse;
}

table > tr > td {
    font-size: 16px;
    border: 1px solid #ccc;
    padding-left: 10px;
}

table > tr > td:nth-child(odd) {
    background: #f0f0f0;
    width: 160px;
}

.right-s {
    padding-right: 200px;
}

.appendix {
    display: flex;
    border: 1px solid #ccc;
}

.appendix > div:first-child {
    width: 172px;

    border-right: 1px solid #ccc;
    box-sizing: border-box;
    padding-left: 10px;
}

.appendix > div:last-child {
    padding-left: 10px;
}

.appendix > div:nth-child(odd) {
    background: #f0f0f0;
}

.appendix > div {
    font-size: 16px;
    line-height: 40px;
}

.list > :first-child {
    height: 120px;
    line-height: 120px;
}

.list {
    margin-top: 20px;
}

.bus-require > div:first-child {
    width: 400px;
}

.bus-require > div:last-child {
    font-size: 10px;
}

.pos > div:first-child {
    display: flex;
    justify-content: center;
}

.last-pos {
    margin-left: 40px;
    margin-top: 20px;
}

.last-pos > div:first-child {
    width: 65px;
}

input {
    width: 100%;
    height: 70px;
}

.home > h1 {
    font-weight: bold;
}
</style>
