<template>
  <m-loader v-if="loading" background="#000">
    <p style="color: #fff; margin-top: 0.3rem">地图初始化…</p>
  </m-loader>
  <m-grid
    :template="['title title title', 'left . right']"
    columns="16vw auto 49vw"
    rows="0.4rem auto"
    gap="0.05rem"
  >
    <m-title area="title">南东城运</m-title>
    <m-map
      ref="map"
      :config="{ center: [-75.5563452697323, -718.3061904627932], zoom: 8 }"
      @complete="handleComplete"
      @event="handleMapClick"
    />
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <LeftSection area="left" />
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <RightSection area="right" />
    </m-animate>
    <div class="btns">
      <div
        v-for="btn in btns"
        :key="btn"
        :class="{ on: btn === curBtn }"
        @click="handleClick(btn)"
      >
        <p>{{ btn }}</p>
      </div>
    </div>
  </m-grid>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
import store from '@/store'
import point from '@/assets/images/point.png'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'Main',
  components: { LeftSection, RightSection },
  setup() {
    const loading = ref(true)
    const initData = (id: unknown) => {
      store.dispatch('initCommunityData', id || '527635870583459840')
    }
    onMounted(() => {
      initData(useRoute().query.id)
    })
    store.commit('SET_CURRENT_VIEW', { name: '', type: 'community' }) // 使标题不显示公共的3个按钮
    const map = ref<any>(null)
    const initMap = () => {
      const points = map.value.addPoint({
        key: 'test',
        size: [100, 500],
        icon: point,
        data: [{ name: '测试', x: -275.5563452697323, y: -718.3061904627932 }],
      })
      console.log('points', points)
    }
    const handleMapClick = (e: any) => {
      console.log('point-data: ', e)
    }
    const handleComplete = (instance: any) => {
      instance.getLayer('model_white_zhenxing2').visible = true
      instance.getLayer('model_white_zhenxing2').opacity = 0.8
      // instance.getLayer('model_white_zw').visible = true
      // instance.getLayer('model_white_WEIHAI33').visible = true
      // instance.getLayer('model_white_zw').opacity = 0.8
      // instance.getLayer('model_white_WEIHAI33').opacity = 0.8
      let i = -90
      map.value.rotate(i)
      setTimeout(() => {
        loading.value = false
        setTimeout(() => {
          const timer = setInterval(() => {
            i += 2
            if (i > 0) {
              setTimeout(() => {
                map.value.focus(-75.5563452697323, -718.3061904627932, 9)
              }, 500)
              clearInterval(timer)
              initMap()
            }
            map.value.rotate(i)
          }, 2)
        }, 1000)
      }, 7000)
    }
    const btns = ref(['微更新', '电梯加装', '智能监控', '楼宇安全'])
    const curBtn = ref<string | null>(null)
    const handleClick = (btn: string) => {
      if (curBtn.value === btn) {
        curBtn.value = null
        return
      }
      curBtn.value = btn
    }
    return {
      loading,
      map,
      handleComplete,
      handleMapClick,
      btns,
      curBtn,
      handleClick,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../components/MyComponent/main.styl'
.btns
  position fixed
  z-index 9999
  width 35vw
  left 16vw
  bottom .1rem
  display flex
  justify-content space-around
  >div
    min-width 1.1rem
    text-align center
    background url('@/assets/images/map-btn-bg.png') 100% / 100% 100% no-repeat
    font-family $font-zcool
    font-size .18rem
    color #ccc
    cursor pointer
    opacity .8
    transition all .3s ease-in-out
    position relative
    p
      transform translateY(-40%)
    &:hover
      color #fff
      opacity 1
    &.on
      color #fff
      opacity 1
      p
        -webkit-box-reflect below -0.17rem linear-gradient(transparent, rgba(255,255,255,.6))
      &:after
        content ''
        display block
        position absolute
        height .06rem
        bottom 0
        left 0
        right 0
        background rgba(91,213,255,.4)
        box-shadow 0 0 0.1rem 0.02rem rgba(91,213,255,.5)
</style>
