<template>
  <div class="app-container qyzx">
    <div class="content">
      <div class="common-title">专项债项目</div>
      <div class="content-box">
        <div class="box-left">
          <div id="echarts" style="height: 400px"></div>
        </div>
        <div class="box-right">
          <el-table
            :data="tableData"
            element-loading-text="Loading"
            border
            height="360"
            fit
            highlight-current-row
          >
            <el-table-column prop="name" label="项目关系" width="150" />
            <el-table-column prop="value" label="项目个数" width="140" />
            <el-table-column prop="tz" label="投资额（亿元）"  width="140" />
            <el-table-column prop="bl" label="比例" width="140" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="common-title flex-box">
        <div class="flex-box">项目明细</div>
        <div class="flex-box query-ability">
          <span class="flex-box">共 {{tableDataTotal}} 条</span>
          <span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
        </div>
      </div>
      <div class="table-item">
        <el-table
          :data="listData"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="序号" width="55" align="left" fixed>
            <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" label="项目名称" width="290">
            <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="tz" label="项目总投资（亿）" sortable width="155" />
          <el-table-column prop="bj" label="项目资本金（亿）" sortable  width="155" />
          <el-table-column prop="sy" label="项目收益倍数（倍）" width="150" />
          <el-table-column prop="zxz" label="专项债金额（亿）" width="150" />
          <el-table-column prop="zxzzj" label="专项债用作资本金（亿）" width="170" />
          <el-table-column prop="xmzt" label="项目主体"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
export default {
  name: 'Financing',
  data() {
    return {
      tableData:[
        {
          name:'农业农村',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'乡村振兴',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'农林水利',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'交通',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'轨道交通',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'政府收费公路',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'其他交通基础设施',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'铁路',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'养老',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'生态环保',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'职业教育',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
        {
          name:'能源',
          value:'2',
          tz:'50.01',
          bl:'0.19%'
        },
      ],
      listData:[
        {
          id:1,
          name:'涪陵高新产业园区总和配套项目',
          tz:'535.00',
          bj:'235.00',
          sy:'3',
          zxz:'230',
          zxzzj:'423',
          xmzt:'重庆市涪陵区新城区开发 (集团) 有限公司',
        },
        {
          id:2,
          name:'涪陵高新产业园区总和配套项目',
          tz:'235.00',
          bj:'435.00',
          sy:'6',
          zxz:'530',
          zxzzj:'323',
          xmzt:'重庆市涪陵区新城区开发 (集团) 有限公司',
        }
      ],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 120
    }
  },
  created() {
    this.$nextTick(()=>{
      this.initChart()
    })
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById("echarts"))

      let option ={
        tooltip: {
          trigger: 'item',
          borderWidth:0,
          backgroundColor:"rgba(255, 255, 255, 0.8)",
          formatter: function (params) {
            var result = ''
            result+='<h3 style="color: #232226;padding: 0 0 5px 0;margin: 0;">'+ params.data.name +'</h3>'
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.value +'个</p>'
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.tz +'亿元</p>'
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.data.bl +'%</p>'
            return result;
          },
          extraCssText:'width:150px!important;',
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: 20,
          data: this.tableData,
          pageButtonPosition: 'end',
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            data: this.tableData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 0;
  }
  .qyzx{
    .content{
      background: #ffffff;
      padding: 16px;
      margin-bottom: 16px;
      border-radius: 4px;
    }
    .common-title{
      justify-content: space-between;
    }
    .content-box{
      height: 422px;
      display: flex;
      justify-content: space-between;
      .box-left{
        width: 55%;
      }
      .box-right{
        float: right;
        ::v-deep .el-table{
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
        }
      }
    }
    .table-item{
      margin-top: 22px;
    }
  }
</style>
