<template>
  <el-form :model="searchForm" inline class="search-form">
    <el-form-item label="任务分类">
      <el-select
        v-model="searchForm.type"
        placeholder="全部分类"
        clearable
        style="width: 140px"
      >
        <el-option
          v-for="(label, value) in TaskTypeLabels"
          :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 { TaskTypeLabels } from '@/api/business/task'

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

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

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

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

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

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