gypsy-crm-frontend-vu/components/cwg-complex-search.vue

<template>
    <view class="complex-search">
        <!-- PC/平板端：直接显示表单 -->
        <cwg-match-media :min-width="991">
            <view class="search-bar search-form">
                <view v-for="(row, rowIndex) in displayRows" :key="rowIndex" class="form-row">
                    <view v-for="field in row" :key="field.key" class="form-item">
                        <view class="search-bar">
                            <!-- 根据字段类型渲染不同组件 -->
                            <template v-if="field.type === 'input'">
                                <uni-easyinput v-model="formData[field.key]" :placeholder="field.placeholder || '请输入'"
                                    clearable />
                            </template>
                            <template v-else-if="field.type === 'select'">
                                <cwg-combox v-model:value="formData[field.key]" :options="field.options"
                                    :placeholder="field.placeholder || t('.placeholder.choose')"
                                    :clearable="field.clearable || false"
                                    @change="(e) => field.onChange?.(e) || handleSearch()" />
                            </template>
                            <template v-else-if="field.type === 'date'">
                                <uni-datetime-picker :start="dateLimit.start" :end="dateLimit.end"
                                    v-model="formData[field.key]" type="date"
                                    :placeholder="field.placeholder || t('.placeholder.chooseDate')"
                                    @change="handleDateChange" />
                            </template>
                            <template v-else-if="field.type === 'daterange'">
                                <uni-datetime-picker class="cursor-pointer" :start="dateLimit.start"
                                    :end="dateLimit.end" v-model="formData[field.key]" type="daterange"
                                    :placeholder="field.placeholder || '请选择日期范围'"
                                    :startPlaceholder="t('placeholder.Start')" :endPlaceholder="t('placeholder.End')"
                                    @change="handleDateChange" :data-tooltip="field.placeholder" data-placement="top" />
                            </template>
                            <template v-else-if="field.type === 'picker'">
                                <uni-data-picker class="cursor-pointer" style="min-width: 100px"
                                    v-model="formData[field.key]" :localdata="field.options"
                                    :popup-title="field.popupTitle || t('State.All')"
                                    :map="field.map || { value: 'value', text: 'label' }"
                                    @change="(e) => field.onChange?.(e)"
                                    @nodeclick="(node) => field.onNodeClick?.(node)" :data-tooltip="field.placeholder"
                                    data-placement="top" />
                            </template>
                            <template v-else-if="field.type === 'number'">
                                <uni-easyinput v-model="formData[field.key]" type="number"
                                    :placeholder="field.placeholder || '请输入数字'" />
                            </template>
                        </view>
                    </view>
                </view>
                <view class="form-actions">
                    <button hover-class="" v-if="hasMoreFields" class="search-btn" @click="toggleShowAll">
                        <text>{{ showAllFields ? t('vu.Btn.Hide') : t('vu.Btn.More') }}</text>
                    </button>
                    <button hover-class="" class="search-btn" @click="handleSearch" v-t="'Btn.Search'" />
                </view>
            </view>
        </cwg-match-media>
        <cwg-match-media :max-width="991">
            <!-- 移动端：只显示筛选按钮，点击弹出底部抽屉 -->
            <view class="mobile-filter">
                <view v-if="dateField" class="mobile-date-wrapper">
                    <uni-datetime-picker class="cursor-pointer" :start="dateLimit.start" :end="dateLimit.end"
                        v-model="formData[dateField.key]" :type="dateField.type === 'daterange' ? 'daterange' : 'date'"
                        :placeholder="dateField.placeholder || (dateField.type === 'daterange' ? '选择日期范围' : '选择日期')"
                        :startPlaceholder="t('placeholder.Start')" :endPlaceholder="t('placeholder.End')"
                        @change="handleDateChange" />
                </view>
                <view v-else class="mobile-date-wrapper"></view>
                <button hover-class="" v-if="nonDateField?.length" class="filter-chip" @click="openFilterPopup">
                    <cwg-icon name="cwg-filter" :size="14" color="#141d22" />
                    <text class="filter-label" v-t="'Documentary.tradingCenter.item3'" />
                </button>
            </view>
        </cwg-match-media>

        <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true"
            :title="t('Documentary.tradingCenter.item3')" class="search-dialog">
            <scroll-view scroll-y class="drawer-content" style="overflow: visible;">
                <view v-for="field in nonDateField" :key="field.key" class="filter-item">
                    <view class="label">{{ field.label }}</view>
                    <view class="control">
                        <template v-if="field.type === 'input'">
                            <uni-easyinput v-model="tempFormData[field.key]" :placeholder="field.placeholder || '请输入'"
                                clearable />
                        </template>
                        <template v-else-if="field.type === 'select'">
                            <cwg-combox v-model:value="tempFormData[field.key]" :options="field.options"
                                :placeholder="field.placeholder || '请选择'" :clearable="false" :placement="'bottom'"
                                v-if="shouldUseSelect(field)" />
                            <view class="chip-group" v-else>
                                <view class="chip-list">
                                    <view v-for="opt in field.options" :key="opt.value" class="chip" :class="{
                                        'chip-filled': tempFormData[field.key] === opt.value,
                                        'chip-outlined': tempFormData[field.key] !== opt.value
                                    }" @click="selectChip(field.key, opt.value)">
                                        {{ opt.text }}
                                    </view>
                                </view>
                            </view>
                        </template>
                        <template v-else-if="field.type === 'number'">
                            <uni-easyinput v-model="tempFormData[field.key]" type="number"
                                :placeholder="field.placeholder || '请输入数字'" clearable />
                        </template>
                        <template v-else-if="field.type === 'picker'">
                            <uni-data-picker class="cursor-pointer" v-model="tempFormData[field.key]"
                                :localdata="field.options" :popup-title="field.popupTitle || t('State.All')"
                                :map="field.map || { value: 'value', text: 'label' }"
                                @change="(e) => field.onChange?.(e)" @nodeclick="(node) => field.onNodeClick?.(node)" />
                        </template>
                    </view>
                    <view v-if="nonDateField.length == 1" style="height: 25vh;" />

                </view>
            </scroll-view>
            <template #footer>
                <!-- <button hover-class="" class="reset-btn" @click="resetTempForm" v-t="'Documentary.tradingCenter.item4'" /> -->
                <button hover-class="" class="search-btn" @click="applyFilter" v-t="'Btn.Search'" />
            </template>
        </cwg-popup>

    </view>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { isRouteOnTop } from '@/utils/pageActive'

const { t } = useI18n()

const props = defineProps({
    // 字段配置列表，每个字段包含: key, label, type, options(可选), placeholder(可选)
    fields: {
        type: Array,
        required: true
    },
    // 每行显示的字段数（PC端），默认3个
    columns: {
        type: Number,
        default: 1
    },
    // 不设置默认数据
    noData: {
        type: Boolean,
        default: false
    },
    // 表单初始值 / v-model 绑定值
    modelValue: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:modelValue', 'search', 'reset'])
// 时间选择器限制：今天，近一年
const dateLimit = computed(() => {
    const now = new Date()
    // 结束日期 = 今天
    const endDate = new Date(now)
    // 开始日期 = 今天 - 365天
    const startDate = new Date(now)
    startDate.setDate(startDate.getDate() - 365)

    const format = (d) => {
        const y = d.getFullYear()
        const m = String(d.getMonth() + 1).padStart(2, '0')
        const d2 = String(d.getDate()).padStart(2, '0')
        return `${y}-${m}-${d2}`
    }

    return {
        start: '',
        end: format(endDate)
    }
})

// 获取日期字段的默认值（当前月范围：月初 ~ 今天）
const getDefaultDateValue = (field) => {
    const now = new Date()
    const year = now.getFullYear()
    const month = now.getMonth()

    // 本月1号
    const firstDay = new Date(year, month, 1)
    // 今天
    const today = new Date()
    const formatDate = (date) => {
        const y = date.getFullYear()
        const m = String(date.getMonth() + 1).padStart(2, '0')
        const d = String(date.getDate()).padStart(2, '0')
        return `${y}-${m}-${d}`
    }

    if (field.type === 'daterange') {
        return [formatDate(firstDay), formatDate(today)]
    } else if (field.type === 'date') {
        return formatDate(today)
    }
    return ''
}
// 表单数据（PC端）
const formData = ref({})
// 移动端临时数据
const tempFormData = ref({})
// 移动端弹窗是否可见
const visible = ref(false)
// 是否显示所有字段
const showAllFields = ref(false)

// 将字段按列数分组（仅用于PC布局）
const formRows = computed(() => {
    const rows = []
    for (let i = 0; i < props.fields.length; i += props.columns) {
        rows.push(props.fields.slice(i, i + props.columns))
    }
    return rows
})
const winWidth = computed(() => {
    console.log(window.innerWidth)
    return window.innerWidth
})

// 显示的行（根据 showAllFields 决定）
const displayRows = computed(() => {
    if (showAllFields.value) {
        return formRows.value
    }
    // 默认只显示第一行
    return winWidth.value > 1500 ? formRows.value.slice(0, 4) : formRows.value.slice(0, 3)
})

// 是否有更多字段可以展开
const hasMoreFields = computed(() => {
    return formRows.value.length > (winWidth.value > 1500 ? 4 : 3)
})

// 切换显示/隐藏状态
const toggleShowAll = () => {
    showAllFields.value = !showAllFields.value
}

const selectChip = (key, value) => {
    // 如果点击的是当前已选中的项，可以保持不变，也可以置空（根据需求）
    // 此处保持选中该项，不提供取消功能（符合常见筛选行为）
    tempFormData.value[key] = value
}
// 初始化表单数据
const initFormData = () => {
    const initial = {}
    if (!props.noData) {
        props.fields.forEach(field => {
            // 1. 优先使用外部传入的 modelValue（如果值不为 null 或 undefined）
            if (props.modelValue && props.modelValue[field.key] != null) {
                initial[field.key] = props.modelValue[field.key]
            }
            // 2. 其次使用字段配置的 defaultValue
            else if (field.defaultValue !== undefined) {
                initial[field.key] = field.defaultValue
                return
            }
            // 3. 日期字段特殊处理：默认当前月（即使 modelValue 中存在但为 null/undefined）
            else if (field.type === 'date' || field.type === 'daterange') {
                initial[field.key] = getDefaultDateValue(field)
            }
            // 4. select 类型字段如果没有默认值，默认置空，不强制选第一个
            else if (field.type === 'select') {
                initial[field.key] = null
            }
            // 5. 其他字段默认为空字符串
            else {
                initial[field.key] = ''
            }
        })
    }
    formData.value = initial
    tempFormData.value = JSON.parse(JSON.stringify(initial))
    handleSearch()
}
// 获取第一个日期或日期范围字段（用于移动端顶部快捷显示）
const dateField = computed(() => {
    return props.fields.find(field => field.type === 'date' || field.type === 'daterange')
})
// 判断字段是否应该使用下拉选择器（用于排序和渲染）
const shouldUseSelect = (field) => {
    if (!field.options) return false
    return field.options.length > 10 || field.isSelect === true
}
const handleDateChange = (value) => {
    formData.value[dateField.value.key] = value
    tempFormData.value[dateField.value.key] = value
    // 日期变化时自动触发搜索
    handleSearch()
}
// 排序：输入框 + 下拉选择器 → 前面；Chip 选择器 → 后面
const nonDateField = computed(() => {
    const filtered = props.fields.filter(field => field.type !== 'date' && field.type !== 'daterange')
    const priorityFields = []
    const otherFields = []

    filtered.forEach(field => {
        if (field.type === 'input' || field.type === 'number') {
            priorityFields.push(field)
        }
        else if (field.type === 'select') {
            if (shouldUseSelect(field)) {
                priorityFields.push(field)
            } else {
                otherFields.push(field)
            }
        }
        else if (field.type === 'picker') {
            priorityFields.push(field)
        }
        else {
            otherFields.push(field)
        }
    })
    return [...priorityFields, ...otherFields]
})

const clonePlain = (val) => JSON.parse(JSON.stringify(val ?? {}))
const isEqual = (a, b) => JSON.stringify(a ?? {}) === JSON.stringify(b ?? {})

/** 所属页面 route，离开栈顶后不再 emit search */
const ownerPageRoute = ref('')

/** 仅字段结构变化时重新初始化（语言切换改 label 不触发） */
const getFieldsSignature = (fields) => {
    console.log(fields)
    if (!fields?.length) return ''
    return JSON.stringify(
        fields.filter(Boolean).map((field) => ({
            key: field.key,
            type: field.type,
            defaultValue: field.defaultValue,
            optionsLength: Array.isArray(field.options) ? field.options.length : 0,
            optionValues: Array.isArray(field.options)
                ? field.options.map((o) => o?.value ?? o?.text ?? o)
                : undefined,
        }))
    )
}

let fieldsSignature = ''

// 监听外部 modelValue 变化
watch(() => props.modelValue, (newVal) => {
    if (!newVal) return
    const incoming = clonePlain(newVal)
    const next = { ...formData.value }
    props.fields.forEach(field => {
        if (incoming[field.key] != null) {
            next[field.key] = incoming[field.key]
        } else if (field.type === 'date' || field.type === 'daterange') {
            next[field.key] = getDefaultDateValue(field)
        }
    })
    if (isEqual(next, formData.value)) return
    formData.value = next
    tempFormData.value = clonePlain(next)
}, { deep: true, immediate: true })

// 监听内部 formData 变化，同步到外部
watch(formData, (newVal) => {
    const outgoing = clonePlain(newVal)
    if (isEqual(outgoing, props.modelValue)) return
    emit('update:modelValue', outgoing)
}, { deep: true })

// 重置表单（清空所有字段）
const resetForm = () => {
    const empty = {}
    props.fields.forEach(field => {
        // 有默认值 → 用默认值
        if (field.defaultValue !== undefined) {
            empty[field.key] = field.defaultValue
        }
        // 日期字段 → 用默认日期
        else if (field.type === 'date' || field.type === 'daterange') {
            empty[field.key] = getDefaultDateValue(field)
        }
        // select 类型字段如果没有默认值，置空
        else if (field.type === 'select') {
            empty[field.key] = null
        }
        // 无默认值 → 清空
        else {
            empty[field.key] = ''
        }
    })
    formData.value = empty
    tempFormData.value = JSON.parse(JSON.stringify(empty)) // 👈 加这行
    nextTick(() => {
        tempFormData.value = { ...empty }
        formData.value = { ...empty }

        nextTick(() => {
            if (dateField.value) {
                handleDateChange(formData.value[dateField.value.key])
            }
        })
    })
    emit('reset', empty)
}
// 触发查询
const handleSearch = () => {
    if (!isRouteOnTop(ownerPageRoute.value)) return
    emit('search', { ...formData.value })
}

// 移动端：打开弹窗
const openFilterPopup = () => {
    // 复制当前表单数据到临时对象
    tempFormData.value = JSON.parse(JSON.stringify(formData.value))
    visible.value = true
}

const closePopup = () => {
    visible.value = false
}

const resetTempForm = () => {
    const empty = {}
    props.fields.forEach(field => {
        // 有默认值 → 用默认值
        if (field.defaultValue !== undefined) {
            empty[field.key] = field.defaultValue
        }
        // 日期字段 → 用默认日期
        else if (field.type === 'date' || field.type === 'daterange') {
            empty[field.key] = getDefaultDateValue(field)
        }
        // select 类型字段如果没有默认值，置空
        else if (field.type === 'select') {
            empty[field.key] = null
        }
        // 无默认值 → 清空
        else {
            empty[field.key] = ''
        }
    })
    tempFormData.value = empty
    formData.value = JSON.parse(JSON.stringify(empty)) // 👈 加这行
    // 👇 强制日期组件刷新选中状态
    nextTick(() => {
        formData.value = { ...empty }
        tempFormData.value = { ...empty }

        nextTick(() => {
            if (dateField.value) {
                handleDateChange(formData.value[dateField.value.key])
            }
            handleSearch()
        })
    })
}
const applyFilter = () => {
    // 将临时数据同步到正式表单
    formData.value = JSON.parse(JSON.stringify(tempFormData.value))
    closePopup()
    handleSearch()
}

// 仅 fields 结构变化时重新初始化
watch(
    () => props.fields,
    (fields) => {
        const nextSig = getFieldsSignature(fields)
        if (nextSig === fieldsSignature) return
        fieldsSignature = nextSig
        initFormData()
    },
    { deep: false }
)

onMounted(() => {
    const pages = getCurrentPages()
    ownerPageRoute.value = pages[pages.length - 1]?.route || ''
    fieldsSignature = getFieldsSignature(props.fields)
    initFormData()
})

</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.complex-search {
    width: 100%;
}

.search-bar {

    .cwg-combox,
    .uni-easyinput {
        width: px2rpx(240) !important;
        flex: none;
    }

    :deep(.uni-easyinput__content) {
        height: px2rpx(35) !important;
        min-height: px2rpx(35) !important;
    }

    :deep(.uni-easyinput__content-input) {
        height: px2rpx(35) !important;
    }

    .uni-date {
        width: px2rpx(250) !important;
        flex: none;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: px2rpx(10);

        .reset-btn,
        .search-btn {
            background-color: var(--btn-color);
            height: px2rpx(35);
            min-height: px2rpx(35);
            line-height: px2rpx(35);
            padding: 0 px2rpx(16);
            margin: 0;
            box-sizing: border-box;
            font-size: px2rpx(14);
        }

        .toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: px2rpx(4);
            background: transparent;
            border: none;
            color: #666;
            font-size: px2rpx(14);
            line-height: px2rpx(35);
            padding: 0 px2rpx(12);
            cursor: pointer;

            &::after {
                border: none;
            }

            &:active {
                opacity: 0.7;
            }
        }
    }
}

.mobile-filter {
    margin-bottom: px2rpx(10);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: px2rpx(12);

    .mobile-date-wrapper {
        flex: 1;
    }

    .filter-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(12);
        background-color: #ffffff;
        border: 1px solid #e5e5e5;
        border-radius: px2rpx(4);
        padding: px2rpx(0) px2rpx(8);
        font-size: px2rpx(16);
        font-weight: 500;
        color: var(--bs-emphasis-color);
        line-height: px2rpx(35);
        transition: all 0.2s ease;
        box-shadow: none;

        .iconfont,
        .uni-icons {
            font-size: 32rpx;
            color: var(--bs-emphasis-color);
        }

        /* 按下反馈效果 */
        &:active {
            transform: scale(0.96);
            background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
            /* 轻量点击背景色 */
            border-color: #b9bfc7;
        }

        &::after {
            border: none;
        }
    }
}

/* 弹窗整体优化 */
.drawer-content {
    padding: px2rpx(20);
    border-radius: px2rpx(16);
    //min-height: 40vh;
    box-sizing: border-box;

    .label {
        font-size: px2rpx(18);
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: px2rpx(20);
        letter-spacing: px2rpx(1);
    }

    :deep(.uni-scroll-view) {
        //min-height: px2rpx(200);
    }

    :deep(.uni-scroll-view-content) {
        display: flex;
        flex-direction: column;
        gap: px2rpx(20);
        overflow: visible;
    }

    :deep(uni-button) {
        line-height: px2rpx(35);
    }

    /* ========== Chip 胶囊样式 (移动端筛选弹窗) ========== */
    .chip-group {
        margin-bottom: px2rpx(20);

        .chip-list {
            display: flex;
            flex-wrap: wrap;
            gap: px2rpx(16);
        }

        .chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: px2rpx(4) px2rpx(12);
            border-radius: px2rpx(64);
            font-size: px2rpx(14);
            font-weight: 500;
            transition: all 0.2s ease;
            background-color: #ffffff;
            border: px2rpx(1) solid #d1d5db;
            color: var(--bs-emphasis-color);
            cursor: pointer;

            &:active {
                transform: scale(0.96);
            }

            /* 填充样式（选中） */
            &.chip-filled {
                background-color: #cf1322;
                border-color: #cf1322;
                color: #ffffff;
            }

            /* 轮廓样式（未选中） */
            &.chip-outlined {
                background-color: #ffffff;
                border-color: #d1d5db;
                color: var(--bs-emphasis-color);
            }
        }
    }


}

.search-dialog {
    .search-btn {
        color: var(--btn-color);
    }
}
</style>