<!-- 产业 -->
<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" />
      <Pop ref="popularAttractionsPopRef" v-if="showPopularAttractionsPop" @close="showPopularAttractionsPop = false" />
    </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";
import { getPopularAttractionsList } from '@/api/ywts/cyjj/cy'
import Pop from "./popup.vue";
export default {
  name: 'CY',
  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, ListPage, Pop },
  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'),
      showPopularAttractionsPop: false, // 显示热门景点弹窗
    }
  },
  mounted() {
    this.selectIndex = 'ponitBtn'
    clearResetMap()
    // TODO: 设置默认选中图层
    //  清除弹窗展示
    this.$bus.$on('clear', () => {
      this.showPopularAttractionsPop = false // 是否显示景点的popup
    })
    // TODO: 获取企业点位数据
  },
  methods: {
    async btnClick(e) {
      console.log('==44444444444==', e);
      clearResetMap()
      this.showPopularAttractionsPop = false, // 是否显示景点的popup
      this.selectIndex = typeof e === 'string' ? e : e.target.id
      // TODO: 清除各种弹窗
      switch (this.selectIndex) {
        case "ponitBtn":
          // TODO: 获取企业点位数据
          break
        case "environmentBtn":
          // TODO: 获取营商环境数据
          break
        case "scenicBtn":
          this.fetchPopularAttractionsList()
          break
      }
    },
    // 获取热门景点列表
    fetchPopularAttractionsList() {
      const icon = require('@/assets/images/icon/产业/scenicSpot.png')
      getPopularAttractionsList().then(response => {
        if(response.code === 200) {
          clearResetMap()
          response.data.value.forEach(item => {
            AddLabelPoint(
              item.id,
              item.name,
              icon,
              [item.lon, item.lat, 0], 'cy', item,
              this.clickPopularAttractionsMarker)
          })
        }
      })
      // const tempData = [
      //   {
      //     id: '1',
      //     lon: '114.87365',
      //     lat: '25.76118',
      //     name: '1111',
      //     todayMoney: '1111',
      //     allMoney: '11111',
      //     todayPerson: '111111',
      //     allPerson: '1111111',
      //     location: '11111111',
      //   },
      //   {
      //     id: '2',
      //     lon: '114.87365',
      //     lat: '25.76818',
      //     name: '112211',
      //     todayMoney: '11211',
      //     allMoney: '111211',
      //     todayPerson: '11123211',
      //     allPerson: '111123232111',
      //     location: '11112323232321222111',
      //   },
      // ]
      // tempData.forEach(item => {
      //       AddLabelPoint(
      //         item.id,
      //         item.name,
      //         icon,
      //         [item.lon, item.lat, 0], 'cy', item,
      //         this.clickPopularAttractionsMarker)
      //     })
    },
    // 点击景点点位
    clickPopularAttractionsMarker(eventArg) {
      const showPopularAttractionsPop = (e) => {
        const item = e._data.data
        this.showPopularAttractionsPop = true
        this.$nextTick(() => {
          console.log('点击热门景点点位信息', item, this.showPopularAttractionsPop);
          this.$refs.popularAttractionsPopRef.initData(item)
        })
      }
      if (this.showPopularAttractionsPop) {
        this.showPopularAttractionsPop = false
        setTimeout(() => {
          showPopularAttractionsPop(eventArg)
        }, 100);
      }
      else {
        showPopularAttractionsPop(eventArg)
      }
    },
  }
}
</script>

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