<template>
  <div class="app-container qyzx-details">
    <p class="tab">区域专项债 <span>/ 专项债项目详情</span></p>
    <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}}倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总地方债券融资本息</label>
          <span>{{details.econData008}}倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总投资</label>
          <span>{{details.econData009}}倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总地方债券融资本金</label>
          <span>{{details.econData010}}倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总债务融资本金</label>
          <span>{{details.econData011}}倍</span>
        </p>
        <p>
          <label class="label">项目预测总收益</label>
          <span>{{details.projectForecastTotalRevenue}}亿</span>
        </p>
      </div>
    </div>
    <div class="content main4">
      <div class="common-title">项目当事人</div>
      <div class="main4-box">
        <label class="label">项目主体</label>
        <span>{{details.projectEntity || '-'}}</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" />
          <el-table-column prop="isUsedProjectScale" label="用于项目规模(亿)" width="260" />
          <el-table-column prop="isUsedCapital" label="是否资本金" width="200" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { details,bondPage } from '@/api/macro/macro'
export default {
  name: 'financingDetails',
  data() {
    return {
      id:'',
      tableData:[],
      details:{},
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 1,
    }
  },
  created() {
    console.log(this.$route.params)
    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 => {
        console.log(res.data)
        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
    }
  }
}
</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{
      .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>
