<template>
    <div class="content">
        <breadCrumb :breads="breads"></breadCrumb>
        <priceDetail @getmsg="getmsg">
            <slot>
                <div class="notice flex">
                    <h4>招标公告</h4>
                    <p>只有报价后才能参与投标报名</p>
                </div>
                <div class="centerButton">
			  <el-button  @click="back">返回</el-button>
                    <el-button type="primary" @click="dialogFormVisible = true" v-if="!isOffer">我要报价</el-button>
                    <el-button type="primary" @click="offerBidder1 = true" v-else>查看报价</el-button>
                    <el-button type="primary" @click="see">查看其它供应商报价</el-button>
                </div>
            </slot>
        </priceDetail>
        <!-- 报价弹窗 -->
        <el-dialog :visible.sync="dialogFormVisible" title="报价" width="1000px">
            <dataTable :table-data="commoditylist" :columns="commoditycolumns">
                <el-table-column slot="operate" label="报价" align="center" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-input
                            v-model="scope.row.cost"
                            :min="0"
                            :controls="false"
                            :precision="2"
                            style="width: 100px;height:100%"
                            placeholder="请输入"
                        ></el-input>
                    </template>
                </el-table-column>
            </dataTable>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitData">提交报价</el-button>
            </div>
        </el-dialog>
        <!-- 报价供应商情况 -->
        <el-dialog :visible.sync="offerBidder" title="查看其它供应商报价">
            <dataTable :table-data="offerBidderlist" :columns="offerBiddercolumns" :is-index="true"> </dataTable>
            <div slot="footer" class="dialog-footer">
                <el-button @click="offerBidder = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="offerBidder1" title="查看报价情况">
            <dataTable :table-data="offerBidderlist1" :columns=" columns" :is-index="true"> </dataTable>
            <div slot="footer" class="dialog-footer">
                <el-button @click="offerBidder1 = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { noticeEnquiry, commoditylist, offerBidderlist, offerPrice, isOffer } from '@api/supply/bid';
import priceDetail from '@components/detail/priceDetail.vue';
import dataTable from '@components/nopageTable.vue';
import breadCrumb from '@components/dataBreadcrumb.vue';
export default {
    components: {
        dataTable,
        breadCrumb,
        priceDetail
    },
    data() {
        return {
            isOffer: '',
            offerBidderlist: [],
            offerBidderlist1: [],
            offerBidder: false,
            offerBidder1: false,
            columns: [],
            tabledata: [],
            dialogFormVisible: false,
            breads: ['投标管理 ', '在线报名', '询价公告'],
            commoditylist: [],
            commoditycolumns: [
                {
                    label: '标的名称',
                    prop: 'bidName'
                },
                {
                    label: '数量',
                    prop: 'quantity'
                },
                {
                    label: '计量单位',
                    prop: 'unit'
                },
                {
                    label: '品牌',
                    prop: 'brand'
                },
                {
                    label: '规格型号',
                    prop: 'specification'
                },
                {
                    label: '标杆价',
                    prop: 'price'
                },
                {
                    label: '备注',
                    prop: 'remark'
                },
                {
                    slot: 'operate'
                }
            ],
            offerBiddercolumns: [
                {
                    label: '供应商名称',
                    prop: 'companyName'
                },
                {
                    label: '报价时间',
                    prop: 'updateTime'
                }
            ],
            columns: [
                {
                    label: '标的名称',
                    prop: 'bidName'
                },
                {
                    label: '数量',
                    prop: 'quantity'
                },
                {
                    label: '计量单位',
                    prop: 'unit'
                },
                {
                    label: '品牌',
                    prop: 'brand'
                },
                {
                    label: '规格型号',
                    prop: 'specification'
                },
                {
                    label: '标杆价(元)',
                    prop: 'sightPrice'
                },
                {
                    label: '备注',
                    prop: 'remark'
		    },
		    {
                    label: '报价',
                    prop: 'offerPrice'
		    },
            ]
        };
    },
    methods: {
	    back(){
            this.$router.go(-1)
	    },
	    getmsg(val){
           console.log(val)
	    },
        see() {
            this.offerBidder = true;
            this.getofferBidderlist();
        },

        Prev() {
            this.$router.push('/supply/Join_items/work_place/all_content');
        },

        // 查看询价公告里的商品报价列表
        async getcommoditylist() {
            let projectId = localStorage.getItem('projectId');
            const { data } = await commoditylist(projectId);
            for (let item of data) {
                item.cost = undefined;
            }
            this.commoditylist = data;
        },
        // 参与报价的供应商的情况
        async getofferBidderlist() {
            let projectId = localStorage.getItem('projectId');
            const { data } = await offerBidderlist(projectId);
            this.offerBidderlist = data;
        },
        //报价
        async submitData() {
            try {
                let message = {};
                message.companyId = localStorage.getItem('companyId');
                message.projectId = localStorage.getItem('projectId');
                let commodityList = this.commoditylist.map((item, index) => {
                    return {
                        id: item.id,
                        cost: item.cost
                    };
                });
                message.commodityList = commodityList;
                const { msg, code } = await offerPrice(message);
                if (code == 200) {
                    this.$message.success(msg);
                    this.dialogFormVisible = false;
                    this.getIsOffer();
                } else {
                    this.$message.error(msg);
                }
            } catch (e) {
                console.log(e);
            }
        },
        // 获取是否报价
        async getIsOffer() {
            let projectId = localStorage.getItem('projectId');
            const { data } = await isOffer(projectId);
            if (!data) {
                this.isOffer = data;
            } else {
                this.offerBidderlist1 = data;
                this.isOffer = true;
            }
        }
    },
    created() {
        this.getcommoditylist();
        this.getIsOffer();
    }
};
</script>

<style scoped>
.el-table::before {
  z-index: inherit;
}

.table-fixed>.el-table__fixed-right {
 height: 100% !important;
}
 

 
</style>
