<template>
  <div class="main">
    <m-title area="title" @touch="showModal = true"> 静安智慧房管 </m-title>
    <m-grid
      v-if="layout.boxNum > 0"
      :template="layout.template"
      columns="1fr 1.5fr 1fr"
      :rows="`${layout.rows}`"
    >
      <div
        v-for="(_, index) in new Array(layout.boxNum)"
        :key="index"
        class="box"
        :area="`box${index + 1}`"
      >
        <component
          :is="componentList[components[index]]"
          v-if="!!components[index]"
        />
      </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>
</template>

<script lang="ts" setup>
import useLayout from '@/hooks/useLayout'
import useComponent from '@/hooks/useComponent'
import { ref } from 'vue'
import { ajax, api } from '@/ajax'
import { NSpace, NButton } from 'naive-ui'

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)
function check({ configJson }) {
  const config = JSON.parse(configJson)
  config?.layout && (layout.value = config.layout)
  config?.components && (components.value = config.components)
  showModal.value = false
}
</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>
