<template>
  <el-form :model="searchForm" inline class="search-form">
    <el-form-item label="奖励类型">
      <el-select
        v-model="searchForm.rewardType"
        placeholder="全部类型"
        clearable
        style="width: 140px"
      >
        <el-option
          v-for="(label, value) in RewardTypeLabels"
          :key="value"
          :label="label"
          :value="Number(value)"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="关键词">
      <el-input
        v-model="searchForm.keyword"
        placeholder="请输入描述关键词"
        clearable
        style="width: 200px"
        @keyup.enter="handleSearch"
      />
    </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 { RewardTypeLabels } from '@/api/business/reward'

interface SearchFormType {
  rewardType?: number
  keyword?: string
}

const searchForm = reactive<SearchFormType>({
  rewardType: undefined,
  keyword: ''
})

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

const handleSearch = () => {
  emit('search', { ...searchForm })
}

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

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