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

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

  defineOptions({ name: 'UserSearch' })

  // 1. 组件入参定义
  interface SelectOption {
    label: string
    value: string | number
    disabled?: boolean
  }

  interface UserSearchForm {
    keyword?: string
    status?: Api.SystemManage.IdentityUserStatus
    roleId?: string
    createdRange?: [string, string] | []
    lastLoginRange?: [string, string] | []
    includeDeleted?: boolean
    tenantId?: string
  }

  interface Props {
    modelValue: UserSearchForm
    roleOptions: SelectOption[]
    tenantOptions: SelectOption[]
    isSuperAdmin: boolean
  }

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

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

  // 2. 国际化与表单引用
  const { t } = useI18n()
  interface SearchBarExpose {
    validate: () => Promise<void>
  }
  const searchBarRef = ref<SearchBarExpose | null>(null)
  const dateTimeFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZ'

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

  // 4. 状态选项配置
  const statusOptions = computed<SelectOption[]>(() => [
    { label: t('user.status.active'), value: 1 },
    { label: t('user.status.disabled'), value: 2 },
    { label: t('user.status.locked'), value: 3 }
  ])

  // 5. 表单项配置
  const formItems = computed(() => {
    // 1. 构建基础搜索项
    const items = [
      {
        label: t('user.search.keyword'),
        key: 'keyword',
        type: 'input',
        props: {
          placeholder: t('user.search.keywordPlaceholder'),
          clearable: true
        }
      },
      {
        label: t('user.search.status'),
        key: 'status',
        type: 'select',
        props: {
          placeholder: t('user.search.statusPlaceholder'),
          clearable: true,
          options: statusOptions.value
        }
      },
      {
        label: t('user.search.role'),
        key: 'roleId',
        type: 'select',
        props: {
          placeholder: t('user.search.rolePlaceholder'),
          clearable: true,
          filterable: true,
          options: props.roleOptions
        }
      },
      {
        label: t('user.search.createdRange'),
        key: 'createdRange',
        type: 'datetimerange',
        props: {
          unlinkPanels: true,
          rangeSeparator: '-',
          valueFormat: dateTimeFormat,
          startPlaceholder: t('user.search.createdRangeStart'),
          endPlaceholder: t('user.search.createdRangeEnd')
        }
      },
      {
        label: t('user.search.lastLoginRange'),
        key: 'lastLoginRange',
        type: 'datetimerange',
        props: {
          unlinkPanels: true,
          rangeSeparator: '-',
          valueFormat: dateTimeFormat,
          startPlaceholder: t('user.search.lastLoginRangeStart'),
          endPlaceholder: t('user.search.lastLoginRangeEnd')
        }
      },
      {
        label: t('user.search.includeDeleted'),
        key: 'includeDeleted',
        type: 'switch',
        props: {
          inlinePrompt: true,
          activeText: t('user.search.includeDeletedOn'),
          inactiveText: t('user.search.includeDeletedOff')
        }
      }
    ]

    // 2. 超级管理员追加租户筛选
    if (props.isSuperAdmin) {
      items.unshift({
        label: t('user.search.tenant'),
        key: 'tenantId',
        type: 'select',
        props: {
          placeholder: t('user.search.tenantPlaceholder'),
          clearable: true,
          filterable: true,
          options: props.tenantOptions
        }
      })
    }

    return items
  })

  // 6. 重置事件
  const handleReset = () => {
    // 1. 触发外部重置
    emit('reset')
  }

  // 7. 搜索事件
  const handleSearch = async () => {
    // 1. 表单校验
    if (searchBarRef.value) {
      await searchBarRef.value.validate()
    }

    // 2. 触发搜索
    emit('search', formData.value)
  }
</script>
