<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 tabs"
          :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">
          <div
            v-for="key in componentKeys"
            :key="key"
            class="component"
            :class="{ checked: curComponent === key }"
            @click.prevent.stop="onSelect(key)"
          >
            <component :is="componentList[key]" />
          </div>
        </template>
        <m-empty v-else text="暂无组件" />
      </div>
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { computed, PropType, ref, watch } from 'vue'
import list, { components } from '@/utils/component-list'

const props = defineProps({
  modelValue: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
})
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 curTab = ref('1')
const tabs = [
  { name: '物业', key: '1', list: components['物业'] },
  { name: '市场', key: '2', list: components['市场'] },
  { name: '修缮', key: '3', list: components['修缮'] },
  { name: '保障', key: '4', list: components['保障'] },
]
const componentKeys = computed(
  () => tabs.find((e) => e.key === curTab.value)?.list || [],
)
const componentList = computed(() => 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
      &:hover
        border .01rem solid $primary-border
      &.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>
