<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
            :summary-method="getSummaries"
            show-summary
            height="400"
            fit
            @sort-change="sortChange"
            highlight-current-row
          >
            <el-table-column prop="name" label="项目类型" width="150" />
            <el-table-column prop="number" label="项目个数" sortable="custom" width="140" />
            <el-table-column prop="value" label="投资额（亿元）" sortable="custom" width="140" />
            <el-table-column prop="proportion" label="比例（%）" width="140" sortable="custom" />
          </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
          v-loading="tableLoading"
          :data="listData"
          element-loading-text="Loading"
          @sort-change="sortChange1"
          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="projectName" label="项目名称">
            <template slot-scope="scope">
              <router-link :to="'/macro/financing/details/'+ scope.row.id" tag="a" class="a-link">{{ scope.row.projectName}}</router-link>
            </template>
          </el-table-column>
          <el-table-column prop="projectTotalInvestment" label="项目总投资（亿）" :formatter="formatStatus" align="right" sortable="custom" width="165" />
          <el-table-column prop="projectCapital" label="项目资本金（亿）" :formatter="formatStatus" align="right" sortable="custom"  width="160" />
          <el-table-column prop="econData007" label="项目收益倍数（倍）" :formatter="formatStatus" align="right" sortable="custom" width="160" />
          <!--<el-table-column prop="zxz" label="专项债金额（亿）" :formatter="formatStatus" sortable="custom" width="150" />-->
          <el-table-column prop="specialBondCapital" label="专项债用作资本金（亿）" align="right" sortable="custom" :formatter="formatStatus" width="180" />
          <el-table-column prop="projectEntity" :formatter="formatStatus" label="项目主体">
            <!--<template slot-scope="scope">-->
              <!--<router-link :to="'/macro/financing/details/'+ scope.row.projectEntityId" tag="a" class="a-link">{{ scope.row.projectEntity}}</router-link>-->
            <!--</template>-->
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { statistics,projectsPage } from '@/api/macro/macro'
export default {
  name: 'Financing',
  data() {
    return {
      queryParams:{},
      tableParams:{},
      tableData:[],
      listData:[],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0
    }
  },
  created() {
    this.getStatistics()
    this.getData()
    this.$nextTick(()=>{

    })
  },
  methods: {
    getData(){
      this.tableLoading = true
      let params={ pageNum: this.pageIndex, pageSize: this.pageSize}
      if(this.tableParams.field){
        params.field=this.tableParams.field
      }
      if(this.tableParams.order){
        params.order=this.tableParams.order
      }
      projectsPage(params).then(res => {
        this.tableLoading = false
        this.listData=res.data.list;
        this.tableDataTotal = res.data.totalCount
      })
      // 延迟关闭加载效果
      // setTimeout(() => {
      //   this.tableLoading = false
      // }, 200)
    },
    getStatistics(){
      let params={};
      if(this.queryParams.field){
        params.field=this.queryParams.field
      }
      if(this.queryParams.order){
        params.order=this.queryParams.order
      }
      statistics(params).then(res => {
        var list=[];
        for(var i=0;i<res.data.length;i++){
          var obj={};
          obj.name=res.data[i].projectType;
          obj.value=res.data[i].totalInvestment;
          obj.number=res.data[i].count;
          // obj.totalInvestment=res.data[i].totalInvestment;
          obj.proportion=res.data[i].proportion;
          list.push(obj)
        }
        this.tableData=list;

        let arr=this.tableData.sort((old,New)=>{
          return  New.value - old.value
        })
        let data=[]
        for(let i=0; i<10; i++){
          data.push(arr[i])
        }
        this.initChart(data)
      })
    },
    initChart(data) {
      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.number +'个</p>'
            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.proportion +'%</p>'
            return result;
          },
          extraCssText:'width:150px!important;',
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: 0,
          data: data,
          itemHeight:8,
          itemWidth:12,
          pageButtonPosition: 'end',
        },
        color:['#8A82F3', '#93A1FF', '#63B6EA','#42B393','#8ECF95','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option);
    },
    formatStatus: function(row, column, cellValue) {
      return cellValue? cellValue : '-'
    },
    sortChange({ column, prop, order }){
      if(prop === 'number'){
        this.queryParams.field = 'count'
      }else if(prop === 'value'){
        this.queryParams.field = 'totalInvestment '
      }else {
        this.queryParams.field = prop
      }

      if(column.order === "ascending"){
        this.queryParams.order = 'asc'
      }else if(column.order === "descending"){
        this.queryParams.order = 'desc'
      }else {
        this.queryParams.order=''
        this.queryParams.field=''
      }
      let params={
        field:this.queryParams.field,
        order:this.queryParams.order
      };
      statistics(params).then(res => {
        var list=[];
        for(var i=0;i<res.data.length;i++){
          var obj={};
          obj.name=res.data[i].projectType;
          obj.value=res.data[i].totalInvestment;
          obj.number=res.data[i].count;
          obj.proportion=res.data[i].proportion;
          list.push(obj)
        }
        this.tableData=list;
      })
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 3) {
          sums[index] = '100';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return Number(Number(prev) + Number(curr)).toFixed(3)
          } else {
            return prev;
          }
        }, 0);

        if (index === 1) {
          sums[index] = Number(sums[index]).toFixed(0);
          return;
        }
      });
      return sums;
    },
    // 重置页数
    handleSizeChange(val) {
      this.pageIndex = 1
      this.pageSize = val
      this.getData()
    },
    // 跳转指定页数
    handleCurrentChange(val) {
      this.pageIndex = val
      this.getData()
    },
    sortChange1({ column, prop, order }){
      this.tableParams.field = prop;
      if(column.order === "ascending"){
        this.tableParams.order = 'asc'
      }else if(column.order === "descending"){
        this.tableParams.order = 'desc'
      }else {
        this.tableParams.order=''
        this.tableParams.field=''
      }
      this.pageIndex=1;
      this.getData()
    },
  }
}
</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{
          td.el-table__cell{
            border-bottom: 0;
          }
          tr{
            &.current-row>td{
              background-color: initial;
            }
            &:nth-child(2n) {
              background: #F8FBFF;
            }
          }
          .el-table__cell{
            height: 40px;
            padding: 0;
            line-height: 40px;
          }
          ::-webkit-scrollbar-track-piece {
            //滚动条凹槽的颜色，还可以设置边框属性
            background-color: #F3F4F5;
            height: 16px;
            padding: 0 4px;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: #F3F4F5;
            border-radius: 6px;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            height: 8px;
            margin: 0 4px;
            background: rgba(98,110,126,0.2);
            border: 4px solid rgba(98,110,126,0.2);;
            &:hover{
              background: #566380;
            }
          }
          .gutter{
            background: #f8f8f9;
          }
        }
      }
    }
    .table-item{
      margin-top: 22px;
      ::v-deep .el-table{
        td.el-table__cell{
          border-bottom: 0;
        }
      }
    }
  }
</style>
