<template>
  <el-form :inline="true" :model="searchForm" class="search-form">
    <el-form-item label="标题关键词">
      <el-input
        v-model="searchForm.keyword"
        placeholder="请输入优惠券标题"
        clearable
        @keyup.enter="handleSearch"
        style="width: 180px"
      />
    </el-form-item>
    <el-form-item label="优惠券类型">
      <el-select
        v-model="searchForm.type"
        placeholder="全部类型"
        clearable
        style="width: 140px"
      >
        <el-option
          v-for="(label, value) in CouponTypeLabels"
          :key="value"
          :label="label"
          :value="Number(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 { CouponTypeLabels, type CouponListRequest } from '@/api/business/coupon'

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

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

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

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

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