<template>
  <Map ref="map" />
  <NavBar />
  <BasicInfo />
  <div v-if="showReset" class="reset" @click="resetMap">
    <n-icon class="icon" size=".14rem">
      <svg-icon :data="resetIcon" original />
    </n-icon>
  </div>
  <FilterDrawer @boundary="setBoundary" @close="resetMap" />
  <ActivityDrawer @close="resetMap" />
  <StructModal @close="resetMap" />
  <BuildingDetailDrawer />
</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 BuildingDetailDrawer from './components/building-detail-drawer.vue'
import resetIcon 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()
  store.commit('SET_MAP_POINTS')
}
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
  }
}

// 塞入统一标题字段名_labelKey,  收集同一坐标点位
function checkSamePositionPoints(arr: any[]) {
  const points: any[] = []
  const len = arr.length || 0
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (
        arr[i]['上海2000纬度'] === arr[j]['上海2000纬度'] &&
        arr[i]['上海2000经度'] === arr[j]['上海2000经度']
      ) {
        j = ++i
      }
    }
    points.push(arr[i])
  }
  return points.map((item) => {
    const samePoints = arr.filter(
      (e) =>
        e['上海2000纬度'] === item['上海2000纬度'] &&
        e['上海2000经度'] === item['上海2000经度'],
    )
    if (samePoints && samePoints.length > 1) {
      return {
        _labelKey: samePoints.length,
        isList: true,
        list: [...samePoints],
        上海2000纬度: samePoints[0]['上海2000纬度'],
        上海2000经度: samePoints[0]['上海2000经度'],
      }
    } else {
      return {
        _labelKey: item['党组织名称']
          ? item['党组织名称']
          : item['号']
          ? item['号']
          : item['姓名'],
        ...item,
      }
    }
  })
}

watch(
  () => store.state.mapPoints,
  (points: any) => {
    map.value.clearPoints()
    if (!points || points.length === 0) return
    const data = checkSamePositionPoints(
      points.map((point) => JSON.parse(JSON.stringify(point))) || [],
    )
    const redPoints: any[] = []
    const bluePoints: any[] = []
    data.forEach((item) => {
      if (item['类别中类'] && item['类别中类'] === '联合支部') {
        bluePoints.push(item)
      } else {
        redPoints.push(item)
      }
    })
    redPoints.length > 0 && map.value.addPoints('红点', redPoints)
    bluePoints.length > 0 && map.value.addPoints('蓝点', bluePoints)
  },
)
</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
.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

.n-drawer-mask
  display none
.n-drawer.n-drawer--right-placement
  top .42rem
  .n-drawer-header
    font-family $font-ping-medium
    font-size .14rem

.esri-ui
  .esri-popup
    border-radius .04rem
    .esri-popup__main-container.esri-widget
      background rgba(249, 250, 250, .9)
      $blur()
      width 3rem
      border-radius inherit
</style>
