<template>
    <div>
        <div class="content-head">
            <breadCrumb :breads="breads"></breadCrumb>
            <h3>查看询价公告</h3>
            <h5>查看询价公告</h5>
        </div>
        <div class="content">
            <priceDetail>
                <slot>
                    <h3>参与报价供应商情况</h3>
                    <dataTable :table-data="Bidderlist" :columns="offerBiddercolumns" :is-index="true">
                        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="see(scope.row.companyId)">查看报价明细</el-button>
                            </template>
                        </el-table-column>
                    </dataTable>
                </slot>
            </priceDetail>
            <div class="centerButton">
                <el-button type="primary" @click="back">返回</el-button>
            </div>
        </div>
        <el-dialog title="报价明细" :visible.sync="dialogFormVisible">
            <dataTable :table-data="tableData" :columns="columns"></dataTable>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关 闭</el-button>
                <!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { offerBidderlist, offerBidderDetail } from '@api/supply/bid';
import { getTime1 } from '@utils/time';
import priceDetail from '@components/detail/priceDetail.vue';
import dataTable from '@components/nopageTable.vue';
import breadCrumb from '@components/dataBreadcrumb.vue';
import editInquiryAnnouncement from '@components/edit/editInquiryAnnouncement.vue';

export default {
    components: {
        dataTable,
        breadCrumb,
        priceDetail,
        editInquiryAnnouncement
    },
    data() {
        return {
            dialogFormVisible: false,
            tableData: [],
            projectName: '',
            Bidderlist: [],
            detail: '',
            breads: ['招标管理 ', '在线报名', '询价公告'],
            columns: [
                {
                    label: '标的名称',
                    prop: 'bidName'
                },
                {
                    label: '数量',
                    prop: 'quantity'
                },
                {
                    label: '计量单位',
                    prop: 'unit'
                },
                {
                    label: '品牌',
                    prop: 'brand'
                },
                {
                    label: '规格型号',
                    prop: 'specification'
                },
                {
                    label: '标杆价(元)',
                    prop: 'sightPrice'
                },
                {
                    label: '备注',
                    prop: 'remark'
                }
            ],
            offerBiddercolumns: [
                {
                    label: '供应商名称',
                    prop: 'companyName'
                },
                {
                    label: '报价时间',
                    prop: 'updateTime'
                },
                {
                    label: '报价',
                    prop: 'price',
                    sortable: true
                },
                {
                    slot: 'operate'
                }
            ],
            auditStatus: ''
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        // 参与报价的供应商的情况
        async getofferBidderlist() {
            let projectId = localStorage.getItem('projectId');
            const { data } = await offerBidderlist(projectId);
            this.Bidderlist = data;
        },
        async see(id) {
            let message = {};
            message.projectId = localStorage.getItem('projectId');
            message.companyId = id;
            const { data, code } = await offerBidderDetail(message);
            this.dialogFormVisible = true;
            this.tableData = data;
        }
    },
    created() {
        this.getofferBidderlist();
    }
};
</script>

<style scoped>
.form {
    padding: 20px;
    box-sizing: border-box;
}
</style>
