<template>
    <el-dialog
        title="添加短信模板"
        v-model="visible"
        width="600px"
        destroy-on-close
    >
        <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="110px"
            @keyup.enter="handleSubmit"
        >
            <el-form-item label="模板名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="签名名称" prop="sign">
                <el-input v-model="form.sign" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="短信内容" prop="content">
                <el-input
                    v-model="form.content"
                    type="textarea"
                    :rows="6"
                    placeholder="请输入"
                />
            </el-form-item>
            <el-form-item label="备注">
                <el-input
                    v-model="form.remark"
                    placeholder="请输入"
                    clearable
                />
            </el-form-item>
            <el-form-item label="推送方式" prop="pushWay">
                <el-checkbox-group v-model="form.pushWay">
                    <el-checkbox label="1">小程序站内推送</el-checkbox>
                    <el-checkbox label="2">公众号推送</el-checkbox>
                    <el-checkbox label="3">短信推送</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item
                label="三方模板KEY"
                prop="thirdKey"
                :required="form.pushWay.includes('3')"
            >
                <el-input
                    v-model="form.thirdKey"
                    placeholder="请输入"
                    clearable
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="handleSubmit">
                确 定
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import request from '@/utils/request';

    defineOptions({ name: 'TemplateEdit' });

    const emit = defineEmits(['success']);
    const visible = ref(false);
    const loading = ref(false);
    const formRef = ref(null);
    const editId = ref(null);

    const form = reactive({
        name: '',
        sign: '',
        content: '',
        remark: '',
        pushWay: []
    });

    const rules = {
        name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
        sign: [{ required: true, message: '请输入签名名称', trigger: 'blur' }],
        content: [
            { required: true, message: '请输入短信内容', trigger: 'blur' }
        ],
        thirdKey: [
            {
                required: false,
                message: '请输入三方模板KEY',
                trigger: 'blur',
                validator: (rule, value, callback) => {
                    if (form.pushWay.includes('3') && !value) {
                        callback(new Error('三方模板KEY为必填'));
                    } else {
                        callback();
                    }
                }
            }
        ]
    };

    // 打开弹窗
    function handleOpen(row) {
        visible.value = true;
        editId.value = null;
        form.name = '';
        form.sign = '';
        form.content = '';
        form.remark = '';
        form.pushWay = [];
        if (row) {
            Object.assign(form, row);
            editId.value = row.id;
            if (typeof form.pushWay === 'string') {
                form.pushWay = form.pushWay.split(',');
            }
        }
    }

    // 提交表单
    async function handleSubmit() {
        if (loading.value) return;
        try {
            const valid = await formRef.value?.validate();
            if (!valid) return;
            loading.value = true;

            const params = {
                name: form.name,
                sign: form.sign,
                content: form.content,
                remark: form.remark,
                pushWay: form.pushWay.join(','),
                status: 1,
                thirdKey: form.thirdKey
            };

            if (editId.value) {
                params.id = editId.value;
            }

            const url = editId.value
                ? '/message/templetemsg/update'
                : '/message/templetemsg/add';
            const { data } = await request.post(url, params);

            if (data.code === 200) {
                EleMessage.success(editId.value ? '修改成功' : '添加成功');
                visible.value = false;
                emit('success');
            } else {
                EleMessage.error(data.msg);
            }
        } catch (e) {
            EleMessage.error(e.message);
        } finally {
            loading.value = false;
        }
    }

    defineExpose({ handleOpen });
</script>
