<template>
  <div class="header">
    <div class="tab flex a-c">
      <div
        class="tab-item"
        :class="{active: activeIndex === item.id}"
        v-for="item in tabList"
        :key="item.id"
        @click="setActiveIndex(item.id)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
import {setStorage, getStorage} from '@/utils/localStorage.js'

export default {
  name: '',
  data() {
    return {
      tabList: [
        {id: 1, label: '机动路线规划'},
        // {id: 2, label: '临时部署驻地分析'},
      ],
      activeIndex: 1,
    }
  },
  mounted() {
    this.activeIndex = getStorage('activeIndex') || 1
  },

  beforeDestroy() {
    setStorage('activeIndex', 1)
  },
  methods: {
    setActiveIndex(id) {
      if (this.activeIndex !== id) {
        this.activeIndex = id
        setStorage('activeIndex', id)
        this.$bus.$emit('setActiveIndex', this.activeIndex)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
$label_height: 50px;

.header {
  width: 100%;
  height: 100%;
  background-color: #2f705f;
  .tab {
    margin-left: 50px;
    width: 680px;
    height: 100%;
    color: #fff;
    &-item {
      height: $label_height;
      line-height: $label_height;
      padding: 0 30px;
      margin-right: 20px;
      // font-family: 'HarmonyOS Sans';
      font-weight: 400;
      font-size: 20px;
      cursor: pointer;
      transition: background 0.3s ease;

      &.active {
        background-image: url('@/assets/image/tab-active.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
