<template>
	<div class="app-container qyzx-details">
		<div class="bottomlist">
			<ul class="bottomlist-content">
				<li class="bottomlist-list">
					<p class="list-titel">
						{{textList.projectName}}
					</p>

					
					<div class="list-content">
						<p class="list-content-text">
							<span>发布日期：</span>
							<span>{{textList.pubdate||'--'}}</span>
						</p>
						<p class="list-content-text">
							<span>开标时间：</span>
							<span class='text-red'>{{textList.endTimeDate||'--'}}</span>
						</p>
					</div>
					<div class="list-content-img"  @mouseenter="showimg=false" @mouseleave="showimg=true">
						<img v-if="showimg" src="@/assets/images/bxpro/original1.png">
						<img v-else src="@/assets/images/bxpro/original.png">
						<span>
							<a :href="textList.url">原文链接</a>
						</span>
					</div>

				</li>
			</ul>

		</div>
		<div class="content main3 main4">
			<div class="common-title  common-title1 clearfix">
				<span class="common-title-span">附件下载</span>
				
				<div class="common-title-list">
					<p>
						<img src="@/assets/images/bxpro/pdf.png" alt="">
						<span>竞争对手</span>
					</p>
					<p>
						<img src="@/assets/images/bxpro/pdf.png" alt="">
						<span>项目简析</span>
					</p>
					<p>
						<img src="@/assets/images/bxpro/pdf.png" alt="">
						<span>成本分析</span>
					</p>
					<p>
						<img src="@/assets/images/bxpro/pdf.png" alt="">
						<span>招标文件</span>
					</p>
					
				</div>
			</div>
		</div>

		<div class="content main3">
			<div class="common-title">基本信息</div>
			<div class="main3-box">
				<p>
					<label class="label">工程类型</label>
					<span>{{textList.projectType||'--'}}</span>
					<label class="label">工程类别</label>
					<span>{{textList.projectPurposes||'--'}}</span>
				</p>
				<p>
					<label class="label">项目投资额(万元)</label>
					<span >{{textList.projectInvestmentAmount||'--'}}</span>
					<label class="label">招标控制价/合同 估算价(万元)</label>
					<span>{{textList.projectContractAmount||'--'}}</span>

				</p>
				<p>
					<label class="label">建安费暂估(万元)</label>
					<span >{{textList.projectSafeAmount||'--'}}</span>
					<label class="label">勘察费暂估(万元)</label>
					<span>{{textList.projectSurveyAmount||'--'}}</span>
				
				</p>
				
				<p>
					<label class="label">设计费暂估(万元)</label>
					<span>{{textList.projectDesignAmount||'--'}}</span>
					<label class="label">投标保证金(万元)</label>
					<span>{{textList.projectEnsureAmount||'--'}}</span>
				</p>
				<p>
					<label class="label">计划工期</label>
					<span>{{textList.projectDuration||'--'}}</span>
					<label class="label">项目属地</label>
					<span>
					       {{textList.province}}
							<template v-if="textList.city">
								 -{{textList.city}}
							</template>
							<template v-if="textList.area">
								  -{{textList.area}}
							</template>
					</span>
				</p>
				<p>
					<label class="label">发布时间</label>
					<span>{{textList.pubdate||'--'}}</span>
					<label class="label">开标时间</label>
					<span class="color1">{{textList.endTimeDate||'--'}}</span>
				</p>
				<p>
					<label class="label">评标办法</label>
					<span>{{textList.bidAssessmentWay||'--'}}</span>
					<label class="label">项目级别</label>
					<span>{{textList.projectLevel||'--'}}</span>
				</p>
				
				<p>
					<label class="label">建设规模</label>
					<span class="span-one">{{textList.bulidRange||'--'}}</span>
				</p>
				<p>
					<label class="label">招标范围</label>
					<span class="span-one">{{textList.bidRange||'--'}}</span>
				</p>
				
				<p>
					<label class="label">保证金缴纳方式</label>
					<span>{{textList.projectEnsureAmountPayType||'--'}}</span>
					<label class="label">开标地点</label>
					<span>{{textList.projectOpenAddr||'--'}}</span>
				</p>
				<p>
					<label class="label">建设地点</label>
					<span>{{textList.projectAddr||'--'}}</span>
					<label class="label">资金来源</label>
					<span>{{textList.capitalSource||'--'}}</span>
				</p>
				
				<p>
					<label class="label">评标委员会</label>
					<span class="span-one">
						<template v-if="textList.bidMettingHasProjectUnit=0">未知</template>
						<template v-else-if="textList.bidMettingHasProjectUnit=1">无</template>
						<template v-else-if="textList.bidMettingHasProjectUnit=2">有</template>
					     <template v-else>--</template>
					</span>
				
				</p>
				<p>
					<label class="label">履约保证金 (形式 及金额)</label>
					<span class="span-one">{{textList.prformanceWayAndMoney||'--'}}</span>
				</p>
			</div>
		</div>
		<div class="content main3">
			<div class="common-title">投标要求</div>
			<div class="main3-box">
				<p>
					<label class="label">资质要求</label>
					<span class="span-one">{{textList.qualiLimit||'--'}}</span>
				</p>
				<p>
					<label class="label">业绩要求</label>
					<span  class="span-one">{{textList.projectLimit||'--'}}</span>
				</p>
				<p>
					<label class="label">项目负责人要求</label>
					<span  class="span-one">{{textList.personLimit||'--'}}</span>
				</p>
			</div>
		</div>
		<div class="content main3">
			<div class="common-title">相关企业</div>
			<div class="main3-box">
				<p>
					<label class="label">招标人</label>
					<span class="color2">{{textList.tenderee||'--'}}</span>
					<label class="label">代理机构</label>
					<span class="color2">{{textList.agency||'--'}}</span>
				</p>
				<p>
					<label class="label">招标人联系方式</label>
					<span>{{textList.tendereeTel||'--'}}</span>
					<label class="label">招标人联系地址</label>
					<span>{{textList.tendereeAddress||'--'}}</span>
				</p>
				<p>
					<label class="label">代理机构联系方式</label>
					<span>{{textList.agencyTel||'--'}}</span>
					<label class="label">代理机构联系地址</label>
					<span>{{textList.agencyAddress||'--'}}</span>
				</p>
				
			</div>
		</div>

	</div>
</template>

<script>
	import "@/assets/styles/public.css";
	import api from '@/api/radar/radar.js';
	export default {

		name: 'bxprozbggDetails',
		data() {
			return {
				id: '',
				textList: {},
				showimg:true,
			}
		},
		created() {
			console.log(this.$route.params)
			this.id = this.$route.params.id;
			this.bidNoticeProDetail();
		},
		methods: {
			bidNoticeProDetail() {
				api.bidNoticeProDetail({
					id: this.id
				}).then(res => {
					// console.log(res);
					this.textList = res.data;
				}).catch(error => {
					
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.bottomlist {
		width: 100%;
		background-color: #FFFFFF;

		border-radius: 4px 4px 4px 4px;

		.bottomlist-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12px;
			padding: 16px;
			border-bottom: 1px solid #EFEFEF;

			.title-right {
				display: flex;
				align-items: center;

				p:first-child {
					font-size: 12px;
					font-weight: 400;
					color: #3D3D3D;
					margin-right: 10px;
				}

				p:last-child {
					display: flex;
					align-items: center;
					font-size: 14px;
					font-weight: 400;
					color: rgba(35, 35, 35, 0.8);
				}

				img {
					width: 18px;
					height: 18px;
				}
			}

		}

		.bottomlist-content {

			padding-bottom: 0px;
		}

		.bottomlist-list {
			padding: 16px;
			font-size: 14px;
			border-bottom: 1px solid #EFEFEF;
			padding-bottom: 14px;
			position: relative;

			.list-titel {
				font-size: 16px;
				font-weight: 700;
				color: #3D3D3D;
				line-height: 19px;

				.list-titel-a {
					text-decoration: none;
					color: #3D3D3D;
				}

				a:hover,
				a:visited,
				a:link,
				a:active {
					color: #3D3D3D;
				}
			}

			.content-label {
				margin-top: 7px;

				.list-label {
					background: #F3F3FF;
					color: #8491E8;
					border-radius: 1px 1px 1px 1px;

					padding: 3px 7px;
					font-size: 12px;

				}
			}


			.list-content {
				margin-top: 3px;
				display: flex;
				justify-content: start;
				align-items: center;
				

				.list-content-text {
					margin-top: 7px;
					display: flex;
					justify-content: start;
					align-items: center;
					margin-right: 27px;
					font-size: 14px;

					span:first-child {
						font-weight: 400;
						color: rgba(35, 35, 35, 0.4);
						line-height: 15px
					}

					span:last-child {
						font-weight: 400;
						color: rgba(35, 35, 35, 0.8);
						line-height: 15px
					}

					.blue {
						color: #0081FF !important;
						cursor: pointer;

					}
					.text-red{
						color: #FF3C3C !important;
					}

				}
				

			}
			.list-content-img{
				position: absolute;
				top: 16px;
				right:14px ;
				color: #0081FF;
				display: flex;
				align-items: center;
				font-size: 14px;
				cursor: pointer;
				img{
					width: 14px;
					height: 14px;
					margin-right: 4px;
				}
			}
			.list-content-img:hover{
				color: #0067CC;
			}

			.list-addree {
				width: auto;
				background: #F3F4F5;
				display: inline-flex;
				margin-top: 7px;

				.list-content-text {
					margin-top: 0px;

					span {
						line-height: 30px !important;
					}
				}

				img {
					width: 14px;
					margin: 0 8px;

				}
			}


		}

		// .bottomlist-list:hover {
		// 	background: #F6F9FC;
		// 	cursor: pointer;
		// }

		.pagination {
			padding: 14px;

			.el-pagination {
				float: right;
			}
		}
	}

	.app-container {
		padding: 0;
	}

	.qyzx-details {
		.tab {
			font-size: 12px;
			color: #A1A1A1;

			span {
				color: #232323;
			}
		}

		.content {
			margin-top: 16px;
			background: #FFFFFF;
			padding: 16px;
			border-radius: 4px;
		}

		.common-title {
			margin-bottom: 8px;
			.common-title-span{
				float: left;
				line-height: 15px;
			}
			.common-title-list{
				float: left;
				margin-left: 80px;
				top: 10px;
				display: flex;
				align-items: center;
				
				p{
					display: flex;
					align-items: center;
					font-size: 14px;
					font-weight: 400;
					color: rgba(35,35,35,0.8);
					cursor: pointer;
					margin-right: 30px;
					img{
						width: 14px;
						margin-right: 4px;
					}
				}
				p:hover{
					color: #0081FF;
				}
			}
		}
		.common-title1{
			margin-bottom: 0px;
		}
		

		.main3 {
			.main3-box {
				margin-top: 22px;
				border-top: 1px solid #E6E9F0;

				p {
					display: flex;
					margin: 0;
					border: 1px solid #E6E9F0;
					border-top: none;

					.label {
						width: 10%;
						height: auto;
						font-weight: 400;
						font-size: 12px;
						padding: 12px;
						background: #F0F3FA;
						display: flex;
						align-items: center;
					}

					span {
						display: flex;
						align-items: center;
						width: 40%;
						color: #000;
						padding: 12px;
						font-size: 12px;
					}

					.span-one {
						width: 90%;
					}
					.color1{
						color: #FF3C3C;
					}
					.color2{
						color: #0081FF;
						cursor: pointer;
					}

				}

			}
		}
		.main4{
			background-image: url(../../../assets/images/bxpro/bgfdf.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			border: 2px dashed #888;
		}

	}
</style>