<template>
  <div class="app-container">
    <Region v-if="province" :province="province" :dataQuery="dataQuery" @addressListbtn="addressListbtn"></Region>
    <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>-->
        <!--&lt;!&ndash;<el-select v-model="provinceId" class="cascader-region">&ndash;&gt;-->
          <!--&lt;!&ndash;<el-option&ndash;&gt;-->
            <!--&lt;!&ndash;v-for="(item,index) in addressList"&ndash;&gt;-->
            <!--&lt;!&ndash;:key="index"&ndash;&gt;-->
            <!--&lt;!&ndash;:label="item.label"&ndash;&gt;-->
            <!--&lt;!&ndash;:value="item.id"&ndash;&gt;-->
            <!--&lt;!&ndash;@click.native="addressListbtn(item.label,item.id)"&ndash;&gt;-->
          <!--&lt;!&ndash;&gt;</el-option>&ndash;&gt;-->
        <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
      <!--</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 Region from '../component/region'
  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,
    Region
  },
  data() {
    return {
      activeName: 'first',
      dataQuery:{},
      province:'',
      props: {
        value: 'id',
        label: 'label',
        checkStrictly: true
      },
      addressList: [],
      address:'',
      provinceId:[]
    }
  },
  created() {
    //使用JSON方法深拷贝
    let data = JSON.parse(JSON.stringify(this.$route.query))
    this.dataQuery=data;
    if(this.dataQuery.provinceId){
      if(Array.isArray(this.dataQuery.province)){
        this.province=this.dataQuery.province[0];
      }else {
        this.province=this.dataQuery.province
        this.dataQuery.province = [this.dataQuery.province];
      }
      if(Array.isArray(this.dataQuery.provinceId)){
        this.provinceId=this.dataQuery.provinceId
      }else {
        if(this.dataQuery.cityId){
          this.provinceId=[this.dataQuery.provinceId,this.dataQuery.cityId,this.dataQuery.areaId]
        }else if(this.dataQuery.cityId){
          this.provinceId=[this.dataQuery.provinceId,this.dataQuery.cityId]
        }else {
          this.provinceId=[this.dataQuery.provinceId]
        }
      }
    }else {
      location({}).then(res => {
        if(localStorage.getItem('location')){
          if(res.data.area){
            this.province=res.data.area
          }else {
            if(res.data.city){
              this.province=res.data.city
            }else {
              this.province=res.data.province
            }
          }
          if(!this.dataQuery.provinceId){
            if(res.data.areaId){
              this.dataQuery.provinceId=[res.data.provinceId,res.data.cityId,res.data.areaId]
              this.provinceId=[res.data.provinceId,res.data.cityId,res.data.areaId]
            }else {
              if(res.data.cityId){
                this.provinceId=[res.data.provinceId,res.data.cityId]
              }else {
                this.provinceId=[res.data.provinceId]
              }
            }
            let arr=[res.data.province]
            this.dataQuery.province=arr;
          }else {
            this.provinceId=this.dataQuery.provinceId
          }
        }else {
          this.province=res.data.province
          if(!this.dataQuery.provinceId){
            this.provinceId=[res.data.provinceId]
            let arr=[res.data.province]
            this.dataQuery.province=arr;
          }else {
            this.provinceId=this.dataQuery.provinceId
          }
        }
      })
    }
    if(this.dataQuery.activeName){
      this.activeName=this.dataQuery.activeName;
    }
    // let name = sessionStorage.getItem('currentTab')
    // if (name != "undefined" && name){
    //   this.activeName = name;
    // }
  },
  methods: {
    handleClick(key,item) {
      if(key === 'four'){
        this.activeName=key
      }
      if(key === 'first'){
        this.activeName=key
      }
      if(key === 'second'){
        this.activeName=key
      }
      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[item.province.length-1];
        this.dataQuery=item;
      }
      // sessionStorage.setItem('currentTab', this.activeName)
    },

    addressListbtn(data) {
      this.province=data.province;
      this.provinceId=data.provinceId;
      this.dataQuery.province=data.provinces;
      let params={}
      if(data){
        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]
        }
      }
      location(params).then(res => {
        // console.log(res.data)
      })
    }
  }
}
</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>
