<template>
	<div class="app-container qyzx-details">
		<div class="bottomlist">
			<ul class="bottomlist-content">
				<li class="bottomlist-list"  >
					<p class="list-titel">
						 {{textList.projectName}}
						 <!-- <div  v-else-if="item.projectName" v-html="item.projectName"></div> -->
					</p>
					<div class="content-label">
						<span class="list-label list-label-lx" v-if="textList.projectCategories">{{textList.projectCategories}}</span>
						<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"  v-if="textList.examineStatus">
							<span>办件结果：</span>
							<span >{{textList.examineStatus}}</span>
						</p>
						<p class="list-content-text"v-if="textList.money">
							<span>总投资：</span>
							<span>{{textList.money}}万</span>
						</p>
						<p class="list-content-text"v-if="textList.handleTime">
							<span>审批日期：</span>
							<span>{{textList.handleTime}}</span>
						</p>
						
					</div>
					
				</li>
			</ul>

		</div>

		<div class="content main3">
			<div class="common-title">拟建项目详情</div>
			<div class="main3-box">
				<p>
					<label class="label">项目法人</label>
					<span>{{textList.companyName||'--'}}</span>
					<label class="label">总投资（万元）</label>
					<span>{{textList.money||'--'}}</span>
				</p>
				<p>
					<label class="label">项目类型</label>
					<span class="span-one">{{textList.projectCategories||'--'}}</span>

				</p>
				
				<p>
					<label class="label">项目属地</label>
					<span>
						{{textList.province}}
						<template v-if="textList.city">
							 -{{textList.city}}
						</template>
						<template v-if="textList.district">
							  -{{textList.district}}
						</template>
					</span>
					<label class="label">审批类型</label>
					<span>{{textList.projectType||'--'}}</span>
				</p>
				<p >
					<label class="label">建设规模</label>
					<span class="span-one">{{textList.buildScale||'--'}}</span>
				</p>
				<p>
					<label class="label">计划开工日期</label>
					<span>{{textList.planStartTime||'--'}}</span>
					<label class="label">计划完成日期</label>
					<span>{{textList.planEndTime||'--'}}</span>
				</p>
				<p>
					<label class="label">项目联系方式</label>
					<span>{{textList.money||'--'}}</span>
					<label class="label">行业分类</label>
					<span>{{textList.projectIndustry||'--'}}</span>
				</p>
				<p>
					<label class="label">项目详情地址</label>
					<span>{{textList.buildAddre||'--'}}</span>
					<label class="label">项目代码</label>
					<span>{{textList.projectCode||'--'}}</span>
				</p>
				
			
			</div>
		</div>
	
		<div class="content main5">
		  <div class="common-title">立项审批</div>
		  <div class="table-item">
		    <el-table
		      :data="tableData1"
		      element-loading-text="Loading"
		      border
		      fit
		      highlight-current-row
		    >
		      <el-table-column  label="审批事项" width="270">
		        <template slot-scope="scope">
		           {{ scope.row.examineContent||'--'}}
		        </template>
		      </el-table-column>
		      <el-table-column  label="审批结果" width="187" >
				  <template slot-scope="scope">
				   {{ scope.row.examineStatus||'--'}}
				  </template>
			  </el-table-column>
		      <el-table-column label="审批部门"  >
				  <template slot-scope="scope">
				   {{ scope.row.examineOffice||'--'}}
				  </template>
				  
				</el-table-column>
		      <el-table-column  label="审批文号" width="328" >
				  <template slot-scope="scope">
				    {{ scope.row.licenseNum||'--'}}
				    </template>
				    
				</el-table-column>
		      <el-table-column prop="zj" label="审批日期" width="240" >
				<template slot-scope="scope">
				   {{ scope.row.handleTime||'--'}}
				</template>
				    
			   </el-table-column>
		    </el-table>
			<div class="pagination clearfix" v-show="total1>10">
				<el-pagination background :page-size="pageSize1" :current-page="pageNum1"
					@current-change="handleCurrentChange1" layout="prev, pager, next" :total="total1">
				</el-pagination>
			</div>
			
		  </div>
		</div>
		
		<div class="content main5">
		  <div class="common-title">立项推介</div>
		  <div class="table-item">
		    <el-table
		      :data="tableData2"
		      element-loading-text="Loading"
		      border
		      fit
		      highlight-current-row
		    >
		      <el-table-column  label="民间资本名称" >
		        <template slot-scope="scope">
		           {{ scope.row.companyName||'--'}}
		        </template>
		      </el-table-column>
		      <el-table-column  label="引入资本规模（万元）" width="232" >
				  <template slot-scope="scope">
				   {{ scope.row.introduceMoney||'--'}}
				  </template>
			  </el-table-column>
		      <el-table-column label="引入资本时间"  width="243" >
				  <template slot-scope="scope">
				   {{ scope.row.introduceMoneyTime||'--'}}
				  </template>
				  
				</el-table-column>
		      <el-table-column  label="推介时间" width="243" >
				  <template slot-scope="scope">
				 {{ scope.row.recommendTime||'--'}}
				    </template>
				    
				</el-table-column>
		      <el-table-column prop="zj" label="是否完成推介" width="243" >
				<template slot-scope="scope">
					<template v-if="scope.row.isRecommend!=''&&scope.row.isRecommend!=null">
						{{ scope.row.isRecommend?'是':'否'}}
					</template>
					<template v-else>
						--
					</template>
				</template>
				    
			   </el-table-column>
		    </el-table>
			<div class="pagination clearfix" v-show="total2>10">`
				<el-pagination background :page-size="pageSize2" :current-page="pageNum2"
					@current-change="handleCurrentChange2" layout="prev, pager, next" :total="total2">
				</el-pagination>
			</div>
		  </div>
		</div>
		

	</div>
</template>

<script>
	import api from '@/api/radar/radar.js';
	export default {

		name: 'EstablishmentDetails',
		data() {
			return {
				id: '',
				textList: {},
				pageNum1:1,
				pageSize1:10,
				tableData1:[],
				total1:0,
				
				pageNum2:1,
				pageSize2:10,
				tableData2:[],
				total2:0,
			}
		},
		created() {
			this.id = this.$route.params.id;
			this.approvalInfoDetail();
			this.approvalExaminePage();
			this.approvalMarketingPage();
			
		},
		methods: {
			approvalInfoDetail() {
				api.approvalInfoDetail({
					id: this.id
				}).then(res => {
					// console.log(res);
					this.textList = res.data;
				}).catch(error => {
		
				});
			},
			handleCurrentChange1(pageNum1) {
				this.pageNum1 = pageNum1;
				this.search(pageNum1, this.pageSize1);
			},
			approvalExaminePage(pageNum1, pageSize1) {
				if (!pageNum1) {
					this.pageNum1 = 1;
				}
				if (!pageSize1) {
					this.pageSize1 = 20;
				}
				var data = {
					id: this.id,
					pageNum: this.pageNum1,
					pageSize: this.pageSize1
				}
				api.approvalExaminePage(data).then(res => {
					// console.log(res);
					this.tableData1 = res.rows;
			
				}).catch(error => {
			
				});
			},
			handleCurrentChange2(pageNum2) {
				this.pageNum2 = pageNum2;
				this.search(pageNum2, this.pageSize2);
			},
			approvalMarketingPage(pageNum2, pageSize2) {
				if (!pageNum2) {
					this.pageNum2 = 1;
				}
				if (!pageSize2) {
					this.pageSize2 = 20;
				}
				var data = {
					id: this.id,
					pageNum: this.pageNum2,
					pageSize: this.pageSize2
				}
				api.approvalMarketingPage(data).then(res => {
					// console.log(res);
					this.tableData2 = res.rows;
			
				}).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;
				margin-bottom: 8px;

				.list-label {
					background: #F3F3FF;
					color: #8491E8;
					border-radius: 1px 1px 1px 1px;
					padding: 3px 7px;
					font-size: 12px;
					margin-right: 12px;
				
				}
				.list-label-zb{
					font-weight: 400;
					color: #8491E8;
					background: #F3F3FF;
				}
				.list-label-lx{
					font-weight: 400;
					color: #41A1FD;
					background: #E4F3FD;
				}
			}


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

		.main1 {
			.title {
				color: #232323;
				font-size: 16px;
				line-height: 28px;
				font-weight: bold;
				margin-bottom: 8px;
				text-align: left;

				img {
					width: 28px;
					height: 28px;
					margin-bottom: -9px;
					margin-right: 17px;
				}
			}

			p {
				color: #3D3D3D;
				font-size: 14px;
				margin: 0;
			}
		}

		.main2 {
			.list {
				display: flex;
				margin: 16px 0;
			}

			.item {
				width: 24.5%;
				margin-right: 16px;
				height: 100px;
				display: flex;
				justify-content: space-between;
				border-radius: 8px;

				.item-left {
					margin-left: 16px;
					margin-top: 24px;

					h4 {
						color: #232323;
						font-size: 22px;
						line-height: 22px;
						font-weight: bold;
						margin: 0;

						span {
							font-weight: 400;
							margin-left: 4px;
							font-size: 18px;
						}
					}

					p {
						margin: 0;
						color: #3D3D3D;
						font-size: 14px;
						padding-top: 8px;
					}
				}

				.img {
					width: 56px;
					height: 56px;
					margin-top: 22px;
					margin-right: 12px;
				}
			}

			.color1 {
				background: rgba(246, 190, 59, 0.08);
				border: 1px solid rgba(246, 190, 59, 0.2);
			}

			.color2 {
				background: rgba(148, 216, 196, 0.102);
				border: 1px solid rgba(73, 187, 154, 0.1);
			}

			.color3 {
				background: rgba(57, 100, 199, 0.06);
				border: 1px solid rgba(57, 100, 199, 0.1);
			}

			.color4 {
				background: rgba(0, 129, 255, 0.04);
				border: 1px solid rgba(0, 129, 255, 0.1);
			}
		}

		.main3 {
			.main3-box {
				margin-top: 22px;
				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: 10%;
						height: 100%;
						font-weight: 400;
						line-height: 22px;
						font-size: 12px;
						padding: 9px 12px;
					}

					span {
						width: 40%;
						color: #000;
						line-height: 22px;
						padding: 9px 12px;
						font-size: 12px;
						background: #fff;
					}

					.span-one {
						width: 90%;
					}

				}

			}
		}

		.main4 {
			.main4-box {
				margin-top: 22px;

				.label {
					width: 14%;
					background: #F0F3FA;
					border: 1px solid #E6E9F0;
					display: inline-block;
					height: 40px;
					line-height: 40px;
					font-size: 12px;
					color: rgba(35, 35, 35, 0.8);
					padding-left: 12px;
				}

				span {
					width: 19%;
					display: inline-block;
					height: 40px;
					line-height: 40px;
					border-top: 1px solid #E6E9F0;
					border-bottom: 1px solid #E6E9F0;
					padding-left: 12px;
					font-size: 12px;
				}

				span:last-child {
					width: 20%;
					border-right: 1px solid #E6E9F0;
				}
			}
		}

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