<template>
  <div>
    <div class="video-menu">
      <common-btn id="ponitBtn" :select="selectIndex === 'ponitBtn'" :bg="communityBg" :bg-hover="communityHover"
        width="5" height="5" text-hover="企业点位" @click="btnClick" />
      <common-btn id="environmentBtn" :select="selectIndex === 'environmentBtn'" :bg="environmentBg"
        :bg-hover="environmentHover" width="5" height="5" text-hover="营商环境" @click="btnClick" />
      <common-btn id="scenicBtn" :select="selectIndex === 'scenicBtn'" :bg="scenicBg" :bg-hover="scenicHover"
        width="5" height="5" text-hover="热门景点" @click="btnClick" />
    </div>
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn"
import LayerManagerMix from "@/components/LayerManagerMix"
import KeywordManager from "@/components/KeywordManager"
import TimeManager from "@/components/TimeManager"
import ListPage from "@/components/ListPage";
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import { eventBus } from "../../../../main";
export default {
  name: 'CY',
  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, ListPage, },
  data() {
    return {
      selectIndex: 'ponitBtn',
      communityBg: require('@/assets/images/function/一卡通/场所未选中.png'),
      communityHover: require('@/assets/images/function/一卡通/场所选中.png'),
      environmentBg: require('@/assets/images/function/环卫/基础设施未选中.png'),
      environmentHover: require('@/assets/images/function/环卫/基础设施选中.png'),
      scenicBg: require('@/assets/images/function/交通/重点场所未选中.png'),
      scenicHover: require('@/assets/images/function/交通/重点场所选中.png'),
    }
  },
  methods: {
    async btnClick(e) {
      clearResetMap()
      this.selectIndex = e.target.id
      // TODO: 清除各种弹窗
      switch (this.selectIndex) {
        case "ponitBtn":
          // TODO: 获取企业点位数据
          break
        case "environmentBtn":
          // TODO: 获取营商环境数据
          break
        case "scenicBtn":
          // TODO: 获取热门景点数据
          break
      }
    },
  },
  mounted() {
    this.selectIndex = 'ponitBtn'
    clearResetMap()
    // TODO: 设置默认选中图层
    //  清除弹窗展示
    this.$bus.$on('clear', () => {
      // TODO: 清除各种弹窗
    })
    // TODO: 获取企业点位数据
  }
}
</script>

<style scoped>
.video-menu {
  display: flex;
  z-index: 111111111;
  width: 40rem;
  height: 5rem;
  position: absolute;
  left: 20px;
  top: 1rem;
}
</style>