<template>
    <el-dialog :title="dialog.title" destroy-on-close v-model="dialog.visible" width="1250px" append-to-body>
        <div class="add-area">
            <div class="content">
                <el-form ref="templateFormRef" :model="form" :rules="rules" label-width="120px">
                    <el-form-item label="模块：">
                        {{ detailData?.templateServiceName }}
                    </el-form-item>
                    <el-form-item label="事件：">
                        {{ detailData?.eventName }}
                    </el-form-item>
                    <el-form-item label="标签说明：">
                        <div class="form_area flex">
                            <div class="form_item flex">
                                <div class="flex argls-item" v-for="item in detailData?.argls">
                                    <div class="label">{{ item.propertyName }}</div>
                                    <div class="value">{{ item.propertyKey }}</div>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <template v-if="form.templateDetailType == 'sms'">
                        <el-form-item label="短信内容：" prop="messageCentent" class="title-item">
                            <el-input
                                v-model="form.messageCentent"
                                type="textarea"
                                :rows="8"
                                placeholder="请输入短信内容"
                                :maxlength="500"
                                resize="none"
                            />
                            <p>发送时系统会自动在结尾追加【深圳领存】，请勿重复添加。</p>
                            <p>内容上限不能超过500字，当前已输入{{ form.messageCentent?.length }}字，
                                将作为1条发送，需注意单条短信限制“70个汉字或者160个英文字母”及模板备案
                            </p>
                        </el-form-item>
                    </template>
                    <template v-else>
                        <el-form-item
                            :label="`${ dialog.title }标题：`"
                            prop="messageTitle"
                            class="title-item"
                        >
                            <el-input
                                v-model="form.messageTitle"
                                :placeholder="`请输入${ dialog.title }标题`"
                                :maxlength="300"
                            />
                        </el-form-item>
                        <el-form-item class="title-item" label="内容模板：" prop="messageCentent">
                            <el-input
                                v-model="form.messageCentent"
                                type="textarea"
                                :rows="8"
                                placeholder="请输入内容模板"
                                :maxlength="600"
                                resize="none"
                            />
                            <p>内容不能为空，长度限制在1-600个字符之间</p>
                        </el-form-item>
                    </template>
                    <el-form-item label="回调地址：" prop="callbackUrl">
                        <el-input style="width: 100%;" v-model="form.callbackUrl" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <template #footer>
            <el-button @click="back">取消</el-button>
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
    import { getTemplate, editTemplate } from '@/api/system/messageTemplate'
    import { MessageTemplateForm } from '@/api/system/messageTemplate/types';

    const emits = defineEmits(['refresh'])

    const dialog = ref({
        visible: false,
        title: ''
    })

    const detailData = ref()
    const templateFormRef = ref()
    const open = (type?: string, id?: string | number) => {
        if (id && type) {
            form.value.messageCentent = undefined
            form.value.messageTitle = undefined
            form.value.id = undefined
            form.value.callbackUrl = undefined
            form.value.templateDetailType = type
            dialog.value.title = type == 'wecom' ? '企微' : type == 'site' ? '站内信' : type == 'mail' ? '邮件' : '手机短信'
            getTemplate(id, type).then(res => {
                if (res.success) {
                    detailData.value = res.result
                    form.value.templateEventId = res.result.id
                    if(res.result.detailEntities && res.result.detailEntities.length != 0) {
                        form.value.messageCentent = res.result.detailEntities[0].messageCentent
                        form.value.messageTitle = res.result.detailEntities[0].messageTitle
                        form.value.id = res.result.detailEntities[0].id
                        form.value.callbackUrl = res.result.detailEntities[0].callbackUrl
                    }
                }
            })
            dialog.value.visible = true
        }
    }

    const buttonLoading = ref(false)
    const form = ref<MessageTemplateForm>({
        templateDetailType: '',
        templateEventId: '',
        messageCentent: undefined,
        id: undefined,
        messageTitle: undefined,
        callbackUrl: undefined
    })

    const rules = ref({
        messageCentent: [
            { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        messageTitle: [
            { required: true, message: dialog.value.title + "标题不能为空", trigger: "blur" }
        ]
    })

    const submitForm = () => {
        templateFormRef.value?.validate(async (valid: boolean) => {
            if (valid) {
                buttonLoading.value = true;
                await editTemplate(form.value).finally(() => buttonLoading.value = false);
                ElMessage.success("提交成功");
                emits('refresh')
                back()
            }
        });
    }

    const back = () => {
        dialog.value.visible = false
    }

    defineExpose({
        open
    })
</script>

<style scoped lang="scss">
    .form_area{
        width: 100%;
        border-right: 0;
    }
    .content{
        padding-right: 17px;
        padding-top: 0;
    }
    .title-item{
        :deep(.el-form-item__content){
            flex-direction: column;
            align-items: flex-start;
            .el-input, .el-textarea{
                width: 100%!important;
            }
        }
    }
    .form_item{
        flex-wrap: wrap;
        .argls-item{
            width: 25%;
            .label{
                width: 80px;
            }
            .label, .value{
                padding: 8px;
                font-size: 12px;
            }
        }
    }
</style>
