<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" />{{ addressList }}</div>
    </div>
    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
    <div class="table-item" v-if="!isSkeleton">
      <el-table
        :tableLoading="tableLoading"
        :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>

  </div>
</template>

<script>
import dataRegion from '@/assets/json/dataRegion'
import skeleton from '../component/skeleton'
import {
  regionalEconomy
} from '@/api/detail/party-a/urbanLnvestment'
export default {
  name: 'regionalEconomies',
  components: {
    skeleton
  },
  props: ['companyId','companyInfo'],
  data() {
    return {
      addressList:'',
      params: {
        provinceId: this.companyInfo.provinceId,
        cityId: this.companyInfo.cityId
      },
      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: 'fixedInvestment',
          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,
      isSkeleton:true
    }
  },
  created() {
    this.regionalEconomys()
  },
  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: {
    //地区
    regionalEconomys() {
      this.isSkeleton = true
      if(this.companyInfo){
        regionalEconomy(this.params).then(res => {
          this.tableData = res.data
          this.isSkeleton = false
        })
        this.dataRegion(this.companyInfo.provinceId, this.companyInfo.cityId)
      }
    },
    dataRegion(p,c) {
      var str = [];
      for (let x = 0; x < 2; x++) {
        for (let i = 0; i < dataRegion.length; i++) {
          if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
            if(p == dataRegion[i].id){
              str.push(dataRegion[i].regionName)
            }
          } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
            if(c == dataRegion[i].id){
              str.push(dataRegion[i].regionName)
            }
          }
        }
      }
      this.addressList = str.join(' - ');
    },
    formatStatus: function(row, column, cellValue) {
      if(row.title === '经济'||row.title === '财政'||row.title === '债务'){
        return cellValue
      }else {
        return cellValue? cellValue : '--'
      }
    },
    rowStyle(row){
      if (row.row.title === '经济'||row.row.title === '财政'||row.row.title === '债务'){
        return {
          // background: '#FAF5EB',
          color:'#232323',
          fontWeight: 'bold'
        }
      }
    },
  }
}
</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{
      overflow:visible;
      .el-table__body-wrapper{
        overflow:visible;
      }
      .el-table__body{
        tr:first-child{
          position: sticky;
          top:56px;
          z-index: 9;
        }
      }
      td.el-table__cell{
        border-bottom: 0;
      }
      .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,
::v-deep .el-table__body-wrapper tr:nth-child(17) td,
::v-deep .el-table__body-wrapper tr:nth-child(29) td{
  //font-weight: bold;
  //color: #232323;
}

</style>
