<template>
  <div class="child-container ndmx-detail">
    <el-drawer
      :visible.sync="dialogVisible"
      direction="rtl"
      size="50%"
    >
      <div slot="title" class="ndmx-title"><img src="@/assets/images/economies/icon.png" class="icon">年度明细</div>
      <div class="table-item">
        <el-table
          :data="getValues"
          :show-header="false"
          border
          :cell-style="rowStyle"
        >
          <el-table-column
            v-for="(item, index) in getHeaders"
            :key="index"
            :prop="item"
            :formatter="formatStatus"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { getNationalDetails } from '@/api/macro/macro'
export default {
  name: '',
  components: {
  },
  props: {
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      headers: [
        {
          prop: 'year',
          label: '指标',
        },
        {
          prop: 'name',
          label: '国民经济核算',
        },
        {
          prop: 'gdp',
          label: 'GDP（亿元）',
        },
        {
          prop: 'gdpGrowth',
          label: 'GDP增速',
        },
        {
          prop: 'gdpPerCapita',
          label: '人均GDP（元）',
        },
        {
          prop: 'piAddValue',
          label: '第一产业增加值(亿元)',
        },
        {
          prop: 'siAddValue',
          label: '第二产业增加值(亿元)',
        },
        {
          prop: 'tiAddValue',
          label: '第三产业增加值(亿元)',
        },
        {
          prop: 'name',
          label: '人口',
        },
        {
          prop: 'population',
          label: '人口(万人)',
        },
        {
          prop: 'name',
          label: '一般公共预算收入',
        },
        {
          prop: 'gbr',
          label: '一般公共预算收入(亿元)',
        },
        {
          prop: 'gbrGrowth',
          label: '一般公共预算收入增速(%)',
        },
        {
          prop: 'taxIncome',
          label: '一般公共预算收入:税收收入(亿元)',
        },
        {
          prop: 'gbe',
          label: '一般公共预算支出(亿元)',
        },
        {
          prop: 'name',
          label: '政府性基金收支',
        },
        {
          prop: 'govFundIncome',
          label: '政府性基金收入(亿元)',
        },
        {
          prop: 'landTransferIncome',
          label: '政府性基金收入:土地出让收入(亿元)',
        },
        {
          prop: 'govFundExpenditure',
          label: '政府性基金支出(亿元)',
        },
        {
          prop: 'name',
          label: '国有资本预算收支',
        },
        {
          prop: 'soecoi',
          label: '国有资本经营收入(亿元)',
        },
        {
          prop: 'soecoe',
          label: '国有资本经营支出(亿元)',
        },
        {
          prop: 'name',
          label: '综合财力',
        },
        {
          prop: 'fiscalSelfSufficiencyRate',
          label: '财政自给率(%)',
        },
        {
          prop: 'name',
          label: '地方政府债务',
        },
        {
          prop: 'govDebtBalance',
          label: '地方政府债务余额(亿元)',
        },
        {
          prop: 'generalDebtBalance',
          label: '一般债余额(亿元)',
        },
        {
          prop: 'specialDebtBalance',
          label: '专项债余额(亿元)',
        },
        {
          prop: 'govDebtLimit',
          label: '地方政府债务限额(亿元)',
        },
        {
          prop: 'uipInterestBearingDebt',
          label: '城投平台有息债务(亿元)',
        },
        {
          prop: 'govDebtToGdpRate',
          label: '负债率(%)',
        },
        {
          prop: 'govDebtToGdpRateWild',
          label: '负债率(宽口径)(%)',
        },
        {
          prop: 'govDebtRate',
          label: '债务率(%)',
        },
        {
          prop: 'name',
          label: '工业',
        },
        {
          prop: 'industryAddValue',
          label: '工业增加值（亿元）',
        },
        {
          prop: 'industryTotalValue',
          label: '工业总产值（亿元）',
        },
        {
          prop: 'name',
          label: '投资与房地产',
        },
        {
          prop: 'fixedInvestment',
          label: '固定资产投资（亿元）',
        },
        {
          prop: 'name',
          label: '对外贸易',
        },
        {
          prop: 'eximTotalValue',
          label: '进出口总额（亿美元）',
        },
        {
          prop: 'name',
          label: '消费、收入和存贷款',
        },
        {
          prop: 'trscg',
          label: '社会消费品零售总额(亿元)',
        },
        {
          prop: 'urbanPcdi',
          label: '城镇居民人均可支配收入(元)',
        },
        // {
        //   prop: 'name',
        //   label: '金融机构存款余额(本外币)(亿元)',
        // },
        // {
        //   prop: 'name',
        //   label: '金融机构贷款余额(本外币)(亿元)',
        // },
      ],
    }
  },
  created() {

  },
  computed: {
    getHeaders() {
      return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
      });
    }
  },
  methods: {
    open(row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.getDetail(row)
      })
    },
    // 获取明细
    async getDetail(row) {
      getNationalDetails({id:row.id}).then(res => {
        this.tableData=res.data;
      })
    },
    formatStatus: function(row, column, cellValue) {
      if(row.title === '国民经济核算'||row.title === '人口'||row.title === '一般公共预算收入'||row.title === '政府性基金收支'||row.title === '国有资本预算收支'
        ||row.title === '综合财力'||row.title === '地方政府债务'||row.title === '工业'||row.title === '投资与房地产'||row.title === '对外贸易'||row.title === '消费、收入和存贷款'){
        return cellValue
      }else {
        return cellValue? cellValue : '-'
      }
    },
    rowStyle(row){
      if (row.row.title === "国民经济核算"||row.row.title === "人口"||row.row.title === "一般公共预算收入"||row.row.title === "政府性基金收支"||row.row.title === "国有资本预算收支"
        ||row.row.title === '综合财力'||row.row.title === '地方政府债务'||row.row.title === '工业'||row.row.title === '投资与房地产'||row.row.title === '对外贸易'||row.row.title === '消费、收入和存贷款'){
        return {
          background: '#FAF5EB',
          color:'#F38600',
          fontWeight: 'bold'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .ndmx-detail{
    ::v-deep .el-drawer{
      .el-drawer__header{
        padding:0 0 0 13px;
        line-height: 48px;
      }
    }
    .content{
      height: 100%;
      padding: 0 12px;
    }
  }
  .ndmx-title{
    color: #232323;
    font-weight: bold;
    font-size: 16px;
    .icon{
      width: 17px;
      height: 17px;
      margin-right: 8px;
    }
  }
  .table-item{
    padding: 16px 10px 16px 16px;
    ::v-deep .el-table{
      .el-table__body-wrapper{
        overflow:visible;
      }
      .el-table__body{
        tr:first-child{
          position: fixed;
          top: 49px;
          z-index: 9;
        }
      }
    }
  }
</style>
