<template>
  <m-modal
    v-model="visible"
    title="添加组件"
    width="30vw"
    height="80vh"
    :mask-closable="false"
  >
    <div class="container">
      <div class="tabs">
        <div
          v-for="tab in tabList"
          :key="tab.key"
          class="tab"
          :class="{ on: curTab === tab.key }"
          @click="curTab = tab.key"
        >
          {{ tab.name }}
        </div>
      </div>
      <div class="list">
        <template v-if="componentKeys.length > 0">
          <template v-for="key in componentKeys">
            <div
              v-if="componentList[key].row == rows"
              :key="key"
              class="component"
              :class="{ checked: curComponent === key }"
              @click.prevent.stop="onSelect(key)"
            >
              <component :is="componentList[key]" />
            </div>
          </template>
        </template>
        <m-empty v-else text="暂无组件" />
      </div>
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { computed, PropType, ref, watch } from 'vue'
import useComponent from '@/hooks/useComponent'

const props = defineProps({
  modelValue: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
  rows: {
    type: Number as PropType<number>,
    default: 1,
  },
})
const emit = defineEmits(['update:modelValue', 'select'])
const visible = ref(false)
watch(
  () => props.modelValue,
  (val) => (visible.value = val),
)
watch(
  () => visible.value,
  (val) => {
    emit('update:modelValue', val)
    if (!val) {
      curTab.value = '1'
      curComponent.value = ''
    }
  },
)
const { componentList, tabs } = useComponent()
const curTab = ref('1')
const tabList = [
  { name: '物业', key: '1', list: tabs['物业'] },
  { name: '市场', key: '2', list: tabs['市场'] },
  { name: '修缮', key: '3', list: tabs['修缮'] },
  { name: '保障', key: '4', list: tabs['保障'] },
]
const componentKeys = computed(
  () => tabList.find((e) => e.key === curTab.value)?.list || [],
)
const curComponent = ref('')
const onSelect = (key: string) => {
  if (curComponent.value === key) return
  curComponent.value = key
  emit('select', key)
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.container
  height 100%
  display flex
  flex-direction column
  .list
    flex 1
    overflow-x hidden
    overflow-y auto
    margin-top .1rem
    .component
      position relative
      cursor pointer
      border .01rem solid transparent
      margin-bottom .05rem
      transition border .2s ease-in-out
      &:after
        content ''
        display block
        position absolute
        top 0
        bottom 0
        left 0
        right 0
        background rgba(0,0,0,.1)
      &:hover
        border .01rem solid #4270B3
      &.checked
        &:before
          z-index 9
          position absolute
          top .08rem
          right .08rem
          content ''
          display inline-block
          background url('/src/assets/images/checked.png') center/100% 100% no-repeat
          width .12rem
          height @width
  .tabs
    display flex
    background rgba(70,83,97,.5)
    border-radius .04rem
    width 100%
    justify-content space-around
    box-shadow 0 0.01rem 0.01rem 0 rgba(255,255,255,.2) inset
    .tab
      padding .04rem .2rem
      cursor pointer
      color gray
      border-top .01rem solid transparent
      font-size .09rem
      &:hover
        font-weight bold
        color #fff
        font-size .1rem
      &.on
        font-weight bold
        color #fff
        font-size .1rem
        background linear-gradient(to bottom, rgba(50,197,255,.5), transparent)
        border-top .01rem solid rgba(50,197,255,.8)
</style>
