<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>重庆市</div>
    </div>
    <RegionalEconomy v-if="activeName === 'first'"></RegionalEconomy>
    <LocalEconomy v-if="activeName === 'second'"></LocalEconomy>
    <Comparison v-if="activeName === 'third'"></Comparison>
    <IndustrialStructure v-if="activeName === 'four'"></IndustrialStructure>
  </div>
</template>

<script>
  import RegionalEconomy from './component/regionalEconomy'
  import LocalEconomy from './component/localEconomy'
  import Comparison from './component/comparison'
  import IndustrialStructure from './component/industrialStructure'
export default {
  name: 'Economies',
  components: {
    RegionalEconomy,
    LocalEconomy,
    Comparison,
    IndustrialStructure,
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  created() {
    let name = sessionStorage.getItem('currentTab')
    if (name != "undefined" && name){
      this.activeName = name;
    }
  },
  methods: {
    handleClick() {
      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>
