<template>
  <div class="regionalEconomy">
    <div class="content content1">
      <div class="common-title">经济数据</div>
      <div class="content-box">
        <div class="item">
          <div class="item-title"><i style="background: #4E8EFF;"></i>2022年GDP</div>
          <div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_up.png"></div>
          <div id="echartsGDP" style="height: 75px;"></div>
          <div class="item-text up">较2021年上升<span>26.7%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #718AFF;"></i>2022年GDP增速</div>
          <div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_down.png"></div>
          <div id="echartsZS" style="height: 75px;"></div>
          <div class="item-text down">较2021年下降<span>26.7%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #3AD0D1;"></i>2022年人口</div>
          <div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_down.png"></div>
          <div id="echartsRK" style="height: 75px;"></div>
          <div class="item-text down">较2021年下降<span>26.7%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #FFBE5D;"></i>2022年一般公共预算收入</div>
          <div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_up.png"></div>
          <div id="echartsSR" style="height: 75px;"></div>
          <div class="item-text up">较2021年上升<span>26.7%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #FF8935;"></i>2000年地方政府债务余额</div>
          <div class="item-count"><span>29,129.03 </span>亿<img src="@/assets/images/economies/icon_up.png"></div>
          <div id="echartsYE" style="height: 75px;"></div>
          <div class="item-text up">较2021年上升<span>26.7%</span></div>
        </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</label><i>家</i></span>
        <span><img src="@/assets/images/economies/icon_5.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>
  import * as echarts from 'echarts';
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,
      labelData:[2021,2022],
      valData:[23201,35201]
    }
  },
  created() {
    this.$nextTick(()=>{
      this.initChart()
      this.initChart1()
      this.initChart2()
      this.initChart3()
      this.initChart4()
    })
  },
  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: {
    initChart() {
      let myChart = echarts.init(document.getElementById("echartsGDP"))
      let option ={
        tooltip: {
          show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.labelData,
          show:false,
        },
        yAxis: {
          type: 'value',
          show:false,
        },
        grid: {
          top:20,
          // left:15,
          // right:15,
          bottom:0,
        },
        series: [
          {
            data: this.valData,
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            label: {
              show: true,
              position: 'top'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 1,
              color: "#4E8EFF",
            },
            itemStyle:{
              color: "#4E8EFF",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                    color: "#DFEAFF",
                },
                {
                  offset: 1,
                  color: "#5895FF",
                },
              ]),
            },
          }
        ]
      }
      myChart.setOption(option);
    },
    initChart1(){
      let myChartZS = echarts.init(document.getElementById("echartsZS"))
      let option ={
        tooltip: {
          show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.labelData,
          show:false,
        },
        yAxis: {
          type: 'value',
          show:false,
        },
        grid: {
          top:20,
          bottom:0,
        },
        series: [
          {
            data: this.valData,
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            label: {
              show: true,
              position: 'top'
            },
            itemStyle:{
              color: "#718AFF",
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 1,
              color: "#718AFF",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#E3E8FF",
                },
                {
                  offset: 1,
                  color: "#5B76FD",
                },
              ]),
            },
          }
        ]
      }
      myChartZS.setOption(option);
    },
    initChart2(){
      let myChartRK = echarts.init(document.getElementById("echartsRK"))
      let option ={
        tooltip: {
          show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.labelData,
          show:false,
        },
        yAxis: {
          type: 'value',
          show:false,
        },
        grid: {
          top:20,
          bottom:0,
        },
        series: [
          {
            data: this.valData,
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            label: {
              show: true,
              position: 'top'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 1,
              color: "#3AD0D1",
            },
            itemStyle:{
              color: "#3AD0D1",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#D3F3F3",
                },
                {
                  offset: 1,
                  color: "#60D1D1",
                },
              ]),
            },
          }
        ]
      }
      myChartRK.setOption(option);
    },
    initChart3(){
      let myChartSR = echarts.init(document.getElementById("echartsSR"))
      let option ={
        tooltip: {
          show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.labelData,
          show:false,
        },
        yAxis: {
          type: 'value',
          show:false,
        },
        grid: {
          top:20,
          bottom:0,
        },
        series: [
          {
            data: this.valData,
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            label: {
              show: true,
              position: 'top'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 1,
              color: "#FFAE35",
            },
            itemStyle:{
              color: "#FFBE5D",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#FFE9C6",
                },
                {
                  offset: 1,
                  color: "#FFB535",
                },
              ]),
            },
          }
        ]
      }
      myChartSR.setOption(option);
    },
    initChart4(){
      let myChartYE = echarts.init(document.getElementById("echartsYE"))
      let option ={
        tooltip: {
          show:false
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.labelData,
          show:false,
        },
        yAxis: {
          type: 'value',
          show:false,
        },
        grid: {
          top:20,
          bottom:0,
        },
        series: [
          {
            data: this.valData,
            type: 'line',
            smooth: true,
            emphasis: {
              disabled: true,
              focus: 'none'
            },
            label: {
              show: true,
              position: 'top'
            },
            //设置折线颜色和粗细
            lineStyle: {
              width: 1,
              color: "#FF8935",
            },
            itemStyle:{
              color: "#FF8935",
            },
            //设置面积区域为渐变效果
            areaStyle: {
              color: echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0.2,
                  color: "#FEE5D2",
                },
                {
                  offset: 1,
                  color: "#FF8935",
                },
              ]),
            },
          }
        ]
      }
      myChartYE.setOption(option);
    },
  }
}
</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;
        .item{
          width: 19%;
          .item-title{
            font-size: 12px;
            color: rgba(35,35,35,0.8);
            i{
              width: 2px;
              height: 9px;
              background: #718AFF;
              display: inline-block;
              margin-right: 4px;
            }
          }
          .item-count{
            color: #232323;
            font-size: 14px;
            margin-top: 16px;
            margin-bottom: 6px;
            span{
              font-size: 24px;
            }
            img{
              width: 20px;
              height: 20px;
              margin-left: 22px;
            }
          }
          .item-text{
            font-size: 14px;
            margin-top: 8px;
            color: rgba(35,35,35,0.8);
          }
          .up{
            span{
              color:#0CBC6D;
            }
          }
          .down{
            span{
              color:#FF3C3C;
            }
          }
        }
      }
    }
    .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;
            margin-bottom: -1px;
          }
          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>
