<script setup lang="ts">
/**
 * 后台列表筛选条：关键词 + 插槽筛选项 + 搜索/重置。
 * 简单资源与专用列表页复用，避免每页重写一套筛选 UI。
 */
import { reactive, watch } from 'vue'
import type { SchemaFilter } from '../config/resourceSchemas'

const props = withDefaults(defineProps<{
  keyword?: string
  placeholder?: string
  filters?: SchemaFilter[]
  modelValue?: Record<string, unknown>
}>(), {
  keyword: '',
  placeholder: '搜索关键词',
  filters: () => [],
  modelValue: () => ({}),
})

const emit = defineEmits<{
  'update:keyword': [string]
  'update:modelValue': [Record<string, unknown>]
  search: []
  reset: []
}>()

const local = reactive<Record<string, unknown>>({ ...props.modelValue })

watch(() => props.modelValue, (v) => {
  Object.keys(local).forEach(k => delete local[k])
  Object.assign(local, v || {})
}, { deep: true })

function onKeyword(e: { value?: string } | string) {
  const val = typeof e === 'string' ? e : String(e?.value ?? '')
  emit('update:keyword', val)
}

function onFilterChange() {
  emit('update:modelValue', { ...local })
}

function onSearch() {
  emit('update:modelValue', { ...local })
  emit('search')
}

function onReset() {
  Object.keys(local).forEach(k => { local[k] = '' })
  emit('update:keyword', '')
  emit('update:modelValue', {})
  emit('reset')
}
</script>

<template>
  <view class="filter-bar admin-card">
    <wd-input
      :model-value="keyword"
      :placeholder="placeholder"
      clearable
      @update:model-value="onKeyword"
      @confirm="onSearch"
    />
    <view v-for="f in filters.filter(i => i.key !== 'keyword')" :key="f.key" class="filter-row">
      <text class="label text-art-muted">{{ f.label }}</text>
      <wd-input
        v-if="f.type === 'text'"
        :model-value="String(local[f.key] ?? '')"
        :placeholder="f.label"
        clearable
        @update:model-value="(v: string | number) => { local[f.key] = v; onFilterChange() }"
      />
      <wd-picker
        v-else-if="f.type === 'select' && f.options"
        :columns="[f.options.map(o => ({ label: o.label, value: o.value }))]"
        @confirm="({ value }: { value: unknown[] }) => { local[f.key] = (value?.[0] as { value?: unknown })?.value ?? value?.[0] ?? ''; onFilterChange() }"
      >
        <view class="picker-val">
          {{ f.options.find(o => String(o.value) === String(local[f.key] ?? ''))?.label || '请选择' }}
        </view>
      </wd-picker>
    </view>
    <slot />
    <view class="actions">
      <wd-button size="small" type="primary" @click="onSearch">搜索</wd-button>
      <wd-button size="small" plain @click="onReset">重置</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.filter-bar { padding: 20rpx 24rpx; margin-bottom: 20rpx; }
.filter-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-top: 16rpx;
}
.label { font-size: 24rpx; min-width: 100rpx; }
.picker-val {
  flex: 1;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  background: rgba(255, 255, 255, 0.06);
  color: rgb(var(--art-text));
  font-size: 26rpx;
}
.actions { display: flex; gap: 16rpx; margin-top: 20rpx; }
</style>
