<template>
  <Map ref="map" />
  <NavBar />
  <BasicInfo />
  <div v-if="showReset" class="reset" @click="resetMap">
    <n-icon class="icon" size=".14rem">
      <svg-icon :data="reset" original />
    </n-icon>
  </div>
  <FilterDrawer @boundary="setBoundary" @close="resetMap" />
  <ActivityDrawer />
  <StructModal />

  <!-- <InforModal class="fix1" /> -->
  <!-- <ListModal class="fix2" pagination /> -->
  <!-- <ActivityDetail class="fix1" /> -->
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import Map from './components/map.vue'
import NavBar from './components/nav-bar.vue'
import BasicInfo from './components/basic-info.vue'
import FilterDrawer from './components/filter-drawer.vue'
import ActivityDrawer from './components/activity-drawer.vue'
import StructModal from './components/struct-modal.vue'
import InforModal from './components/info-modal.vue'
import ListModal from './components/list-modal.vue'
import ActivityDetail from './components/activity-detail.vue'
import reset from '@images/reset.svg'
import store from '@/store'

store.dispatch('getAuth')
store.dispatch('getMenus')

const showReset = computed(() => store.state.showBasicInfo)
const map = ref<any>()
const resetMap = () => map.value && map.value.resetMap()
const setBoundary = ({ type, name }: { type: string; name: string }) => {
  if (!map.value) return
  switch (type) {
    case 'building':
      map.value.showBuilding(name)
      break
    case 'community':
      map.value.showCommunity(name)
      break
    case 'committee':
      map.value.showCommittee(name)
      break
    case 'area':
      map.value.showArea(name)
      break
    default:
      break
  }
}
watch(
  () => store.state.mapPoints,
  (points: any) => {
    map.value.clearPoints()
    console.log('开始撒点：')
    if (!points || points.result?.length === 0) return
    const data = {
      labelKey: points.labelKey,
      result: points.result?.map((point) => JSON.parse(JSON.stringify(point))),
      // result: points.result?.map((point) => Object.assign({}, point)),
    }
    console.log(data)
    map.value.addPoints('党组织撒点图层', data)
  },
)
</script>

<style lang="stylus">
@import '../components/MyComponent/main.styl'
.reset
  height .3rem
  width @height
  border-radius .02rem
  position fixed
  top .48rem
  left 3.1rem
  background $white-bg
  box-sizing border-box
  $center()
  cursor pointer
  &:hover
    .icon
      color $red
.fix1
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
.fix2
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  margin-left 4rem

.n-form-item-label__asterisk
  color $red !important
.n-input .n-input-wrapper
  background #F9FAFB
  border-radius inherit
.n-base-selection .n-base-selection-label
  background #F9FAFB

.n-empty
  margin .1rem 0
</style>
