<template>
	<div class="content">
		<breadCrumb :breads="breads"></breadCrumb>
		<priceDetail>
			<slot>
				<div class="notice flex">
					<h4>招标公告</h4>
					<p>只有报价后才能参与投标报名</p>
				</div>
				<div class="centerButton">
					<el-button type="primary" @click="dialogFormVisible = true">我要报价</el-button>
					<el-button type="primary" @click="see">查看报价供应商情况</el-button>
				</div>
			</slot>
		</priceDetail>
		<!-- 报价弹窗 -->
		<el-dialog :visible.sync="dialogFormVisible" title="报价" width="50%">
			<dataTable :table-data="commoditylist" :columns="commoditycolumns">
				<el-table-column slot="operate" label="操作" align="center" fixed="right" width="150">
					<template slot-scope="scope">
						<el-input-number v-model="scope.row.cost" :min="0" :controls="false" :precision="2" style="width:100px" placeholder="请输入"></el-input-number>
					</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>
	</div>
</template>

<script>
	import {
		noticeEnquiry,
		commoditylist,
		offerBidderlist,
		offerPrice
	} 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 {
				offerBidderlist: [],
				offerBidder: 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'
					}
				]
			}
		},
		methods: {
			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
					} else {
						this.$message.error(msg)
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		created() {
			this.getcommoditylist();
		}
	}
</script>

<style scoped>
	
</style>
