<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择标签"
    width="500px"
    :close-on-click-modal="false"
    top="30vh"
  >
    <div class="space-y-6 px-2">
      <div class="flex items-start gap-4">
        <div class="text-sm text-gray-700 w-16 flex-shrink-0">主标签</div>
        <div class="flex-1">
          <SelectTags v-model="mainTagId" />
        </div>
      </div>

      <div class="flex items-start gap-4">
        <div class="text-sm text-gray-700 w-16 flex-shrink-0">副标签</div>
        <div class="flex-1">
          <SelectTags
            v-model="subTagIdList"
            :max-selected-tags="3"
            :filter-tags-fn="filterTagsFn"
          />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import SelectTags from '@/components/common/SelectTags/index.vue'
import type { TagItemDto } from '@/api'

const dialogVisible = ref(false)

const mainTagId = defineModel<string>('mainTagId', { required: true })
const subTagIdList = defineModel<number[]>('tagList', { required: true })

const open = () => {
  dialogVisible.value = true
}

const filterTagsFn = (allTags: TagItemDto[]) => {
  return allTags.filter((tag) => tag.id !== Number(mainTagId.value))
}
defineExpose({
  open,
})
</script>

<style scoped></style>
