<template>
  <!-- <Map ref="map" /> -->
  <NavBar @focus="showTag = false" @blur="showTag = true" />
  <BasicInfo :visible="showTag" />
  <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" />
  <ActivityDrawer />
  <StructModal />

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

<script lang="ts" setup>
import { computed, ref } 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'

const showTag = ref(true)
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 'community':
      map.value.showCommunity(name)
      break
    case 'committee':
      map.value.showCommittee(name)
      break
    case 'area':
      map.value.showArea(name)
      break
    default:
      break
  }
}
</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>
