<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.accessoryVOList" class="filelist">
					<li v-for="(item,index) in detail.accessoryVOList" :key="index">
						<a :href="item.accessoryUrl">{{item.fileName}}</a>
					</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>
	</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 {
				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: {
			back() {
				this.$router.go(-1)
			},
			// 获取详情
			async getenquiryProjectId() {
				let projectId = localStorage.getItem("projectId")
				const {
					data,
					code
				} = 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
				}
			},
		},
		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>
