<template>
  <div class="regionalEconomies regional-economy">
    <div class="head-form-new">
      <div class="common-title">区域经济</div>
      <div class="flex-box query-box">
        <div class="flex-box query-params">

        </div>
        <div class="params-dw"><img src="@/assets/images/addree.png" />{{ addressList }}</div>
      </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;
      }
    }
  }
}

.regional-economy {
  @import "@/assets/styles/search-common.scss";

  .head-form-new {
    .common-title {
      padding-bottom: 8px;
    }
    .query-box {
      margin: 0px;
    }
  }
}

::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>
