<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"><i class="el-icon-location"></i>{{province}}</div>
    </div>
    <RegionalEconomy v-if="activeName === 'first' && province" :dataQuery="dataQuery"></RegionalEconomy>
    <LocalEconomy v-if="activeName === 'second' && province" :dataQuery="dataQuery"></LocalEconomy>
    <IndustrialStructure v-if="activeName === 'third' && province" :dataQuery="dataQuery"></IndustrialStructure>
    <Comparison v-if="activeName === 'four' && province" :dataQuery="dataQuery"></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'
export default {
  name: 'Economies',
  components: {
    RegionalEconomy,
    LocalEconomy,
    Comparison,
    IndustrialStructure,
  },
  data() {
    return {
      activeName: 'first',
      dataQuery:{},
      province:''
    }
  },
  created() {
    this.dataQuery=this.$route.query;
    location({provinceId:'500000'}).then(res => {
      this.province=res.data.currentProvince.regionName;
      this.provinceId=res.data.currentProvince.id;
      if(!this.dataQuery.provinceId){
        this.dataQuery.provinceId=this.provinceId
        this.dataQuery.province=this.province
      }
    })
    console.log(this.dataQuery)
    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) {
      console.log(item)
      if(key === 'four'){
        this.activeName='four'
      }
      // sessionStorage.setItem('currentTab', this.activeName)
    }
  }
}
</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{
      font-size: 14px;
      color: #0081FF;
      i{
        margin-right: 6px;
        font-size: 16px;
      }
    }
  }
</style>
