<template>
  <div class="regionalEconomies">
    <div class="flex-box query-box">
      <div class="flex-box query-params">
        <span class="common-title">区域经济</span>
      </div>
      <div class="params-dw"><img src="@/assets/images/addree.png" />广东省-广州市</div>
    </div>
    <div class="table-item">
      <el-table
        :tableLoading="tableLoading"
        :data="getValues"
        :show-header="false"
        border
      >
        <el-table-column
          v-for="(item, index) in getHeaders"
          :key="index"
          :prop="item"
        >
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import {
  regionalEconomy
} from '@/api/detail/party-a/urbanLnvestment'
export default {
  name: 'regionalEconomies',
  components: {

  },
  data() {
    return {
      params: {
        provinceId: 500000,
        cityId: 500100
      },
      labels: [
        '指标',
        '财政',
        '债务',
      ],
      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: 'population',
          label: '人口（万人）',
        },
        {
          prop: 'industryAddValue',
          label: '工业增加值（亿元）',
        },
        {
          prop: 'industryTotalValue',
          label: '工业总产值（亿元）',
        },
        {
          prop: 'realEstateInvestment',
          label: '房地产开发投资（亿元）',
        },
        {
          prop: 'eximTotalValue',
          label: '进出口总额（亿美元）',
        },
        {
          prop: 'trscg',
          label: '社会消费品零售总额（亿元）',
        },
        {
          prop: 'urbanPcdi',
          label: '城镇居民人均可支配收入（元）',
        },
        {
          prop: 'cz',
          label: '财政',
        },
        {
          prop: 'gbr',
          label: '一般公共预算收入（亿元）',
        },
        {
          prop: 'gbrGrowth',
          label: '一般公共预算收入增速',
        },
        {
          prop: 'taxIncome',
          label: '税收收入（亿元）',
        },
        {
          prop: 'transferIncome',
          label: '转移性收入（亿元）',
        },
        {
          prop: 'superiorSubsidyIncome',
          label: '上级补助收入（亿元）',
        },
        {
          prop: 'gbe',
          label: '一般公共预算支出（亿元）',
        },
        {
          prop: 'govFundIncome',
          label: '政府性基金收入（亿元）',
        },
        {
          prop: 'landTransferIncome',
          label: '土地出让收入（亿元）',
        },
        {
          prop: 'govFundExpenditure',
          label: '政府性基金支出（亿元）',
        },
        {
          prop: 'soecoi',
          label: '国有资本经营收入（亿元）',
        },
        {
          prop: 'soecoe',
          label: '国有资本经营支出（亿元）',
        },
        {
          prop: 'zw',
          label: '债务',
        },
        {
          prop: 'govDebtBalance',
          label: '地方政府债务余额（亿元）',
        },
        {
          prop: 'generalDebtBalance',
          label: '一般债余额（亿元）',
        },
        {
          prop: 'specialDebtBalance',
          label: '专项债余额（亿元）',
        },
        {
          prop: 'govDebtLimit',
          label: '地方政府债务限额（亿元）',
        },
        {
          prop: 'uipInterestBearingDebt',
          label: '城投平台有息债务（亿元）',
        },
        {
          prop: 'fiscalSelfSufficiencyRate',
          label: '财政自给率',
        },
        {
          prop: 'govDebtToGdpRate',
          label: '负债率',
        },
        {
          prop: 'govDebtToGdpRateWild',
          label: '负债率-宽口径',
        },
        {
          prop: 'govDebtRate',
          label: '债务率',
        },
        {
          prop: 'govDebtRateWild',
          label: '债务率-宽口径',
        },
      ],
      tableLoading: true
    }
  },
  created() {
    this.dataRegion()
  },
  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: {
    //地区
    dataRegion() {
      regionalEconomy(this.params).then(res => {
        this.tableData = res.data
        this.tableLoading = false
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.regionalEconomies{
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  ::v-deep .el-table tr{
    background: #F9FCFF;
  }
  ::v-deep .table-item{
    .el-table{
      .el-table__body-wrapper{
        tr{
          &:first-child{
            background: #F0F3FA;
            div{
              color: rgba(35,35,35,0.8);
            }
          }
          &:nth-child(2n){
            background: #FFFFFF;
          }
        }
      }
    }
  }
  .query-box{
    margin: 10px 0 20px;
    .params-dw{
      font-size: 14px;
      font-weight: 400;
      color: #0081FF;
      img{
        width: 14px;
        height: 14px;
        margin-right: 5px;
      }
    }
  }
}

::v-deep .el-table__body-wrapper tr:nth-child(2) td:first-child,
::v-deep .el-table__body-wrapper tr:nth-child(16) td:first-child,
::v-deep .el-table__body-wrapper tr:nth-child(28) td:first-child{
  font-weight: bold;
  color: #232323;
}

</style>
