<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>{{recentlyYear.year}}年GDP</div>
          <div class="item-count">
            <span>{{recentlyYear.gdp}}</span>亿
            <img v-if="recentlyYear.gdpGrowth > 0" src="@/assets/images/economies/icon_up.png">
            <img v-else src="@/assets/images/economies/icon_down.png">
          </div>
          <div id="echartsGDP" style="height: 75px;"></div>
          <div class="item-text up" v-if="recentlyYear.gdpGrowth > 0">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gdpGrowth}}%</span></div>
          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gdpGrowth).toString().substring(1)}}%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #718AFF;"></i>{{recentlyYear.year}}年GDP增速</div>
          <div class="item-count">
            <span>{{recentlyYear.gdpGrowth}}</span>%
            <img v-if="(recentlyYear.gdpGrowth-nextYearMap.gdpGrowth) > 0" src="@/assets/images/economies/icon_up.png">
            <img v-else src="@/assets/images/economies/icon_down.png">
          </div>
          <div id="echartsZS" style="height: 75px;"></div>
          <div class="item-text up" v-if="(recentlyYear.gdpGrowth-nextYearMap.gdpGrowth) > 0">较{{nextYearMap.year}}年上升<span>{{(recentlyYear.gdpGrowth-nextYearMap.gdpGrowth).toFixed(2).toString()}}%</span></div>
          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{(this.recentlyYear.gdpGrowth-this.nextYearMap.gdpGrowth).toFixed(2).toString().substring(1)}}%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #3AD0D1;"></i>{{recentlyYear.year}}年人口</div>
          <div class="item-count">
            <span>{{recentlyYear.population}}</span>万
            <img v-if="recentlyYear.populationGrowthRate > 0" src="@/assets/images/economies/icon_up.png">
            <img v-else src="@/assets/images/economies/icon_down.png">
          </div>
          <div id="echartsRK" style="height: 75px;"></div>
          <div class="item-text up" v-if="recentlyYear.populationGrowthRate > 0">较{{nextYearMap.year}}年上升<span>{{recentlyYear.populationGrowthRate}}%</span></div>
          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{recentlyYear.populationGrowthRate}}%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #FFBE5D;"></i>{{recentlyYear.year}}年一般公共预算收入</div>
          <div class="item-count">
            <span>{{recentlyYear.gbr}}</span>亿
            <img v-if="recentlyYear.gbrGrowth > 0" src="@/assets/images/economies/icon_up.png">
            <img v-else src="@/assets/images/economies/icon_down.png">
          </div>
          <div id="echartsSR" style="height: 75px;"></div>
          <div class="item-text up" v-if="recentlyYear.gbrGrowth > 0">较{{nextYearMap.year}}年上升<span>{{recentlyYear.gbrGrowth}}%</span></div>
          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{Number(recentlyYear.gbrGrowth).toString().substring(1)}}%</span></div>
        </div>
        <div class="item">
          <div class="item-title"><i style="background: #FF8935;"></i>{{recentlyYear.year}}年地方政府债务余额</div>
          <div class="item-count">
            <span>{{recentlyYear.govDebtBalance}}</span>亿
            <img v-if="recentlyYear.govDebtBalance > nextYearMap.govDebtBalance" src="@/assets/images/economies/icon_up.png">
            <img v-else src="@/assets/images/economies/icon_down.png">
          </div>
          <div id="echartsYE" style="height: 75px;"></div>
          <div class="item-text up" v-if="recentlyYear.govDebtBalance > nextYearMap.govDebtBalance">
            较{{nextYearMap.year}}年上升<span>{{((recentlyYear.govDebtBalance - nextYearMap.govDebtBalance)/nextYearMap.govDebtBalance*100).toFixed(2)}}%</span></div>
          <div class="item-text down" v-else>较{{nextYearMap.year}}年下降<span>{{((recentlyYear.govDebtBalance - nextYearMap.govDebtBalance)/nextYearMap.govDebtBalance*100).toFixed(2).toString().substring(1)}}%</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>{{recentlyYear.subordinateJurisdiction}}<i>个</i></label></span>
        <span><img src="@/assets/images/economies/icon_2.png">城投平台 <label>{{recentlyYear.urbanInvestmentPlatform}}<i>家</i></label></span>
        <span><img src="@/assets/images/economies/icon_3.png">城投平台授信余额 <label>{{recentlyYear.creditBalance}}<i>亿</i></label></span>
        <span><img src="@/assets/images/economies/icon_4.png">城投平台营收账款 <label>{{recentlyYear.accountsReceivable}}<i>亿</i></label></span>
        <span><img src="@/assets/images/economies/icon_5.png">城投平台有息债务 <label>{{recentlyYear.uipInterestBearingDebt}}<i>亿</i></label></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" @click="childMethod"><img src="@/assets/images/ability_vs.png">地区经济对比</span>
          <span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
        </div>
      </div>
      <div class="table-item">
        <el-table
          :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>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { regional,regionalList,location } from '@/api/macro/macro'
export default {
  name: 'regionalEconomy',
  props:['dataQuery','provinceId'],
  data() {
    return {
      tableData: [],
      headers: [
        {
          prop: 'year',
          label: '指标',
        },
        {
          prop: 'name',
          label: '经济',
        },
        {
          prop: 'gdp',
          label: 'GDP（亿元）',
        },
        {
          prop: 'gdpAddValue',
          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: 'name',
          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: 'name',
          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: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0,
      labelData:[2021,2022],
      valData:[],
      valData1:[],
      valData2:[],
      valData3:[],
      valData4:[],
      recentlyYear:{},
      nextYearMap:{},
    }
  },
  created() {
    this.getData()
    this.$nextTick(()=>{
      // console.log(this.dataQuery)
    })
  },
  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,});
      });
    },
    // provinceId() {
    //   return this.dataQuery.provinceId
    // }
  },
  watch: {
    dataQuery: {
      handler(newValue, oldValue) {
      },
      deep: true
    },
    provinceId(newValue, oldValue){
      this.getData()
    }
  },
  methods: {
    getData(){
      let params={}
      if(this.dataQuery.id){
        params.id=this.dataQuery.id
      }
      if(this.provinceId.length >= 0){
        params.provinceId=this.provinceId[0]
      }
      if(this.provinceId.length >= 1){
        params.cityId=this.provinceId[1]
      }
      if(this.provinceId.length >= 2){
        params.areaId=this.provinceId[2]
      }
      regional(params).then(res => {
        this.recentlyYear=res.data[0].recentlyYear;
        this.nextYearMap=res.data[0].nextYearMap;
        this.valData=[this.nextYearMap.gdp,this.recentlyYear.gdp]
        this.valData1=[this.nextYearMap.gdpGrowth,this.recentlyYear.gdpGrowth]
        this.valData2=[this.nextYearMap.population,this.recentlyYear.population]
        this.valData3=[this.nextYearMap.gbr,this.recentlyYear.gbr]
        this.valData4=[this.nextYearMap.govDebtBalance,this.recentlyYear.govDebtBalance]
        this.initChart()
        this.initChart1()
        this.initChart2()
        this.initChart3()
        this.initChart4()
      })
      regionalList(params).then(res => {
        this.tableData=res.data;
      })
    },
    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,
          // 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);
      window.addEventListener("resize", function () {
        myChart.resize();//图表跟随页面大小变化宽度
      });
    },
    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.valData1,
            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);
      window.addEventListener("resize", function () {
        myChartZS.resize();//图表跟随页面大小变化宽度
      });
    },
    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.valData2,
            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);
      window.addEventListener("resize", function () {
        myChartRK.resize();//图表跟随页面大小变化宽度
      });
    },
    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.valData3,
            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);
      window.addEventListener("resize", function () {
        myChartSR.resize();//图表跟随页面大小变化宽度
      });
    },
    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,
          // left:5,
          bottom:0,
        },
        series: [
          {
            data: this.valData4,
            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);
      window.addEventListener("resize", function () {
        myChartYE.resize();//图表跟随页面大小变化宽度
      });
    },
    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'
        }
      }
    },
    handleMessage(){
      this.$message({
        message: '功能正在开发中',
        type: 'warning'
      });
    },
    childMethod() {
      let data=this.dataQuery
      data.pId=this.dataQuery.provinceId
      this.$parent.handleClick('four',data);
    }
  }
}
</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;
              margin-bottom: 2px;
            }
          }
          .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;
          width: 20%;
          line-height: 26px;
          img{
            width: 16px;
            height: 16px;
            margin-right: 4px;
            margin-bottom: -4px;
          }
          label{
            font-weight: 700;
            color: #232323;
            font-size: 20px;
            margin-left: 12px;
            float: right;
          }
          i{
            color: #232323;
            margin-right: 16px;
            font-style: normal;
            margin-left: 4px;
            font-weight: 400;
            font-size: 12px;
          }
        }
        span:last-child{
          border-right: 0;
        }
        span:first-child{
          padding-left: 0;
        }
      }
    }
    .table-item{
      margin-top: 22px;
      /*::v-deep .el-table {*/
        /*td.el-table__cell {*/
          /*border-bottom: 0;*/
        /*}*/
      /*}*/
    }
  }
</style>
