<template>
    <div class="mb-4 flex items-center space-x-4">
        <el-input
            v-model="form.name"
            placeholder="请输入活动名称"
            class="!w-[200px]"
            clearable
        />
        <el-select
            v-model="form.status"
            placeholder="活动状态"
            class="!w-[150px]"
            clearable
        >
            <el-option label="未开始" value="pending" />
            <el-option label="进行中" value="active" />
            <el-option label="已结束" value="ended" />
        </el-select>
        <el-select
            v-model="form.type"
            placeholder="活动类型"
            class="!w-[150px]"
            clearable
        >
            <el-option label="阶梯优惠" value="1" />
            <el-option label="上不封顶" value="2" />
        </el-select>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
    </div>
</template>

<script setup>
    import { reactive } from 'vue';

    const emit = defineEmits(['search', 'reset']);

    const form = reactive({
        name: '',
        status: '',
        type: ''
    });

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

    const handleReset = () => {
        form.name = '';
        form.status = '';
        form.type = '';
        emit('reset');
    };
</script>
