<template>
  <div class="app-container qyzx-details">
		<div class="bottomlist">
			<ul class="bottomlist-content">
				<li class="bottomlist-list"  >
					<p class="list-titel">
						{{info.projectAllName}}
					</p>
					<div  class="list-content" v-if="info.winBidTime">
						<p class="list-content-text" >
							<span>中标时间：</span>
							<span >{{info.winBidTime}}</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="info.sourceUrl" target="_blank">原文链接</a>
            </span>
          </div>
				</li>
			</ul>

		</div>
		<div class="content main3">
			<div class="common-title">信息详情</div>
      <div class="biddetail-title">中标信息</div>
			<div class="main31-box">
				<p>
					<label class="label">中标企业</label>
          <span>
            <router-link v-if="info.companyName"  :to="info.uipId?'/enterprise/' + encodeStr(info.companyId) :'/company/' + encodeStr(info.companyId) " tag="a" class="list-titel-a blue" v-html="info.companyName"></router-link>
            <span v-else>--</span>
          </span>
					<label class="label">中标时间</label>
					<span>{{info.winBidTime||"--"}}</span>
					<label class="label">中标金额</label>
					<span>{{info.winBidAmount||"--"}}</span>
				</p>
				<p>
					<label class="label">项目负责人</label>
					<span>{{info.staffName||"--"}}</span>
					<label class="label">中标地区</label>
					<span>{{info.region||"--"}}</span>
					<label class="label">项目类型</label>
					<span>{{info.projectTypeNew||"--"}}</span>
				</p>
				<p>
					<label class="label">工期（天）</label>
					<span>{{info.period||"--"}}</span>
					<label class="label">下浮率（%）</label>
					<span>{{info.lowerRate||"--"}}</span>
					<label class="label">建设性质</label>
					<span>{{info.projectNature||"--"}}</span>
				</p>
			</div>
      <div class="biddetail-title">招标信息</div>
			<div class="main31-box">
				<p>
					<label class="label">招标单位</label>
          <span class="span1">
            <router-link v-if="info.projectUnit"  :to="info.uipId?'/enterprise/' + encodeStr(info.projectUnitId) :'/company/' + encodeStr(info.projectUnitId) " tag="a" class="list-titel-a blue" v-html="info.projectUnit"></router-link>
            <span v-else>--</span>
          </span>
					<label class="label label1">招标代理机构</label>
          <span class="span1">{{info.agency||"--"}}</span>
				</p>
				
			</div>
      <div class="tip">
        <span>温馨提示：</span>本栏信息全部来自政府建设主管单位，可作为该公司资质电报、招标投标业绩核实、优质工程（奖杯)申请、信用评估等用途使用。
      </div>
		</div>
		<div class="content main3">
			<div class="common-title">信息快照</div>
			
			<div class="main3-box" >
        <img class="tip-img" :src="'https://imgs.jiansheku.com/'+info.snapshootPic" v-if="info.snapshootPic" />
        <div v-else class="no-data">
          <div class="no-data-box" >
            <img :src="noData" alt="暂时没有找到相关数据" />
            <span>暂时没有找到相关数据</span>
          </div>
        </div>
			</div>
		</div>
	
	
	</div>
</template>

<script>
	import "@/assets/styles/public.css";
	import {encodeStr} from "@/assets/js/common.js"
	import {getBiddetail} from '@/api/detail/party-a/biddetail.js';
export default {
  name: 'Biddetail',
  data() {
		return {
			encodeStr,
			id: '',
			info:{},
			showimg:true,
      noData: require("@/assets/images/detail/noData.png")
		}
	},
  created() {
			this.id = this.$route.params.id;
			this.biddetail();
		},
  methods:{
    biddetail(){
      getBiddetail({
					id: this.id
				}).then(res => {
          if(res.code==200){
            this.info = 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;

			.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: 12px;

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

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

				}
				.list-label-zb{
					font-weight: 400;
					color: #5A88F9;
					background: #E7EDFC;
				}
				.list-label-lx{
					font-weight: 400;
					color: #41A1FD;
					background: #E4F3FD;
				}
			}


			.list-content {
				margin-top: 6px;
				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;

					}

				}


			}

			.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;

				}
			}
			.list-content-img{
				position: absolute;
				top: 16px;
				right:40px ;
				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;
			}


		}

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

		.pagination {
			padding: 14px;

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

	.app-container {
		padding: 0;
	}

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

		.common-title {
			margin-bottom: 16px;
		}
    .biddetail-title{
      color: #232323;
      font-size: 14px;
      height: 14px;
      line-height: 14px;
      margin-top: 8px;
    }
    .tip{
      font-size: 12px;
      color: rgba(35, 35, 35, 0.80);
      span{
        color: rgba(35, 35, 35, 0.40);
      }
    }
		.main3 {
			position: relative;
			.main3-box {
				margin-top: 22px;
				min-height: 400px;
				border: 1px solid #D8D8D8;
        img{
          width: 100%;
        }
        .no-data {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          width: 100%;
          height: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ffffff;
          .no-data-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              width: 64px;
              height: 79px;
              margin-bottom: 16px;
            }
          }
        }
			}
      .main31-box {
				margin-top: 16px;
				margin-bottom: 16px;
				border-top: 1px solid #E6E9F0;
				p {
					display: flex;
					align-items: center;
					margin: 0;
					border-left: 1px solid #E6E9F0;
					border-right: 1px solid #E6E9F0;
					border-bottom: 1px solid #E6E9F0;
					background: #F0F3FA;

					.label {
						width: 11.1%;
						height: 100%;
						font-weight: 400;
						line-height: 22px;
						font-size: 12px;
						padding: 9px 12px;
					}
          .label1{
            width: 10%;
          }
					span {
						width: 22.3%;
						color: #000;
						line-height: 22px;
						padding: 9px 12px;
						font-size: 12px;
						background: #fff;
					}
          .span1{
            width: 40%;
          }
					.span-one {
						width: 90%;
					}
					.blue {
						color: #0081FF !important;
						cursor: pointer;
					
					}

				}

			}

		}


	}
</style>