<template>
    <el-card shadow="never" class="!border-none">
        <el-form ref="formRef" class="mb-[-16px]" :model="modelValue" :inline="true">
            <el-form-item label="模板名称">
                <el-input class="w-[280px]" placeholder="请输入" v-model="modelValue.name" clearable @keyup.enter="$emit('resetPage')" />
            </el-form-item>
            <el-form-item label="模板类型">
                <el-select class="w-[280px]" v-model="modelValue.type">
                    <el-option v-for="option in typeOptions" :key="option.value" :label="option.label" :value="option.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="模板状态">
                <el-select class="w-[280px]" v-model="modelValue.status">
                    <el-option v-for="option in statusOptions" :key="option.value" :label="option.label" :value="option.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="$emit('resetPage')">查询</el-button>
                <el-button @click="$emit('resetParams')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
defineProps({
    modelValue: {
        type: Object,
        default: () => ({
            name: '',
            type: '',
            status: null
        })
    }
})
defineEmits(['resetPage', 'resetParams'])
const typeOptions = ref([
    { label: '电销', value: 1 },
    { label: '招生', value: 2 }
])
const statusOptions = ref([
    { label: '启用', value: 1 },
    { label: '停用', value: 2 }
])
</script>

<style scoped lang="scss"></style>
