<template>
    <div class="device-add-categroy-container">
        <el-dialog v-model="isShowDialog" width="600px" draggable title="新增ivr分类">
            <el-form :model="ruleForm" label-width="100px" ref="ruleFormRef">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="ivr分类名称" prop="name"
                            :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                            <el-input v-model="ruleForm.name" placeholder="请输入分类名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"
                                placeholder="请输入备注" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowDialog = false" class="default-button">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from "vue";
import { ElMessage } from 'element-plus'
import { addIvrCategroies } from "/@/api/device/ivr";

// 定义接口来定义对象的类型
interface StateIvrCategroy {
    ruleForm: {
        name: string,
        remark: string
    },
    isShowDialog: boolean
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'openDialog', 'closeDialog'])


// 定义变量内容
const ruleFormRef = ref();
const state = reactive<StateIvrCategroy>({
    ruleForm: {
        name: "",
        remark: ""
    },
    isShowDialog: false
})
const { ruleForm, isShowDialog } = toRefs(state);
const openDialog = () => {
    ruleFormRef.value?.resetFields();
	ruleFormRef.value?.resetFields();
    state.isShowDialog = true;
    emit('openDialog')
}
// 关闭弹窗
const closeDialog = () => {
    state.isShowDialog = false;
    emit('closeDialog')
};
// 新增保存
const onSubmit = () => {
    ruleFormRef.value.validate((valid: boolean) => {
        if (valid) {
            addIvrCategroies(state.ruleForm).then(() => {
                ElMessage.success("新增成功")
                emit("updateList");
                isShowDialog.value = false;
            })
        } else {
            return false;
        }
    });
}
// 暴露变量
defineExpose({ closeDialog, openDialog })
</script>
