<template>
  <el-form :inline="true" :model="searchForm" class="search-form">
    <el-form-item label="盒子标题">
      <el-input 
        v-model="searchForm.title" 
        placeholder="请输入盒子标题" 
        clearable 
        @keyup.enter="handleSearch" 
        style="width: 180px" 
      />
    </el-form-item>
    <el-form-item label="状态">
      <el-select 
        v-model="searchForm.status" 
        placeholder="全部状态" 
        clearable 
        style="width: 120px"
      >
        <el-option label="上架" :value="1" />
        <el-option label="下架" :value="0" />
        <el-option label="售罄" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="盒子类型">
      <el-select 
        v-model="searchForm.type" 
        placeholder="全部类型" 
        clearable 
        style="width: 140px"
      >
        <el-option 
          v-for="item in goodsTypes" 
          :key="item.value" 
          :label="item.name" 
          :value="item.value" 
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSearch">
        <el-icon><Search /></el-icon>查询
      </el-button>
      <el-button @click="handleReset">
        <el-icon><Refresh /></el-icon>重置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import type { GoodsListQuery, GoodsTypeItem } from '@/api/business/goods'

interface Props {
  goodsTypes: GoodsTypeItem[]
}

defineProps<Props>()

const emit = defineEmits<{
  (e: 'search', params: Partial<GoodsListQuery>): void
  (e: 'reset'): void
}>()

const searchForm = reactive({
  title: '',
  status: undefined as number | undefined,
  type: undefined as number | undefined
})

const handleSearch = () => {
  const params: Partial<GoodsListQuery> = {}
  
  if (searchForm.title) {
    params.title = searchForm.title
  }
  if (searchForm.status !== undefined) {
    params.status = searchForm.status
  }
  if (searchForm.type !== undefined) {
    params.type = searchForm.type
  }
  
  emit('search', params)
}

const handleReset = () => {
  searchForm.title = ''
  searchForm.status = undefined
  searchForm.type = undefined
  emit('reset')
}
</script>

<style scoped>
.search-form {
  margin-bottom: 16px;
}
</style>
