<template>
	<div class="app-container qyzx-details">
		<div class="content main1">
			<div class="title">
				<img src="@/assets/images/financing/head_icon.png" />
				<span>{{textList.projectName}}</span>
			</div>
			<p>{{textList.projectScale}}</p>
		</div>
		<div class="content main2">
			<div class="common-title">项目筹资</div>
			<div class="main2-box">
				<div class="list">
					<div class="item color1">
						<div class="item-left">
							<h4 v-if="textList.projectTotalInvestment">{{textList.projectTotalInvestment}}<span>万元</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>项目总投资额</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon1.png" />
					</div>
					<div class="item color2">
						<div class="item-left">
							<h4 v-if="textList.projectCapital">{{textList.projectCapital}}<span>万元</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>项目资本金</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon2.png" />
					</div>
					<div class="item color3">
						<div class="item-left">
							<h4 v-if="textList.econData_013">{{textList.econData_013}}<span>万元</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>专项债融资</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon3.png" />
					</div>
					<div class="item color4">
						<div class="item-left">
							<h4 v-if="textList.specialBondCapital">{{textList.specialBondCapital}}<span>万元</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>专项债用作资本金</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon4.png" />
					</div>
				</div>
				<div class="list">
					<div class="item color4">
						<div class="item-left">
							<h4 v-if="textList.otherFunds">{{textList.otherFunds}}<span>万元</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>其他资金</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon5.png" />
					</div>
					<div class="item color3">
						<div class="item-left">
							<h4 v-if="textList.specialBondIssue_number">{{textList.specialBondIssue_number}}<span>万元/ 10只</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>专项债融资额/专项债只数</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon6.png" />
					</div>
					<div class="item color4">
						<div class="item-left">
							<h4 v-if="textList.otherFinancing">{{textList.otherFinancing}}<span>万元</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>其他融资</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon7.png" />
					</div>
					<div class="item color2">
						<div class="item-left">
							<h4 v-if="textList.govSupportFunds">{{textList.govSupportFunds}}<span>万元</span></h4>
							<h4 v-else>
								--
							</h4>
							<p>政府安排资金</p>
						</div>
						<img class="img" src="@/assets/images/financing/icon8.png" />
					</div>
				</div>
			</div>
		</div>
		<div class="content main3">
			<div class="common-title">项目保障</div>
			<div class="main3-box">
				<p>
					<label class="label">项目总收益/项目总债务融资本息(覆盖倍数)</label>
					<span v-if="textList.econData_007">{{textList.econData_007}}倍</span>
					<span v-else>--</span>
				</p>
				<p>
					<label class="label">项目总收益/项目总地方债券融资本息</label>
					<span v-if="textList.econData_008">{{textList.econData_008}}倍</span>
					<span v-else>--</span>
				</p>
				<p>
					<label class="label">项目总收益/项目总投资</label>
					<span v-if="textList.econData_009">{{textList.econData_009}}倍</span>
					<span v-else>--</span>
				</p>
				<p>
					<label class="label">项目总收益/项目总地方债券融资本金</label>
					<span v-if="textList.econData_010">{{textList.econData_010}}倍</span>
					<span v-else>--</span>
				</p>
				<p>
					<label class="label">项目总收益/项目总债务融资本金</label>
					<span v-if="textList.econData_011">{{textList.econData_011}}倍</span>
					<span v-else>--</span>
				</p>
				<p>
					<label class="label">项目预测总收益</label>
					<span v-if="textList.projectForecastTotalRevenue">{{textList.projectForecastTotalRevenue}}万元</span>
					<span v-else>--</span>
				</p>
			</div>
		</div>
		<div class="content main4">
			<div class="common-title">项目当事人</div>
			<div class="main4-box">
				<label class="label">项目主体</label>
				<span>
					<router-link v-if="textList.projectEntity" :to="'/company/'  + encodeStr(textList.projectEntityId)  + '/?index=true'" tag="a" class=" blue" v-html="textList.projectEntity"></router-link>
				     <template v-else>--</template>
				</span>
				<label class="label">主管部门</label>
				<span>{{textList.chargeDepartment||'--'}}</span>
				<label class="label">实施单位</label>
				<span>
				<router-link v-if="textList.piu" :to="'/company/'  + encodeStr(textList.piuId)  + '/?index=true'" tag="a" class=" blue" v-html="textList.piu"></router-link>
				 <template v-else>--</template>
				</span>
			</div>
		</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 prop="name" label="债券简称">
						<template slot-scope="scope">
							<router-link :to="'/macro/financing/details/'+ scope.row.id" tag="a"
								class="a-link">{{ scope.row.bondAbbreviation}}</router-link>
						</template>
					</el-table-column>
					<el-table-column prop="tenderDate" label="招标日期" width="220" />
					<el-table-column prop="actualBondIssueScale" label="专项债规模（亿）" width="260" />
					<el-table-column prop="isUsedProjectScale" label="用于项目规模(亿)" width="260" />
					<el-table-column prop="zj" label="是否资本金" width="200" />
					<el-table-column label="是否资本金" width="200">
						<template slot-scope="scope">
							<span v-if="scope.row.isUsedCapital==1">是</span>
							<span v-else-if="scope.row.isUsedCapital==2">否</span>
							<span v-else>--</span>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination clearfix" v-show="total>0">
					<el-pagination background :page-size="pageSize" :current-page="pageNum"
						@current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		encodeStr
	} from "@/assets/js/common.js"
	import api from '@/api/radar/radar.js';
	export default {
		name: 'debtProjectDetails',
		data() {
			return {
				encodeStr,
				id: '',
				tableData: [],
				"pageNum": 1,
				"pageSize": 10,
				total: 0,
				textList: {}
			}
		},
		created() {
			this.id = this.$route.params.id;
			this.specialDebtPage();
			this.specialDebtProjectDetail();
		},
		methods: {
			specialDebtProjectDetail() {
				api.specialDebtProjectDetail({
					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);
			},
			specialDebtPage(pageNum, pageSize) {
				if (!pageNum) {
					this.pageNum = 1;
				}
				if (!pageSize) {
					this.pageSize = 20;
				}
				var data = {
					id: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				api.specialDebtPage(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>
	.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 {
				display: inline-flex;
				color: #232323;
				font-size: 16px;
				line-height: 28px;
				font-weight: bold;
				margin-bottom: 8px;
				text-align: left;
				padding: 0px;
				border: none;

				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;

				p {
					margin: 0;
					display: inline-flex;
					width: 50%;
					border-top: 1px solid #E6E9F0;
					border-left: 1px solid #E6E9F0;
				}

				p:nth-child(2n) {
					border-right: 1px solid #E6E9F0;
				}

				p:nth-child(5) {
					border-bottom: 1px solid #E6E9F0;
				}

				p:last-child {
					border-bottom: 1px solid #E6E9F0;
				}

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

				span {
					width: 40%;
					display: inline-block;
					height: 40px;
					line-height: 40px;
					padding-left: 12px;
					font-size: 12px;
				}
			}
		}

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

				.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;
					.blue{
						color: #0081FF;
					}
				}

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

		.main5 {
			.table-item {
				margin-top: 22px;

				.pagination {
					padding: 14px;

					.el-pagination {
						float: right;
					}
				}
			}
		}
	}
</style>