<template>
	<div class="app-container qyzx-details">
	  <div class="content main1">
		<div class="cont-title"><img src="@/assets/images/financing/head_icon.png" />{{details.projectName}}</div>
		<p>{{details.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>{{details.projectTotalInvestment || '-'}}<span>{{details.projectTotalInvestment ? '亿' : ''}}</span></h4>
				<p>项目总投资额</p>
			  </div>
			  <img class="img" src="@/assets/images/financing/icon1.png" />
			</div>
			<div class="item color2">
			  <div class="item-left">
				<h4>{{details.projectCapital || '-'}}<span>{{details.projectCapital ? '亿' : ''}}</span></h4>
				<p>项目资本金</p>
			  </div>
			  <img class="img" src="@/assets/images/financing/icon2.png" />
			</div>
			<div class="item color3">
			  <div class="item-left">
				<h4>{{details.specialBondFinancing || '-'}}<span>{{details.specialBondFinancing ? '亿' : ''}}</span></h4>
				<p>专项债融资</p>
			  </div>
			  <img class="img" src="@/assets/images/financing/icon3.png" />
			</div>
			<div class="item color4">
			  <div class="item-left">
				<h4>{{details.specialBondCapital || '-'}}<span>{{details.specialBondCapital ? '亿' : ''}}</span></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>{{details.otherFunds || '-'}}<span>{{details.otherFunds ? '亿' : ''}}</span></h4>
				<p>其他资金</p>
			  </div>
			  <img class="img" src="@/assets/images/financing/icon5.png" />
			</div>
			<div class="item color3">
			  <div class="item-left">
				<h4>{{details.specialBondFinancingAmount || '-'}}<span>{{details.specialBondFinancingAmount ? '亿' : ''}} / {{details.specialBondIssueNumber || '-'}}{{details.specialBondIssueNumber ? '只' : ''}}</span></h4>
				<p>专项债融资额/专项债只数</p>
			  </div>
			  <img class="img" src="@/assets/images/financing/icon6.png" />
			</div>
			<div class="item color4">
			  <div class="item-left">
				<h4>{{details.otherFinancing || '-'}}<span>{{details.otherFinancing ? '亿' : ''}}</span></h4>
				<p>其他融资</p>
			  </div>
			  <img class="img" src="@/assets/images/financing/icon7.png" />
			</div>
			<div class="item color2">
			  <div class="item-left">
				<h4>{{details.govSupportFunds || '-'}}<span>{{details.govSupportFunds ? '亿' : ''}}</span></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>{{details.econData007 || '-'}}{{details.econData007 ? '倍' : ''}}</span>
		  </p>
		  <p>
			<label class="label">项目总收益/项目总地方债券融资本息</label>
			<span>{{details.econData008 || '-'}}{{details.econData008 ? '倍' : ''}}</span>
		  </p>
		  <p>
			<label class="label">项目总收益/项目总投资</label>
			<span>{{details.econData009 || '-'}}{{details.econData009 ? '倍' : ''}}</span>
		  </p>
		  <p>
			<label class="label">项目总收益/项目总地方债券融资本金</label>
			<span>{{details.econData010 || '-'}}{{details.econData010 ? '倍' : ''}}</span>
		  </p>
		  <p>
			<label class="label">项目总收益/项目总债务融资本金</label>
			<span>{{details.econData011 || '-'}}{{details.econData011 ? '倍' : ''}}</span>
		  </p>
		  <p>
			<label class="label">项目预测总收益</label>
			<span>{{details.projectForecastTotalRevenue || '-'}}{{details.projectForecastTotalRevenue ? '亿' : ''}}</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="details.projectEntity"  :to="details.projectEntityUipId?'/enterprise/' + encodeStr(details.projectEntityId) :'/company/' + encodeStr(details.projectEntityId) " tag="a" class="list-titel-a blue" v-html="details.projectEntity"></router-link>
			<template v-else>--</template>
		  </span>
		  <label class="label">主管部门</label>
		  <span>{{details.chargeDepartment || '-'}}</span>
		  <label class="label">实施单位</label>
		  <span>{{details.piu || '-'}}</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="bondAbbreviation" 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 label="招标日期" width="220">
			  <template slot-scope="scope">
				{{formatDate(scope.row.tenderDate)}}
			  </template>
			</el-table-column>
			<el-table-column prop="actualBondIssueScale" label="专项债规模（亿）"  width="260" :formatter="formatStatus"/>
			<el-table-column prop="isUsedProjectScale" label="用于项目规模(亿)" width="260" :formatter="formatStatus"/>
			<el-table-column prop="isUsedCapital" label="是否资本金" width="200" :formatter="formatStatus"/>
		  </el-table>
		</div>
	  </div>
	</div>
  </template>
  
  <script>
	import { details,bondPage } from '@/api/macro/macro'
	import {encodeStr} from "@/assets/js/common.js"
  export default {
	name: 'debtProjectDetails',
	data() {
	  return {
		id:'',
		encodeStr,
		tableData:[],
		details:{},
		tableLoading: false,
		pageIndex: 1,
		pageSize: 10,
		tableDataTotal: 1,
	  }
	},
	created() {
	  this.id=this.$route.params.id;
	  this.getDetails()
  
	},
	methods: {
	  getDetails(){
		details({id:this.id}).then(res => {
		  this.details=res.data;
		  this.getData()
		})
	  },
	  getData(){
		// const params = { pageNum: this.pageIndex, pageSize: this.pageSize,specialBondUuid:'2e59fca0-21a6-47db-975d-5481e1c52f45_74'}
		const params = { pageNum: this.pageIndex, pageSize: this.pageSize,specialBondUuid:this.details.specialBondUuid}
		bondPage(params).then(res => {
		  this.tableData=res.data.list;
		  this.tableDataTotal=res.data.totalCount;
		})
	  },
	  formatDate(cellValue) {
		if (cellValue == null || cellValue == "") return "";
		var date = new Date(cellValue)
		var year = date.getFullYear()
		var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
		var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
		// var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
		// var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
		// var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
		// return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
		return year + '-' + month + '-' + day
	  },
	  formatStatus: function(row, column, cellValue) {
		return cellValue? cellValue : '-'
	  },
	}
  }
  </script>
  
  <style lang="scss" scoped>
	.app-container{
	  padding: 0;
	  .list-titel-a{
				color:#0081FF;
			}
	}
	.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{
		.cont-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;
		  p{
			margin: 0;
			display: inline-block;
			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;
		  .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;
		}
	  }
	}
  </style>
  