<!-- components/SearchForm.vue -->
<template>
  <el-form :model="formModel" label-width="100px" size="default" label-position="top">
    
      <el-row :gutter="20">
        <template v-for="item in config" :key="item.prop">
        <!-- 所有字段都用相同的响应式布局 -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-if="item.type === 'input'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder || `请输入${item.label}`"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-else-if="item.type === 'select' && item.api">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-select
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder || `请选择${item.label}`"
              clearable
              filterable
              :filter-method="getFilterMethod(item)"
              :loading="item.loading"
              @focus="handleFocus(item)"
            >
              <el-option
                v-for="opt in item.options"
                :key="opt[item.valueKey || 'value']"
                :label="opt[item.labelKey || 'label']"
                :value="opt[item.valueKey || 'value']"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-else-if="item.type === 'select'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-select
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder || `请选择${item.label}`"
              clearable
              :filterable="item.filterable !== false"
              :multiple="item.multiple"
            >
              <el-option
                v-for="opt in item.options"
                :key="opt[item.valueKey || 'value']"
                :label="opt[item.labelKey || 'label']"
                :value="opt[item.valueKey || 'value']"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-else-if="item.type === 'checkbox-group'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-checkbox-group v-model="formModel[item.prop]">
              <el-checkbox
                v-for="opt in item.options"
                :key="opt[item.valueKey || 'value']"
                :label="opt[item.valueKey || 'value']"
              >
                {{ opt[item.labelKey || 'label'] }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-else-if="item.type === 'date'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-date-picker
              v-model="formModel[item.prop]"
              type="date"
              :placeholder="item.placeholder || `请选择${item.label}`"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6" :lg="6" v-else-if="item.type === 'daterange'">
          <el-form-item :label="item.label" :prop="item.prop">
            <el-date-picker
              v-model="formModel[item.prop]"
              type="daterange"
              :range-separator="item.rangeSeparator || '至'"
              :start-placeholder="item.startPlaceholder || '开始日期'"
              :end-placeholder="item.endPlaceholder || '结束日期'"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              clearable
            />
          </el-form-item>
        </el-col>
        </template>
      </el-row>

  </el-form>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import request from '@/utils/request'

function debounce(func, wait) {
    let timeout
    return function (...args) {
        clearTimeout(timeout)
        timeout = setTimeout(() => func.apply(this, args), wait)
    }
}

const props = defineProps({
    config: { type: Array, required: true }
})

const formModel = reactive({})

// ========================
// 公共请求方法
// ========================
async function fetchOptions(item, keyword = '') {
    const payload = {
        ...(item.requestParams || {}),
        pageNo: item.pageNo || 1,
        pageSize: item.pageSize || 20
    }

    if (keyword) {
        const keyField = item.keywordField || 'keyword'
        payload[keyField] = keyword.trim()
    }

    const res = await request({
        url: item.api,
        method: item.method || 'POST',
        data: payload
    })

    let list = []
    if (typeof item.transform === 'function') {
        list = item.transform(res)
    } else if (res?.data?.records) {
        list = res.data.records
    } else if (res?.data?.list) {
        list = res.data.list
    } else if (Array.isArray(res?.data)) {
        list = res.data
    } else if (res?.data?.data && Array.isArray(res.data.data)) {
        list = res.data.data
    }

    return list
}

// ========================
// 创建搜索函数（带防抖）
// ========================
function createSearchFn(item) {
    const search = async (keyword) => {
        item.loading = true
        try {
            if (!keyword) {
                // 关键词清空 → 恢复默认选项（从缓存）
                item.options = item._defaultOptions ? [...item._defaultOptions] : []
            } else {
                // 有关键词 → 远程搜索
                const list = await fetchOptions(item, keyword)
                item.options = list
            }
        } catch (e) {
            console.error(`${item.label} 搜索失败`, e)
            item.options = []
        } finally {
            item.loading = false
        }
    }
    return debounce(search, item.debounceWait ?? 300)
}

// ========================
// 初始化
// ========================
onMounted(async () => {
    for (const item of props.config) {
        // 初始化表单值
        if (['checkbox-group', 'daterange'].includes(item.type)) {
            formModel[item.prop] = item.defaultValue ?? []
        } else {
            formModel[item.prop] = item.defaultValue ?? ''
        }

        // 处理带 api 的 select（hybrid 模式）
        if (item.type === 'select' && item.api) {
            item.options = []
            item.loading = true
            try {
                // 1. 加载默认数据（不传 keyword）
                const defaultList = await fetchOptions(item, '')
                item._defaultOptions = [...defaultList] // 缓存
                item.options = defaultList
            } catch (e) {
                console.error(`加载 ${item.label} 默认选项失败`, e)
                item.options = []
            } finally {
                item.loading = false
            }
        }
    }
})

// ========================
// 提供给 el-select 的 filter-method
// ========================
function getFilterMethod(item) {
    if (!item._searchFn) {
        item._searchFn = createSearchFn(item)
    }
    return (keyword) => {
        item._searchFn(keyword)
        return true // 必须返回 true，否则下拉框会关闭
    }
}

// 可选：聚焦时确保有数据（一般不需要，因为 onMounted 已加载）
function handleFocus(item) {
    // 如果意外为空，可重试
    if (item.type === 'select' && item.api && (!item.options || item.options.length === 0)) {
        // 可加 loading 重试逻辑（略）
    }
}

// 暴露方法
defineExpose({
    getSearchParams() {
        const params = {}
        for (const key in formModel) {
            const val = formModel[key]
            if (val === '' || val === null || val === undefined) continue
            if (Array.isArray(val) && val.length === 0) continue
            params[key] = val
        }
        return params
    },
    resetForm() {
        props.config.forEach(item => {
            if (['checkbox-group', 'daterange'].includes(item.type)) {
                formModel[item.prop] = []
            } else {
                formModel[item.prop] = ''
            }
        })
    },
    getRawForm() {
        return { ...formModel }
    }
})
</script>