<template>
  <div class="app-container">
    <div class="flex-box eco-header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="地区经济" name="first"></el-tab-pane>
        <el-tab-pane label="辖区经济" name="second"></el-tab-pane>
        <el-tab-pane label="产业结构" name="third"></el-tab-pane>
        <el-tab-pane label="地区经济对比" name="four"></el-tab-pane>
      </el-tabs>
      <div class="location">
        <span><i class="el-icon-location"></i>{{province}}</span>
        <el-cascader ref="address" class="cascader-region" popper-class='cascader-region-addd'
                     @change="addressListbtn"  v-model="address" :options="addressList" :props="props" collapse-tags></el-cascader>
        <!--<el-select v-model="provinceId" class="cascader-region">-->
          <!--<el-option-->
            <!--v-for="(item,index) in addressList"-->
            <!--:key="index"-->
            <!--:label="item.label"-->
            <!--:value="item.id"-->
            <!--@click.native="addressListbtn(item.label,item.id)"-->
          <!--&gt;</el-option>-->
        <!--</el-select>-->
      </div>
    </div>
    <RegionalEconomy v-if="activeName === 'first' && province" :dataQuery="dataQuery" :provinceId="provinceId"></RegionalEconomy>
    <LocalEconomy v-if="activeName === 'second' && province" :dataQuery="dataQuery" :provinceId="provinceId"></LocalEconomy>
    <IndustrialStructure v-if="activeName === 'third' && province" :dataQuery="dataQuery" :provinceId="provinceId"></IndustrialStructure>
    <Comparison v-if="activeName === 'four' && province" :dataQuery="dataQuery" :provinceId="provinceId"></Comparison>
  </div>
</template>

<script>
  import RegionalEconomy from './component/regionalEconomy'
  import LocalEconomy from './component/localEconomy'
  import Comparison from './component/comparison'
  import IndustrialStructure from './component/industrialStructure'
  import { location } from '@/api/macro/macro'
  import dataRegion from '@/assets/json/dataRegion'
export default {
  name: 'Economies',
  components: {
    RegionalEconomy,
    LocalEconomy,
    Comparison,
    IndustrialStructure,
  },
  data() {
    return {
      activeName: 'first',
      dataQuery:{},
      province:'',
      props: {
        value: 'id',
        label: 'label',
        checkStrictly: true
      },
      addressList: [],
      address:'',
      provinceId:[]
    }
  },
  created() {
    this.dataQuery=this.$route.query;
    // let params={}
    // if(this.dataQuery.provinceId){
    //   params.provinceId=this.dataQuery.provinceId
    // }
    if(this.dataQuery.provinceId){
      this.province=this.dataQuery.province;
      this.provinceId.push(this.dataQuery.provinceId)
    }else {
      location({}).then(res => {
        this.province=res.data.province;
        if(!this.dataQuery.provinceId){
          this.dataQuery.provinceId=res.data.provinceId
          this.dataQuery.province=this.province;
          this.provinceId.push(res.data.provinceId)
        }else {
          this.provinceId.push(this.dataQuery.provinceId)
        }
      })
    }

    if(this.dataQuery.activeName){
      this.activeName=this.dataQuery.activeName;
    }

    this.dataRegion()
    // let name = sessionStorage.getItem('currentTab')
    // if (name != "undefined" && name){
    //   this.activeName = name;
    // }
  },
  methods: {
    handleClick(key,item) {
      if(key === 'four'){
        this.activeName='four'
      }
      if(key === 'first'){
        this.activeName='first'
      }
      if(item.cityId){
        if(this.provinceId.length >= 2){
          this.provinceId.splice(1, 1, item.cityId);
        }else {
          this.provinceId.push(item.cityId)
        }
        if(item.areaId){
          if(this.provinceId.length >= 3){
            this.provinceId.splice(2, 1, item.areaId);
          }else {
            this.provinceId.push(item.areaId)
          }
        }
        this.province=item.province;
      }
      // sessionStorage.setItem('currentTab', this.activeName)
    },
    //地区
    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;
    },
    addressListbtn() {
      let nodesObj = this.$refs.address.getCheckedNodes()[0];
      // console.log(nodesObj)
      this.province=nodesObj.pathLabels[nodesObj.pathLabels.length-1];
      this.provinceId=nodesObj.path;
      this.dataQuery.province=nodesObj.pathLabels;
      // this.dataQuery.provinceId=nodesObj.path[nodesObj.path.length-1];


      // console.log(this.dataQuery)
      // this.province=label;
      // this.provinceId=id;
      // this.dataQuery.provinceId=id;
      // this.dataQuery.province=label;
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 0;
  }
  .eco-header{
    justify-content: space-between;
    height: 48px;
    background: #FFFFFF;
    border-radius: 4px;
    padding:0 16px;
    color: #232323;
    ::v-deep .el-tabs{
      height: 48px;
      line-height: 48px;
      .el-tabs__nav-wrap::after {
        position: static !important;
      }
      .el-tabs__header{
        margin: 0;
        .el-tabs__item{
          padding: 0 16px;
          font-size: 16px;
        }
        .is-active{
          font-weight: bold;
        }
      }
      .el-tabs__content{
        width: 100%;
      }
    }
    .location{
      position: relative;
      span{
        font-size: 14px;
        cursor: pointer;
        color: #0081FF;
        i{
          margin-right: 6px;
          font-size: 16px;
        }
      }
      .cascader-region {
        position: absolute;
        left: 0;
        top: -6px;
        opacity: 0;
        line-height: 22px;
      }
    }
  }
</style>
