<template>
  <div class="regionalEconomy">
    <div class="content content1">
      <div class="common-title">经济数据</div>
      <div class="content-box">
        <div>2022年GDP</div>
        <div>2022年GDP增速</div>
        <div>2022年人口</div>
        <div>2022年一般公共预算收入</div>
        <div>2000年地方政府债务余额</div>
      </div>
    </div>
    <div class="content content2">
      <div class="common-title">经济信息</div>
      <div class="content-box">
        <span><img src="@/assets/images/economies/icon_1.png">下属辖区 <label>38</label><i>个</i></span>
        <span><img src="@/assets/images/economies/icon_2.png">地方债余额 <label>10,567.32</label><i>亿</i></span>
        <span><img src="@/assets/images/economies/icon_3.png">专项债项目 <label>10</label><i>个</i></span>
        <span><img src="@/assets/images/economies/icon_4.png">城投平台有息债务 <label>17,710.19</label><i>亿</i></span>
      </div>
    </div>
    <div class="content content3">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">主要指标</span>
        </div>
        <div class="flex-box query-ability">
          <span class="flex-box"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
          <span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
        </div>
      </div>
      <div class="table-item">
        <el-table
          :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>
  </div>
</template>

<script>
export default {
  name: 'regionalEconomy',
  data() {
    return {
      activeName: 'first',
      tableData: [
        {
          zb:"2022年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"2021年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"2020年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"2019年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"2018年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
      ],
      headers: [
        {
          prop: 'zb',
          label: '指标',
        },
        {
          prop: 'name',
          label: '经济',
        },
        {
          prop: 'gdp',
          label: 'GDP（亿元）',
        },
        {
          prop: 'gdpzs',
          label: 'GDP增速',
        },
        {
          prop: 'rjgdp',
          label: '人均GDP（元）',
        },
        {
          prop: 'rjgdp',
          label: '第一产业增加值（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '第二产业增加值（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '第三产业增加值（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '人口（万人）',
        },
        {
          prop: 'rjgdp',
          label: '工业增加值（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '工业总产值（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '房地产开发投资（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '进出口总额（亿美元）',
        },
        {
          prop: 'rjgdp',
          label: '社会消费品零售总额（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '城镇居民人均可支配收入（元）',
        },
        {
          prop: 'cz',
          label: '财政',
        },
        {
          prop: 'rjgdp',
          label: '一般公共预算收入（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '般公共预算收入增速',
        },
        {
          prop: 'rjgdp',
          label: '税收收入（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '转移性收入（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '上级补助收入（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '一般公共预算支出（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '政府性基金收入（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '土地出让收入（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '政府性基金支出（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '国有资本经营收入（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '国有资本经营支出（亿元）',
        },
        {
          prop: 'zw',
          label: '债务',
        },
        {
          prop: 'rjgdp',
          label: '地方政府债务余额（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '一般债余额（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '专项债余额（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '地方政府债务限额（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '城投平台有息债务（亿元）',
        },
        {
          prop: 'rjgdp',
          label: '财政自给率',
        },
        {
          prop: 'rjgdp',
          label: '负债率',
        },
        {
          prop: 'rjgdp',
          label: '负债率-宽口径',
        },
        {
          prop: 'rjgdp',
          label: '债务率',
        },
        {
          prop: 'rjgdp',
          label: '债务率-宽口径',
        },
      ],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0
    }
  },
  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: {
    handleClick() {

    }
  }
}
</script>

<style lang="scss" scoped>
  .regionalEconomy{
    .content{
      width: 100%;
      background: #ffffff;
      padding: 16px;
      margin-top: 12px;
      border-radius: 4px;
    }
    .content1{
      .content-box{
        margin-top: 22px;
        display: flex;
        justify-content: space-between;
        div{
          width: 19%;
        }
      }
    }
    .content2{
      .content-box{
        margin-top: 18px;
        span{
          border-right: 1px solid #E4E4E4;
          display: inline-block;
          color: rgba(35,35,35,0.8);
          font-size: 12px;
          padding-left: 16px;
          img{
            width: 12px;
            height: 12px;
            margin-right: 4px;
          }
          label{
            font-weight: 700;
            color: #232323;
            font-size: 20px;
            margin-left: 12px;
          }
          i{
            color: #232323;
            margin-right: 16px;
            font-style: normal;
            margin-left: 4px;
          }
        }
        span:last-child{
          border-right: 0;
        }
        span:first-child{
          padding-left: 0;
        }
      }
    }
    .table-item{
      margin-top: 22px;
    }
  }
</style>
