<template>
  <ArtSearchBar
    ref="searchBarRef"
    v-model="formData"
    :items="formItems"
    @reset="handleReset"
    @search="handleSearch"
  />
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useI18n } from 'vue-i18n'

  interface PackageSearchForm {
    keyword: string
    isActive?: boolean | ''
  }

  interface Props {
    modelValue: PackageSearchForm
  }

  interface Emits {
    (e: 'update:modelValue', value: PackageSearchForm): void
    (e: 'search', params: PackageSearchForm): void
    (e: 'reset'): void
  }

  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()
  const { t } = useI18n()

  const searchBarRef = ref()

  // 1. 透传表单模型
  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

  // 2. 搜索项配置
  const formItems = computed(() => [
    {
      label: t('tenantPackage.search.keyword'),
      key: 'keyword',
      type: 'input',
      placeholder: t('tenantPackage.search.keywordPlaceholder'),
      clearable: true
    },
    {
      label: t('tenantPackage.search.status'),
      key: 'isActive',
      type: 'select',
      clearable: true,
      options: [
        { label: t('tenantPackage.search.statusAll'), value: '' },
        { label: t('tenantPackage.search.statusEnabled'), value: true },
        { label: t('tenantPackage.search.statusDisabled'), value: false }
      ]
    }
  ])

  const handleSearch = () => {
    emit('search', formData.value)
  }

  const handleReset = () => {
    emit('reset')
    searchBarRef.value?.reset?.()
  }
</script>
