<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, watch } 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'

export default defineComponent({
  name: 'Main',
  components: {
    ManageBasic,
    Command,
    PublicWork,
    PublicManage,
    PublicService,
    PublicSafety,
    ViewSelector,
    MapBtns,
    CaseDrawer,
    PopulationDrawer,
  },
  setup() {
    // store.commit('SET_CURRENT_VIEW', { name: '南京东路街道', type: 'street' })
    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)
    const mapInstance = ref<any>(null)

    // watch(
    //   () => curViewType.value,
    //   (val) => {
    //     if (!val || !mapInstance.value) return
    //     if (val === 'work1') {
    //       mapInstance.value.getLayer('model_white_dyjd').visible = true // 第一街道名
    //       mapInstance.value.getLayer('model_white_dyjd').opacity = 0.8
    //       mapInstance.value.getLayer('model_white_zw').visible = false
    //     } else {
    //       mapInstance.value.getLayer('model_white_zw').visible = true
    //       mapInstance.value.getLayer('model_white_zw').opacity = 0.8
    //     }
    //   },
    //   { immediate: true }
    // )

    const handleMapComplete = (instance: any) => {
      instance.getLayer('model_white_dyjd').visible = true
      instance.getLayer('model_white_dyjd').opacity = 0.8
      // instance.getLayer('model_white_zw').visible = true
      // instance.getLayer('model_white_zw').opacity = 0.8
      map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
      mapInstance.value = instance
    }
    return {
      map,
      mapInstance,
      curViewType,
      curTheme,
      streetComponentList,
      fullScreen,
      showDrawer,
      handleMapComplete,
    }
  },
})
</script>

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