<template>
  <div class="search-container">
    <el-form :model="searchForm" inline @submit.prevent>
      <!-- 动态生成的表单项 -->
      <template v-for="item in searchOptions" :key="item.prop">
        <el-form-item v-auth="item.auth || ''" :label="item.label" :prop="item.prop" v-if="!item.slot" :style="{
          minWidth: item.minWidth,
          width: item.width,
          flex: item.width ? '0 0 auto' : '',
        }">
          <!-- 输入框 -->
          <el-input v-if="item.type === 'input'" v-model="searchForm[item.prop]"
            :placeholder="item.placeholder || `请输入${item.label}`" :clearable="item.clearable ?? true"
            :disabled="item.disabled" @blur="handleBlur" />

          <!-- 选择器 -->
          <el-select v-else-if="item.type === 'select'" v-model="searchForm[item.prop]"
            :placeholder="item.placeholder || `请选择${item.label}`" :clearable="item.clearable ?? true"
            :disabled="item.disabled">
            <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>

          <!-- 日期选择器（单个/范围） -->
          <el-date-picker v-else-if="item.type === 'date'" v-model="searchForm[item.prop]"
            :type="item.dateType || 'date'" :range-separator="item.rangeSeparator || '至'"
            :placeholder="item.placeholder"
            :start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
            :value-format="item.valueFormat || 'YYYY-MM-DD'" :clearable="item.clearable ?? true"
            :disabled-date="item.disabledDate" :locale="'zhCn'" />
        </el-form-item>

        <!-- 自定义插槽项 -->
        <el-form-item v-else :label="item.label" :prop="item.prop" :style="{
          minWidth: item.minWidth,
          width: item.width,
          flex: item.width ? '0 0 auto' : '',
        }">
          <slot :name="item.prop" :form="searchForm" />
        </el-form-item>
      </template>

      <!-- 额外插槽：用于插入配置外的自定义项 -->
      <slot name="extra" :form="searchForm" />

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" :loading="buttonLoading" @click="$emit('search')">
          {{ buttonConfig.searchText || '搜索' }}
        </el-button>
        <el-button :loading="buttonLoading" @click="$emit('reset')">
          {{ buttonConfig.resetText || '重置' }}
        </el-button>
        <!-- 按钮区插槽 -->
        <slot name="button" :form="searchForm" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// 定义配置项类型
interface SearchOption {
  prop: string // 绑定的表单字段名
  label: string // 标签文本
  type: 'input' | 'select' | 'date' // 表单类型
  slot?: boolean // 是否为自定义插槽项
  placeholder?: string // 占位符
  clearable?: boolean // 是否显示清空按钮
  disabled?: boolean // 是否禁用
  options?: { label: string; value: any }[] // 下拉/单选/复选选项
  dateType?: 'date' | 'daterange' | 'datetime' | 'datetimerange' // 日期选择器类型
  rangeSeparator?: string // 日期范围分隔符
  startPlaceholder?: string // 日期范围开始占位符
  endPlaceholder?: string // 日期范围结束占位符
  valueFormat?: string // 日期格式
  disabledDate?: (date: Date) => boolean // 禁用日期函数
  width?: string // 宽度
  minWidth?: string // 最小宽度
  auth?: string // 最小宽度
}

// 按钮配置类型
interface ButtonConfig {
  searchText?: string
  resetText?: string
}

// 组件Props
const props = defineProps({
  searchForm: {
    type: Object,
    required: true,
  },
  searchOptions: {
    type: Array as () => SearchOption[],
    required: true,
  },
  buttonConfig: {
    type: Object as () => ButtonConfig,
    default: () => ({}),
  },
  buttonLoading: {
    type: Boolean,
    default: false,
  },
})

// 暴露事件
const emit = defineEmits(['search', 'reset', 'blur-input'])
// 3. 👇 关键：账户名输入完成 → 抛事件给父组件
const handleBlur = () => {
  emit('blur-input')
}
</script>

<style scoped lang="scss">
.search-container {
  margin-bottom: 4px;

  .el-form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 8px;
  }

  :deep(.el-form-item) {
    margin-bottom: 0;
    margin-right: 16px;
    flex: 1 1 auto;
    min-width: 200px;
  }

  :deep(.el-button) {
    margin-left: 8px;
    white-space: nowrap;
  }

  :deep(.el-form-item:last-child) {
    display: flex;
    width: fit-content;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;

    .el-form-item__content {
      justify-content: flex-start;
      row-gap: 4px;
    }
  }
}
</style>