<template>
  <div class="app-container qyzx-details">
    <p class="tab">区域专项债 <span>/ 专项债项目详情</span></p>
    <div class="content main1">
      <div class="title"><img src="@/assets/images/financing/head_icon.png" />重庆至黔江高速铁路项目一项目详情</div>
      <p>本项目是厦渝高铁通道的重要组成部分，是成渝地区、海西经济区间高速客运交流的主通道;是成渝地区与华南、华东地区间客运交流的辅助通道;是以重庆主城为核心的城际客流的快速客运通道;
        是整合区域旅游资源，促进沿线旅游资源开发的黄金旅游通道。线路起自重庆站，经巴南、南川、武隆、彭水，终至江，正线全长265公里，设8座，其中新建6座。
        同步建设重庆东动车所动车出入段，重庆枢纽东环联络线。</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>535.00<span>亿</span></h4>
              <p>项目总投资额</p>
            </div>
            <img class="img" src="@/assets/images/financing/icon1.png" />
          </div>
          <div class="item color2">
            <div class="item-left">
              <h4>535.00<span>亿</span></h4>
              <p>项目资本金</p>
            </div>
            <img class="img" src="@/assets/images/financing/icon2.png" />
          </div>
          <div class="item color3">
            <div class="item-left">
              <h4>535.00<span>亿</span></h4>
              <p>专项债融资</p>
            </div>
            <img class="img" src="@/assets/images/financing/icon3.png" />
          </div>
          <div class="item color4">
            <div class="item-left">
              <h4>535.00<span>亿</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>535.00<span>亿</span></h4>
              <p>其他资金</p>
            </div>
            <img class="img" src="@/assets/images/financing/icon5.png" />
          </div>
          <div class="item color3">
            <div class="item-left">
              <h4>535.00<span>亿 / 10只</span></h4>
              <p>专项债融资额/专项债只数</p>
            </div>
            <img class="img" src="@/assets/images/financing/icon6.png" />
          </div>
          <div class="item color4">
            <div class="item-left">
              <h4>535.00<span>亿</span></h4>
              <p>其他融资</p>
            </div>
            <img class="img" src="@/assets/images/financing/icon7.png" />
          </div>
          <div class="item color2">
            <div class="item-left">
              <h4>535.00<span>亿</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>1.36倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总地方债券融资本息</label>
          <span>1.96倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总投资</label>
          <span>1.96倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总地方债券融资本金</label>
          <span>1.96倍</span>
        </p>
        <p>
          <label class="label">项目总收益/项目总债务融资本金</label>
          <span>2.45倍</span>
        </p>
        <p>
          <label class="label">项目预测总收益</label>
          <span>2.45倍</span>
        </p>
      </div>
    </div>
    <div class="content main4">
      <div class="common-title">项目当事人</div>
      <div class="main4-box">
        <label class="label">项目主体</label>
        <span>重庆铁路投资集团有限公司</span>
        <label class="label">主管部门</label>
        <span>-</span>
        <label class="label">实施单位</label>
        <span>重庆铁路投资集团有限公司</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.name}}</router-link>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="招标日期" width="220" />
          <el-table-column prop="gm" label="专项债规模（亿）"  width="260" />
          <el-table-column prop="gm" label="用于项目规模(亿)" width="260" />
          <el-table-column prop="zj" label="是否资本金" width="200" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'financingDetails',
  data() {
    return {
      id:'',
      tableData:[
        {
          id:0,
          name:'20重庆债14(2005938)',
          time:'2020-09-18',
          gm:'285.24',
          zj:'否',
        }
      ]
    }
  },
  created() {
    console.log(this.$route.params)
    this.id=this.$route.params.id
  },
  methods: {

  }
}
</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{
        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>
