<template>
  <m-grid
    :template="['title title title', 'left . right']"
    columns="20vw auto 49vw"
    rows="0.4rem auto"
    gap="0.05rem"
  >
    <m-title area="title" @click="showDrawer = false">南东城运</m-title>
    <m-map ref="map" @complete="handleMapComplete" />
    <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 @full="fullScreen = $event" />
    <m-drawer v-model="showDrawer">
      <CaseDrawer />
      <!-- <PopulationDrawer /> -->
    </m-drawer>
  </m-grid>
</template>

<script lang="ts">
import { computed, defineComponent, ref } 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 { ajax, api } from '@/ajax'

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)

    ajax
      .get({
        url: api.GET_CASE,
      })
      .then((res) => {
        console.log(res)
      })

    const handleMapComplete = () => {
      console.log('complete', map.value)
      map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
    }
    return {
      map,
      curViewType,
      curTheme,
      streetComponentList,
      fullScreen,
      showDrawer,
      handleMapComplete,
    }
  },
})
</script>

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