<template>
  <el-form :inline="true" :model="searchForm" class="search-form">
    <el-form-item label="商品名称">
      <el-input
        v-model="searchForm.name"
        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-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 { DiamondProductListRequest } from '@/api/business/diamond'

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

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

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

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

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