<template>
  <div class="changeBase">
    <div class="base-item" @click="handleClick(item.id)" v-for="(item) in buttonLevelList" :key="item.id"
      :style="{ zIndex: activeButton === item.id ? 10 : 1 }">
      <img :src="activeButton === item.id ? item.bgImg  : item.img" :alt="`${item.name}基地`" :title="item.name">
    </div>
  </div>
</template>

<script>
// 导入基地图片（按统一命名规范）
import baseYixing from '@/assets/images/base/宜兴.png';
import baseZhangzhou from '@/assets/images/base/漳州.png';
import baseZigong from '@/assets/images/base/自贡.png';
import baseTongcheng from '@/assets/images/base/桐城.png';
import baseLuoyang from '@/assets/images/base/洛阳.png';
import baseHefei from '@/assets/images/base/合肥.png';
import baseSuqian from '@/assets/images/base/宿迁.png';
import baseQinhuangdao from '@/assets/images/base/秦皇岛.png';

// 导入选中态基地图片
import bgBaseYixing from '@/assets/images/bgBase/宜兴.png';
import bgBaseZhangzhou from '@/assets/images/bgBase/漳州.png';
import bgBaseZigong from '@/assets/images/bgBase/自贡.png';
import bgBaseTongcheng from '@/assets/images/bgBase/桐城.png';
import bgBaseLuoyang from '@/assets/images/bgBase/洛阳.png';
import bgBaseHefei from '@/assets/images/bgBase/合肥.png';
import bgBaseSuqian from '@/assets/images/bgBase/宿迁.png';
import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';

export default {
  name: "BaseSelector",
  props: {
    factory: {
      type: [String, Number],
      default: undefined,
      validator: (val) => [5, 2, 7, 3, 8, 9, 10, 6].includes(val)
    }
  },
  computed: {
    buttonLevelList() {
      let arr = []
      this.$store.getters.levelList.forEach(item => {
        this.buttonList.forEach(item2 => {
          if (item2.id === item.id) {
            arr.push(item2)
          }
        })
      })
      const validIds = [5, 2, 7, 3, 8, 9, 10, 6]
      if (this.factory != null && validIds.includes(Number(this.factory))) {
        this.activeButton = Number(this.factory)
      } else if (arr.length > 0) {
        this.activeButton = arr[0].id
      }
      return arr
    }
  },
  data() {
    return {
      activeButton: undefined,
      buttonList:[
        {id: 5, name: '合肥', img: baseHefei, bgImg: bgBaseHefei},
        {id: 2, name: '桐城', img: baseTongcheng, bgImg: bgBaseTongcheng},
        {id: 7, name: '宜兴', img: baseYixing, bgImg: bgBaseYixing},
        {id: 3, name: '自贡', img: baseZigong, bgImg: bgBaseZigong},
        {id: 8, name: '漳州', img: baseZhangzhou, bgImg: bgBaseZhangzhou},
        {id: 9, name: '洛阳', img: baseLuoyang, bgImg: bgBaseLuoyang},
        {id: 10, name: '秦皇岛', img: baseQinhuangdao, bgImg: bgBaseQinhuangdao},
        {id: 6, name: '宿迁', img: baseSuqian, bgImg: bgBaseSuqian}
      ],
    };
  },
  watch: {
    factory: {
      handler(newVal) {
        if (newVal != null) {
          this.activeButton = Number(newVal);
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClick(id) {
      this.activeButton = id;
      this.$emit('baseChange', id);
    }
  }
};
</script>

<style scoped lang="scss">
.changeBase {
  display: flex;
  width: fit-content;
  align-items: center;

  .base-item {
    width: 234px;
    height: 81px;
    font-family: YouSheBiaoTiHei;
    font-size: 38px;
    line-height: 54px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    margin-right: -35px;
    transition: all 0.2s ease;

    &:hover,
    &:active {
      transform: scale(1.02);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
  }
}
</style>
