<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 multiple collapse-tags class="form-content-width" placeholder="请选择">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </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">
      <div class="table-title">
        <span class="title">指标</span>
        <span class="title">
          <span class="address" v-if="value1">{{addressValue1}}<i class="el-icon-circle-close" @click="handleDelete(1)"></i></span>
          <el-cascader
            v-else
            ref="address1"
            :options="addressList"
            :props="props"
            v-model="value1"
            @change="handleChange(1)"
            placeholder="添加地区"></el-cascader>
        </span>
        <span class="title">
          <span class="address" v-if="value2">{{addressValue2}}<i class="el-icon-circle-close" @click="handleDelete(2)"></i></span>
          <el-cascader
            v-else
            ref="address2"
            :options="addressList"
            :props="props"
            v-model="value2"
            @change="handleChange(2)"
            placeholder="添加地区"></el-cascader>
        </span>
        <span class="title">
          <span class="address" v-if="value3">{{addressValue3}}<i class="el-icon-circle-close" @click="handleDelete(3)"></i></span>
          <el-cascader
            v-else
            ref="address3"
            :options="addressList"
            :props="props"
            v-model="value3"
            @change="handleChange(3)"
            placeholder="添加地区"></el-cascader>
        </span>
        <span class="title">
          <span class="address" v-if="value4">{{addressValue4}}<i class="el-icon-circle-close" @click="handleDelete(4)"></i></span>
          <el-cascader
            v-else
            ref="address2"
            :options="addressList"
            :props="props"
            v-model="value4"
            @change="handleChange(4)"
            placeholder="添加地区"></el-cascader>
        </span>
        <span class="title">
          <span class="address" v-if="value5">{{addressValue5}}<i class="el-icon-circle-close" @click="handleDelete(5)"></i></span>
          <el-cascader
            v-else
            ref="address5"
            :options="addressList"
            :props="props"
            v-model="value5"
            @change="handleChange(5)"
            placeholder="添加地区"></el-cascader>
        </span>
      </div>
      <el-table
        :data="getValues"
        :show-header="false"
        border
      >
        <el-table-column
          v-for="(item, index) in getHeaders"
          :key="index"
          :prop="item"
          :label="item"
          width="16.7%"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import dataRegion from '@/assets/json/dataRegion'
export default {
  name: 'comparison',
  data() {
    return {
      queryParams: {
        year: '',
      },
      yearOptions: [
        { name: '2023年', value: '2023' },
        { name: '2022年', value: '2022' },
        { name: '2021年', value: '2021' },
      ],
      tableData: [
        {
          zb:'',
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
      ],
      headers: [
        {
          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: '债务率-宽口径',
        },
      ],
      props: {
        value: 'id',
      },
      addressList: [],
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      value5:'',
      addressValue1:'',
      addressValue2:'',
      addressValue3:'',
      addressValue4:'',
      addressValue5:'',
    }
  },
  created() {
    this.dataRegion()
  },
  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: {
    //地区
    async dataRegion() {
      // await axios.post("https://files.jiansheku.com/file/json/common/dataRegion.json", {}, {
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // }).then(res => {
      //   if (res.data.code == 200) {
      //     console.log(res.data.data)
      //   }
      // })
      var str = [];
      for (let x = 0; x < 3; x++) {
        for (let i = 0; i < dataRegion.length; i++) {
          if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
            str.push({
              'id': dataRegion[i].id,
              "label": dataRegion[i].regionName,
              "short": dataRegion[i].short,
              "value": dataRegion[i].parentId,
              "children": []
            });
          } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
            for (let j = 0; j < str.length; j++) {
              if (str[j].id == dataRegion[i].parentId) {
                str[j].children.push({
                  'id': dataRegion[i].id,
                  "label": dataRegion[i].regionName,
                  "short": dataRegion[i].short,
                  "value": dataRegion[i].parentId,
                  "children": []
                });
              }
            }
          } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
            for (let j = 0; j < str.length; j++) {
              for (let k = 0; k < str[j].children.length; k++) {
                if (str[j].children[k].id == dataRegion[i].parentId) {
                  str[j].children[k].children.push({
                    'id': dataRegion[i].id,
                    "label": dataRegion[i].regionName,
                    "short": dataRegion[i].short,
                    "value": dataRegion[i].parentId
                    // "children":[]
                  });
                }
              }
            }
          }
        }
      }
      this.addressList = str;
    },
    handleChange(index) {
      let arr = '';
      switch (index) {
        case 1:
          arr = this.$refs.address1.getCheckedNodes()
          break;
        case 2:
          arr = this.$refs.address2.getCheckedNodes()
          break;
        case 3:
          arr = this.$refs.address3.getCheckedNodes()
          break;
        case 4:
          arr = this.$refs.address4.getCheckedNodes()
          break;
        case 5:
          arr = this.$refs.address5.getCheckedNodes()
          break;
      }

      for (var i in arr) {
        switch (index) {
          case 1:
            this.addressValue1=arr[i].pathLabels.join('-')
            break;
          case 2:
            this.addressValue2=arr[i].pathLabels.join('-')
            break;
          case 3:
            this.addressValue3=arr[i].pathLabels.join('-')
            break;
          case 4:
            this.addressValue4=arr[i].pathLabels.join('-')
            break;
          case 5:
            this.addressValue5=arr[i].pathLabels.join('-')
            break;
        }
      }
    },
    handleDelete(index){
      switch (index) {
        case 1:
          this.addressValue1='';
          this.value1='';
          break;
        case 2:
          this.addressValue2='';
          this.value2='';
          break;
        case 3:
          this.addressValue3='';
          this.value3='';
          break;
        case 4:
          this.addressValue4='';
          this.value4='';
          break;
        case 5:
          this.addressValue5='';
          this.value5='';
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .regionalEconomy{
    width: 100%;
    background: #ffffff;
    padding: 16px 24px 16px 16px;
    margin-top: 12px;
    border-radius: 4px;
    .el-form{
      margin-left: 20px;
      .el-form-item{
        margin: 0 !important;
        .form-content-width{
          width: 110px;
        }
      }
    }
    .table-item{
      margin-top: 22px;
      ::v-deep .el-table{
        .el-table__body{
          width: 100% !important;
          /*.el-table__row:first-child{*/
            /*.el-table__cell{*/
              /*font-weight: bold;*/
              /*color: #232323;*/
            /*}*/
          /*}*/
        }
      }
      .table-title{
        width: 100%;
        display: flex;
        /*justify-content:space-around;*/
        border: 1px solid #E6EAF1;
        border-bottom: 0;
        .title{
          display: inline-block;
          width: 16.7%;
          height: 50px;
          background: #F0F3FA;
          color: rgba(35,35,35,0.8);
          font-size: 12px;
          line-height: 50px;
          padding:0 12px;
          border-right: 1px solid #E6EAF1;
          .address{
            color: rgba(35,35,35,0.8);
            i{
              float: right;
              color:#606163;
              font-size: 15px;
              line-height: 50px;
              cursor: pointer;
            }
          }
          ::v-deep .el-cascader{
            width: 120px;
          }
        }
        .title:last-child{
          border-right:0;
        }
      }
    }
  }
</style>
