<template>
    <el-dialog title="新增提示词模板" v-model="visible" width="1150px" append-to-body>
		<el-form ref="templateRef" :model="form" label-width="85px">
			<el-form-item label="模板名称：" prop="templateName">
				<el-input v-model="form.templateName" placeholder="模板名称" />
			</el-form-item>
            <el-form-item label="模板编码：" prop="templateCode">
                <el-input v-model="form.templateCode" placeholder="模板编码" />
			</el-form-item>
            <el-form-item label="标签说明：">
                <div class="form_area flex">
                    <div class="form_item flex">
                        <div class="flex argls-item">
                            <div class="label">客户大周：</div>
                            <div class="value">$continent$</div>
                        </div>
                        <div class="flex argls-item">
                            <div class="label">客户国家：</div>
                            <div class="value">$country$</div>
                        </div>
                        <div class="flex argls-item">
                            <div class="label">邮件标题：</div>
                            <div class="value">$subject$</div>
                        </div>
                        <div class="flex argls-item">
                            <div class="label">邮件内容：</div>
                            <div class="value">$content$</div>
                        </div>
                        <div class="flex argls-item">
                            <div class="label">客户名称：</div>
                            <div class="value">$customerName$</div>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="模板内容：" prop="promptContent">
                <ckeditor class="template_ckeditor" @sendContnet="getContent" :content="form.promptContent"></ckeditor>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
    import ckeditor from '@/components/ckeditor/index.vue'
    import { addCueWordTemplate } from '@/api/system/messageTemplate'

    const emits = defineEmits(['refresh'])

    const visible = ref(false)
    const buttonLoading = ref(false)
    const form = ref({
        templateName: null,
        templateCode: null,
        promptContent: ''
    })

    const addType = ref('')
    const templateRef = ref()
    const open = (type, data) => {
        addType.value = type
        if(type == 'edit') {
            Object.assign(form.value, data)
        }else{
            form.value = {
                templateName: null,
                templateCode: null,
                promptContent: ''
            }
        }
        visible.value = true
    }

    const getContent = (val: string) => {
        form.value.promptContent = val
    }

    const cancel = () => {
        visible.value = false
    }

    const submitForm = () => {
        buttonLoading.value = true
        addCueWordTemplate(form.value).then(() => {
            ElMessage.success('新增成功')
            cancel()
            emits('refresh')
        }).finally(() => {
            buttonLoading.value = false
        })
    }

    defineExpose({
        open
    })
</script>

<style lang="scss" scoped>
    .form_area{
        width: 100%;
        border-right: 0;
    }
    .form_item{
        flex-wrap: wrap;
        .argls-item{
            width: 50%;
            .label{
                width: 80px;
            }
            .label, .value{
                padding: 8px;
                font-size: 12px;
            }
        }
    }
</style>