<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"> 南东城运{{ 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.key"
        :class="{ on: btn.key === curBtn }"
        @click="handleClick(btn.key)"
      >
        <p>{{ btn.name }}</p>
      </div>
    </div>
    <SiteSelector />
    <img
      class="rotate-btn"
      src="@/assets/images/map-btn5.png"
      @click="rotateAngle"
    />
    <m-drawer v-model="showDrawer" width="32vw">
      <div class="community-device">
        <p>类型：{{ drawerInfo.key }}</p>
        <p>名称：{{ drawerInfo.relationName }}</p>
        <div v-if="drawerInfo.beforPhoto">
          <p>改造前</p>
          <img :src="drawerInfo.beforPhoto" />
        </div>
        <div v-if="drawerInfo.afterPhoto">
          <p>改造后</p>
          <img :src="drawerInfo.afterPhoto" />
        </div>
      </div>
    </m-drawer>
  </m-grid>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
import LeftSection from '@/view/community/left-section.vue'
import RightSection from '@/view/community/right-section.vue'
import SiteSelector from '@/view/community/site-selector.vue'
import store from '@/store'
import point from '@/assets/images/point.png'
import point1 from '@/assets/images/point1.png'
import point2 from '@/assets/images/point2.png'
import point3 from '@/assets/images/point3.png'
import point4 from '@/assets/images/point4.png'
import point5 from '@/assets/images/point5.png'
import point6 from '@/assets/images/point6.png'
import point7 from '@/assets/images/point7.png'
import { useRoute } from 'vue-router'
import { ajax, api } from '@/ajax'

export default defineComponent({
  name: 'Main',
  components: { LeftSection, RightSection, SiteSelector },
  setup() {
    const rotation = ref(0)
    const rotateAngle = () => {
      rotation.value += 90
      if (rotation.value >= 360) {
        rotation.value = 0
      }
      map.value.rotate(rotation.value)
      setTimeout(() => {
        focusCenterAndAddLayer()
      }, 1000)
      // map.value.cameraTo({ heading: rotation.value })
    }
    const loading = ref(true)
    const title = computed(
      () => store.state.communityInfo.bigscreenCommunityName
    )
    const communityOptions = computed(() => store.state.communityOptions)
    const route = useRoute()
    const curId = ref<unknown>(null)
    const initData = (id: unknown) => {
      store.dispatch('initCommunityData', id)
    }
    const map = ref<any>(null)
    onMounted(async () => {
      curId.value = route.query.id || communityOptions.value[0].type
      initData(curId.value)
      store.commit(
        'SET_CURRENT_VIEW',
        communityOptions.value.find((item) => item.type == curId.value)
      ) // 使标题不显示公共的3个按钮
      await nextTick()
      map.value.initMap()
    })
    const points = ref<any>(null)
    const initMapPoints = (key: string, data: any[]) => {
      const getIcon = (classification: string, type: string) => {
        if (classification === '摄像头') return point
        if (classification === '为老设施') return point7
        if (type.indexOf('车棚') >= 0) return point2
        if (type.indexOf('充电') >= 0) return point5
        if (type.indexOf('电梯加装') >= 0) return point3
        if (type.indexOf('垃圾箱') >= 0) return point6
        return point4 // 默认为美丽家园-微更新
      }
      const pointData = data.map((item: any) => {
        const position = item.coordinate && item.coordinate.split(',')
        return Object.assign({}, item, {
          name: item.id,
          x: position && +position[0],
          y: position && +position[1],
          icon: getIcon(item.classification, item.relationName),
        })
      })
      console.log(pointData)
      points.value = map.value.addPoint({
        key: key,
        size: [100, 500],
        data: pointData,
      })
    }
    function focusCenterAndAddLayer() {
      if (!curId.value) return
      const result: any = {
        '527635870583459840': {
          zoom: 9.7608,
          layer: () =>
            (map.value.layer('model_white_zhenxing2').visible = true),
          '0': [-135.98002789627407, -722.1597065437004],
          '90': [-261.131359, -858.028878],
          '180': [-404.248674, -746.05425],
          '270': [-276.2336, -653.842881],
        },
        '527635870583459841': {
          zoom: 10,
          layer: () => (map.value.layer('model_white_WEIHAI33').visible = true),
          '0': [-38.73075358777865, -569.7527629458657],
          '90': [-136.813679, -682.12363],
          '180': [-275.05377, -587.065673],
          '270': [-187.394221, -483.549497],
        },
      }
      const cur = result[curId.value as string]
      map.value.focus(...cur[rotation.value], cur.zoom)
      return cur
    }
    const showDrawer = ref(false)
    const drawerInfo = ref<any>({})
    const handleMapClick = (e: any) => {
      console.log('point-data: ', e)
      drawerInfo.value = e
      showDrawer.value = true
    }
    async function showCommunityPoints() {
      const { content } = (
        await ajax.get({
          url: api.GET_COMMUNITY_IDS,
          params: { bigscreenCommunityId: curId.value },
        })
      ).data
      map.value.setFilter(content)
      map.value.showCommunity()
    }
    const handleComplete = () => {
      map.value.layer('model_white_zw').visible = false
      showCommunityPoints()
      focusCenterAndAddLayer().layer()
      loading.value = false

      // setTimeout(() => {
      //   loading.value = false
      //   setTimeout(() => {
      //     map.value.cameraTo({ heading: 180 })
      //     setTimeout(() => {
      //       map.value.cameraTo({ heading: 360 })
      //       setTimeout(() => {
      //         map.value.focus(...center, zoom)
      //       }, 1000)
      //     })
      //   }, 2000)
      // }, 7000)

      // let i = -90
      // map.value.rotate(i)
      // setTimeout(() => {
      //   loading.value = false
      //   setTimeout(() => {
      //     const timer = setInterval(() => {
      //       i += 10
      //       if (i > 0) {
      //         setTimeout(() => {
      //           map.value.focus(...center, zoom)
      //         }, 500)
      //         clearInterval(timer)
      //       }
      //       map.value.rotate(i)
      //     }, 100)
      //   }, 1000)
      // }, 5000)
    }
    const btns = ref([
      { name: '美丽家园', key: '微更新' },
      { name: '周边设施', key: '小区设施' },
      { name: '监控设施', key: '摄像头' },
    ])
    if (curId.value === '527635870583459841') {
      btns.value = [
        { name: '美丽家园', key: '微更新' },
        { name: '加装电梯', key: '电梯加装' },
        { name: '周边设施', key: '小区设施' },
        { name: '监控设施', key: '摄像头' },
      ]
    }

    // 点击下方分类撒点
    const curBtn = ref<string | null>(null)
    const handleClick = async (key: string) => {
      map.value.remove(points.value)
      if (curBtn.value === key) {
        curBtn.value = null
        showCommunityPoints()
        return
      }
      const pointList = (
        await ajax.get({
          url: api.GET_COMMUNITY_FACILITY,
          params: {
            bigscreenCommunityId: curId.value,
            classification: key,
            pageSize: 1000,
          },
        })
      ).data.content
      if (key === '小区设施') {
        const { content } = (
          await ajax.get({
            url: api.GET_COMMUNITY_FACILITY,
            params: {
              bigscreenCommunityId: curId.value,
              classification: '为老设施',
              pageSize: 1000,
            },
          })
        ).data
        pointList.push(...content)
      }
      initMapPoints(key, pointList)
      map.value.hideCommunity()
      curBtn.value = key
    }
    return {
      rotation,
      rotateAngle,
      loading,
      title,
      map,
      handleComplete,
      showDrawer,
      drawerInfo,
      handleMapClick,
      btns,
      curBtn,
      handleClick,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../components/MyComponent/main.styl'
.rotate-btn
  width .2rem
  height @width
  position fixed
  right calc(49vw + .1rem)
  top .45rem
  z-index 999
  cursor pointer
  transition transform .3s ease
  &:hover
    transform-origin right top
    transform scale(1.2)
.community-device
  $full()
  overflow hidden
  img
    width 3rem
.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>
