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

<script setup lang="ts">
  import { useI18n } from 'vue-i18n'
  import { TenantStatus } from '@/enums/TenantStatus'
  import { TenantVerificationStatus } from '@/enums/TenantVerificationStatus'

  interface TenantSearchForm {
    tenantName: string
    contactName: string
    contactPhone: string
    status?: TenantStatus
    verificationStatus?: TenantVerificationStatus
  }

  interface Props {
    modelValue: TenantSearchForm
  }

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

  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

  const { t } = useI18n()

  const searchBarRef = ref()

  // 表单数据双向绑定
  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

  // 搜索项配置
  const formItems = computed(() => [
    {
      label: t('tenant.search.tenantName'),
      key: 'tenantName',
      type: 'input',
      placeholder: t('tenant.search.tenantNamePlaceholder'),
      clearable: true
    },
    {
      label: t('tenant.search.contactName'),
      key: 'contactName',
      type: 'input',
      placeholder: t('tenant.search.contactNamePlaceholder'),
      clearable: true
    },
    {
      label: t('tenant.search.contactPhone'),
      key: 'contactPhone',
      type: 'input',
      placeholder: t('tenant.search.contactPhonePlaceholder'),
      clearable: true
    },
    {
      label: t('tenant.search.status'),
      key: 'status',
      type: 'select',
      clearable: true,
      placeholder: t('tenant.search.statusPlaceholder'),
      options: [
        { label: t('tenant.status.pendingReview'), value: TenantStatus.PendingReview },
        { label: t('tenant.status.active'), value: TenantStatus.Active },
        { label: t('tenant.status.suspended'), value: TenantStatus.Suspended },
        { label: t('tenant.status.expired'), value: TenantStatus.Expired },
        { label: t('tenant.status.closed'), value: TenantStatus.Closed }
      ]
    },
    {
      label: t('tenant.search.verificationStatus'),
      key: 'verificationStatus',
      type: 'select',
      clearable: true,
      options: [
        { label: t('tenant.verificationStatus.draft'), value: TenantVerificationStatus.Draft },
        { label: t('tenant.verificationStatus.pending'), value: TenantVerificationStatus.Pending },
        {
          label: t('tenant.verificationStatus.approved'),
          value: TenantVerificationStatus.Approved
        },
        { label: t('tenant.verificationStatus.rejected'), value: TenantVerificationStatus.Rejected }
      ]
    }
  ])

  const rules = {}

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

  const handleReset = () => {
    emit('reset')
  }
</script>
