<template>
	<div class="app-container qyzx-details">
		<div class="bottomlist">
			<ul class="bottomlist-content">
				<li class="bottomlist-list"  >
					<p class="list-titel">
						 {{textList.name}}
					</p>
					<div class="content-label">
						<span class="list-label list-label-zb" v-if="textList.province||textList.city||textList.district">
							{{textList.province}}
							<template v-if="textList.city">
								 -{{textList.city}}
							</template>
							<template v-if="textList.district">
								  -{{textList.district}}
							</template>
							
						</span>
					</div>
					
					<div  class="list-content">
						<p class="list-content-text">
							<span>发布时间：</span>
							<span > {{textList.publishTime||'--'}}</span>
						</p>
						<p class="list-content-text">
							<span>来源网站：</span>
							<span>{{textList.source||'--'}}</span>
						</p>
					
					</div>
					
				</li>
			</ul>

		</div>

	
	
		<div class="content main5">
		  <div class="common-title">参投列表</div>
		  <div class="table-item">
		    <el-table
		      :data="tableData"
		      element-loading-text="Loading"
		      border
		      fit
		      highlight-current-row
		    >
		      <el-table-column  label="序号" width="80">
		        <template slot-scope="scope">
		         <span>{{(pageNum - 1) *20 + scope.$index + 1}}</span>
		        </template>
		      </el-table-column>
			  
		      <el-table-column  label="项目名称" >
				  <template slot-scope="scope">
					  <router-link v-if="scope.row.companyId" :to="'/company/' + encodeStr(scope.row.companyId)  + '/?index=true'" tag="a" class="list-titel-a blue" v-html="scope.row.name"></router-link>
				  </template>
			  </el-table-column>
			  
		      <el-table-column label="投标报价（万）" width="300"  >
				  <template slot-scope="scope">
				    {{ scope.row.tenderOffer||'--'}}
				  </template>
				  
				</el-table-column>
		     
		    </el-table>
			<div class="pagination clearfix" v-show="total>10">`
				<el-pagination background :page-size="pageSize" :current-page="pageNum"
					@current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
				</el-pagination>
			</div>
			
		  </div>
		</div>
		<div class="content main3">
			<div class="common-title">原文信息</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>
			
			<div class="main3-box" v-html="textList.content">
				
			
			</div>
		</div>
		
		
		

	</div>
</template>

<script>
	import "@/assets/styles/public.css";
	import {encodeStr} from "@/assets/js/common.js"
	
	import api from '@/api/radar/radar.js';
	export default {
		name: 'BidRecordDetails',
		data() {
			return {
				encodeStr,
				id: '',
				tableData: [],
				"pageNum": 1,
				"pageSize": 10,
				total: 0,
				textList: {},
				showimg:true
			}
		},
		created() {
			this.id = this.$route.params.id;
			this.tenderPage();
			this.tenderDetail();
		},
		methods: {
			tenderDetail() {
				api.tenderDetail({
					id: this.id
				}).then(res => {
					// console.log(res);
					this.textList = res.data;
					console.log(this.textList);
			
				}).catch(error => {
			
				});
			},
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum;
				this.search(pageNum, this.pageSize);
			},
			tenderPage(pageNum, pageSize) {
				if (!pageNum) {
					this.pageNum = 1;
				}
				if (!pageSize) {
					this.pageSize = 20;
				}
				var data = {
					cid: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				api.tenderPage(data).then(res => {
					// console.log(res);
					this.tableData = res.rows;
					this.total = res.total;
					console.log(this.tableData);
			
				}).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: 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;

					}

				}


			}

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

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

		.common-title {
			margin-bottom: 8px;
		}

		.main3 {
			position: relative;
			.main3-box {
				margin-top: 22px;
				min-height: 400px;
				border: 1px solid #D8D8D8;
			
			}
			.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;
			}
		}

		.main5 {
			.table-item {
				margin-top: 22px;
			}
			.pagination {
				padding: 14px;
			
				.el-pagination {
					float: right;
				}
			}
		}
	}
</style>