<template>
  <div class="regionalEconomy">
    <div class="flex-box query-box">
      <div class="flex-box query-params">
        <span class="common-title">主要指标</span>
        <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
          <el-form-item prop="year">
            <el-select v-model="queryParams.year" filterable class="form-content-width" placeholder="请选择年度" @change="getGroupCount">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.year" :value="item.year" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-box query-ability">
        <span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div id="echarts"  style="height: 400px"></div>
        <p class="tips">  注：数据均来源于统计公报、统计年鉴，实际披露中由于部分地区最新年度数据不全，导致年份间数据差距较大</p>
      </div>
      <div class="content-right">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          height="440"
          border
          highlight-current-row
        >
          <el-table-column label="序号" width="60" align="left">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="产业类型" prop="projectType"></el-table-column>
          <el-table-column :label="oneYear">
            <el-table-column prop="money" label="金额（亿元）"> </el-table-column>
            <el-table-column prop="rate" label="占比"> </el-table-column>
          </el-table-column>
          <el-table-column :label="twoYear">
            <el-table-column prop="lastMoney" label="金额（亿元）"> </el-table-column>
            <el-table-column prop="lastRate" label="占比" > </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { bidGroupCountByProjectType,bidMoneyGroupByProjectType,getYears } from '@/api/macro/macro'
export default {
  name: 'industrialStructure',
  props:{
    dataQuery: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      queryParams: {
        year: '',
        address: ''
      },
      yearOptions: [],
      tableData:[],
      tableLoading: false,
      data:[],
      oneYear:'',
      twoYear:'',
    }
  },
  created() {
    getYears({}).then(res => {
      this.yearOptions=res.data.reverse();
      this.queryParams.year = this.yearOptions[0].year;
    })
    this.getData()
    this.getGroupCount()

    this.$nextTick(()=>{

    })
  },
  methods: {
    getData(){
      let mydate=new Date();
      var startTime, endTime, Year
      Year = mydate.getFullYear();
      startTime=mydate.getFullYear()-2+'-01-01';
      endTime=mydate.getFullYear()-1+'-12-31';
      this.oneYear=mydate.getFullYear()-1+'年';
      this.twoYear=mydate.getFullYear()-2+'年';
      let params={startDate:startTime,endDate:endTime,province:this.dataQuery.provinceId}
      bidMoneyGroupByProjectType(params).then(res => {
        let list=res.data[1].type
        for (let i=0; i<res.data[0].type.length; i++){
          for (let j=0; j<list.length; j++){
            if(res.data[0].type[i].projectType === list[j].projectType){
              list[j].lastMoney=res.data[0].type[i].money;
              list[j].lastRate=res.data[0].type[i].rate;
            }
          }
        }
        this.tableData=list.reverse()
      })
    },
    getGroupCount(){
      let mydate=new Date();
      let startTime=''
      let endTime=''
      if(!this.queryParams.year){
        startTime=mydate.getFullYear()-1+'-01-01';
        endTime=mydate.getFullYear()-1+'-12-31';
      }else {
        startTime=this.queryParams.year+'-01-01';
        endTime=this.queryParams.year+'-12-31';
      }
      bidGroupCountByProjectType({startDate:startTime,endDate:endTime}).then(res => {
        let list=[]
        for(let i=0; i<res.data.length; i++){
          let item={};
          item.name=res.data[i].type
          item.value=res.data[i].count
          list.push(item);
        }
        this.data=list;
        this.initChart()
      })
    },

    initChart() {
      let myChart = echarts.init(document.getElementById("echarts"))
      let option ={
        label: {
          formatter: function (info) {
            var value = info.value
            var treePathInfo = info.treePathInfo
            var treePath = []
            for (var i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name)
            }
            let arr=[treePath[0]]
            arr.push(value)
            return arr.join('\n');
          },
        },
        //鼠标悬停时显示的样式
        tooltip: {
          extraCssText:'width:120px!important;',
          formatter: function (params){
            var result = ''
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.name +'</p>'
            result+='<p style="color: rgba(35,35,35,0.8);padding: 0;margin: 0;">'+ params.value +'</p>'
            return result
          },
        },
        series: [
          {
            type: 'treemap',
            top:'0',
            left:'0',
            right:'0',
            bottom:'20',
            breadcrumb: {
              show: false // 是否显示下面的面包屑导航
            },
            data: this.data
          }
        ]
      }
      myChart.setOption(option);
    },

  }
}
</script>

<style lang="scss" scoped>
  .regionalEconomy{
    width: 100%;
    background: #ffffff;
    padding: 16px;
    margin-top: 12px;
    border-radius: 4px;
    .el-form{
      margin-left: 24px;
      .el-form-item{
        margin: 0 !important;
        .form-content-width{
          width: 100px;
        }
      }
    }
    .content{
      margin-top: 22px;
      display: flex;
      justify-content: space-between;
      .content-left{
        width: 46%;
        .tips{
          color: rgba(35,35,35,0.4);
          font-size: 14px;
        }
      }
      .content-right{
        width: 50%;
      }
    }
  }
</style>
