<template>
  <div class="main">
    <m-title area="title" :editable="false"> 静安智慧房管 </m-title>
    <m-grid
      v-if="layout.boxNum > 0"
      :template="layout.template"
      columns="1fr 1.5fr 1fr"
      :rows="`${layout.rows}`"
    >
      <Map ref="mapRef" />
      <div
        v-for="(_, index) in new Array(layout.boxNum)"
        :key="index"
        class="box"
        :area="`box${index + 1}`"
      >
        <m-animate
          :enter="
            layout.template.some((item) => item.startsWith(`box${index + 1}`))
              ? 'fadeInLeft'
              : 'fadeInRight'
          "
          :leave="
            layout.template.some((item) => item.startsWith(`box${index + 1}`))
              ? 'fadeOutLeft'
              : 'fadeOutRight'
          "
        >
          <component
            :is="componentList[components[index]]"
            v-if="!!components[index] && !fullScreen"
          />
        </m-animate>
      </div>
    </m-grid>
    <m-modal v-model="showModal" title="选择展示屏">
      <div class="list-content">
        <div v-for="item in list" :key="item.id" class="item">
          <p>{{ item.configName }}</p>
          <p>{{ item.updateTime }}</p>
          <n-button size="tiny" type="info" ghost dashed @click="check(item)">
            查看
          </n-button>
        </div>
      </div>
    </m-modal>
  </div>
  <MapBtns
    :full-screen="fullScreen"
    :is-default-screen="isDefaultScreen"
    @touch="handleMapBtnsEvents"
  />
</template>

<script lang="ts" setup>
import useLayout from '@/hooks/useLayout'
import useComponent from '@/hooks/useComponent'
import { onMounted, ref, shallowRef } from 'vue'
import { ajax, api } from '@/ajax'
import { NSpace, NButton } from 'naive-ui'
import MapBtns from './components/map-btns.vue'
import Map from './components/map.vue'

const mapRef = shallowRef<any>(null)
const { layout } = useLayout()
const { components, componentList } = useComponent()
const list = ref<any[]>([])
ajax
  .get({ url: api.CONFIGS, params: { configStatus: '1', pageSize: 9000 } })
  .then((res) => {
    list.value = res?.data?.content || []
  })
const showModal = ref(false)
const defaultConfig = {
  layout: {
    template: ['box1 . box3', 'box2 . box4', 'box2 . box5'],
    rows: '1fr 1fr 0.7fr',
    boxNum: 5,
  },
  components: {
    '0': 'A015',
    '1': 'A016',
    '2': 'A017',
    '3': 'A018',
    '4': 'A019',
  },
}
function initConfig() {
  layout.value = defaultConfig.layout
  components.value = defaultConfig.components
  isDefaultScreen.value = true
}
onMounted(initConfig)

const isDefaultScreen = ref(true)
function check({ configJson }) {
  const config = JSON.parse(configJson)
  config?.layout && (layout.value = config.layout)
  config?.components && (components.value = config.components)
  showModal.value = false
  isDefaultScreen.value = false
}

const fullScreen = ref(false)
function handleMapBtnsEvents(key: string) {
  switch (key) {
    case 'list':
      showModal.value = true
      break
    case 'home':
      initConfig()
      break
    case 'full':
      fullScreen.value = !fullScreen.value
      break
    case 'in':
      mapRef.value?.zoomIn()
      break
    case 'out':
      mapRef.value?.zoomOut()
      break
    default:
      break
  }
}
</script>

<style lang="stylus" scoped>
@import '../components/MyComponent/main.styl'
.main
  width 100%
  height 100%
  display flex
  flex-direction column
.box
  border-radius .02rem
  background transparent
  $blur(0)
  position relative
  overflow hidden
.list-content
  max-height 60vh
  overflow-y auto
  >.item
    font-size .12rem
    font-weight bold
    display flex
    align-items center
    padding .05rem
    &:nth-of-type(2n+1)
      background rgba(0,0,0,.5)
    &:hover
      background rgba(255,255,255,.2)
    >p
      flex 1
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      &:nth-of-type(2)
        flex 2
        margin 0 .1rem
</style>
