<template>
  <m-grid
    :template="['title title title', 'left . right']"
    columns="20vw auto 49vw"
    rows="0.4rem auto"
    gap="0.05rem"
  >
    <m-title area="title">南东城运</m-title>
    <m-map
      ref="map"
      width="71vw"
      @complete="handleMapComplete"
      @event="onMapClick"
    />
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <Command v-show="'street' === curViewType && !fullScreen" area="left" />
    </m-animate>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <ManageBasic
        v-show="'street' !== curViewType && !fullScreen"
        area="left"
      />
    </m-animate>

    <m-animate
      v-for="part in streetComponentList"
      :key="part.name"
      enter="fadeInRight"
      leave="fadeOutRight"
    >
      <component
        :is="part.component"
        v-show="
          'street' === curViewType && curTheme === part.name && !fullScreen
        "
        area="right"
      />
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <PublicWork
        v-show="'street' !== curViewType && !fullScreen"
        area="right"
      />
    </m-animate>
    <ViewSelector />
    <MapBtns
      @change="selectArea"
      @full="fullScreen = $event"
      @zoom="handleZoom"
    />
    <m-drawer v-model="showDrawer">
      <CaseDrawer />
      <!-- <PopulationDrawer /> -->
    </m-drawer>
  </m-grid>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, nextTick } from 'vue'
import ManageBasic from './left/manage-basic.vue'
import Command from './left/command.vue'
import PublicWork from './right/public-work.vue'
import PublicManage from './right/public-manage.vue'
import PublicService from './right/public-service.vue'
import PublicSafety from './right/public-safety.vue'
import ViewSelector from './components/view-selector.vue'
import MapBtns from './components/map-btns.vue'
import CaseDrawer from './drawers/case-drawer.vue'
import PopulationDrawer from './drawers/population-drawer.vue'
import store from '@/store'
import useSwitchMap from './hooks/useSwitchMap'

export default defineComponent({
  name: 'Main',
  components: {
    ManageBasic,
    Command,
    PublicWork,
    PublicManage,
    PublicService,
    PublicSafety,
    ViewSelector,
    MapBtns,
    CaseDrawer,
    PopulationDrawer,
  },
  setup() {
    store.dispatch('initData')
    const curViewType = computed(() => store.state.curView.type)
    const curTheme = computed(() => store.state.curTheme)
    const streetComponentList = computed(() => [
      {
        name: 'manage',
        component: PublicManage,
      },
      {
        name: 'service',
        component: PublicService,
      },
      {
        name: 'safety',
        component: PublicSafety,
      },
    ])
    const fullScreen = ref(false)
    const showDrawer = ref(false)
    const map = ref<any>(null)
    onMounted(async () => {
      await nextTick()
      map.value.initMap({ viewMode: '2D' })
      if (!isNaN(+store.state.curView.type)) {
        store.commit('SET_CURRENT_VIEW', {
          name: '南京东路街道',
          type: 'street',
        })
      }
    })
    const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
    const onMapClick = (data: any) => {
      console.log('click: ', data)
    }
    return {
      map,
      curViewType,
      curTheme,
      streetComponentList,
      fullScreen,
      showDrawer,
      handleMapComplete,
      selectArea,
      handleZoom,
      onMapClick,
    }
  },
})
</script>

<style lang="stylus" scoped></style>
