<template>  
    <!-- el-dialog组件用于创建一个对话框，设置了标题、点击模态框不关闭、双向绑定显示隐藏状态等属性 -->  
    <el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible">  
        <!-- el-form组件用于创建表单，绑定了表单数据模型、验证规则，设置了标签宽度、尺寸等属性 -->  
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini">  
            <!-- 表单项目，用于输入标题，绑定了dataForm中的title字段，设置了提示文字 -->  
            <el-form-item label="标题" prop="title">  
                <el-input v-model="dataForm.title" placeholder="标题"></el-input>  
            </el-form-item>  
            <!-- 表单项目，用于输入链接，绑定了dataForm中的url字段，设置了提示文字 -->  
            <el-form-item label="链接" prop="url">  
                <el-input v-model="dataForm.url" placeholder="跳转链接"></el-input>  
            </el-form-item>  
            <div>  
                <!-- 表单项目，用于输入小程序appid，绑定了dataForm.miniprogram.appid字段，设置了提示文字 -->  
                <el-form-item label="小程序appid" prop="miniprogram.appid">  
                    <el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input>  
                </el-form-item>  
                <!-- 表单项目，用于输入小程序路径，绑定了dataForm.miniprogram.pagePath字段，设置了提示文字 -->  
                <el-form-item label="小程序路径" prop="miniprogram.pagePath">  
                    <el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input>  
                </el-form-item>  
            </div>  
            <el-row>  
                <el-col :span="16">  
                    <!-- 表单项目，用于输入模版名称，绑定了dataForm中的name字段，设置了提示文字 -->  
                    <el-form-item label="模版名称" prop="name">  
                        <el-input v-model="dataForm.name" placeholder="模版名称"></el-input>  
                    </el-form-item>  
                </el-col>  
                <el-col :span="8">  
                    <!-- 表单项目，使用el-switch组件用于切换是否有效状态，绑定了dataForm中的status字段 -->  
                    <el-form-item label="有效" prop="status">  
                        <el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch>  
                    </el-form-item>  
                </el-col>  
            </el-row>  
            <div class="form-group-area">  
                <!-- 表单项目，用于显示提示信息，告知消息填充数据的相关要求 -->  
                <el-form-item class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>  
                <!-- 表单项目，使用textarea类型的el-input展示模板内容，设置为禁用状态 -->  
                <el-form-item>  
                    <el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input>  
                </el-form-item>  
                <!-- 使用v-for循环遍历dataForm.data数组，动态生成表单项目，用于输入消息填充数据及设置颜色 -->  
                <el-row v-for="(item, index) in dataForm.data" :key="item.name">  
                    <el-col :span="16">  
                        <!-- 表单项目，根据循环的索引和字段名绑定对应的数据项的value字段，设置了必填验证规则 -->  
                        <el-form-item :label="item.name" :prop="'data.' + index + '.value'" :rules="[{required: true, message: '填充内容不得为空', trigger: 'blur' }]">  
                            <el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容"></el-input>  
                        </el-form-item>  
                    </el-col>  
                    <el-col :span="8">  
                        <!-- 表单项目，用于输入颜色值，绑定对应数据项的color字段 -->  
                        <el-form-item label="颜色">  
                            <el-input type="color" v-model="item.color" placeholder="颜色"></el-input>  
                        </el-form-item>  
                    </el-col>  
                </el-row>  
            </div>  
        </el-form>  
                <!-- 在对话框的底部插槽中添加取消和确定按钮，分别绑定对应的点击事件 -->  
        <span slot="footer" class="dialog-footer">  
            <el-button @click="visible = false">取消</el-button>  
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
        </span>  
    </el-dialog>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            visible: false,  // 控制对话框的显示状态  
            // 表单数据对象，包含了各种表单字段的初始值，如id、templateId、标题、数据数组、链接等  
            dataForm: {  
                id: 0,  
                templateId: '',  
                title: '',  
                data: [],  // 用于存储动态生成的数据项  
                url: '',  
                miniprogram: { appid: '', pagePath: '' },  // 小程序相关信息  
                content: '',  // 模板内容  
                status: true,  // 模板的有效状态  
                name: ''  // 模板名称  
            },  
            // 表单验证规则对象，定义了部分字段的必填等验证规则  
            dataRule: {  
                title: [  
                    { required: true, message: '标题不能为空', trigger: 'blur' }  
                ],  
                data: [  
                    { required: true, message: '内容不能为空', trigger: 'blur' }  
                ],  
                name: [  
                    { required: true, message: '模版名称不能为空', trigger: 'blur' }  
                ]  
            }  
        }  
    },  
    methods: {  
        // 初始化方法，接受一个id作为参数  
        init(id) {  
            console.log('init', id);  
            // 设置表单数据对象的id字段，如果传入的id为空则设为0  
            this.dataForm.id = id || 0;  
            // 设置对话框为显示状态  
            this.visible = true;  
            this.$nextTick(() => {  
                // 重置表单字段  
                this.$refs['dataForm'].resetFields();  
                if (this.dataForm.id) {  
                    // 如果有id，使用axios（这里假设$http是基于axios封装的）发送GET请求获取模板信息  
                    this.$http({  
                        url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`),  
                        method: 'get',  
                        params: this.$http.adornParams()  
                    }).then(({ data }) => {  
                        if (data && data.code === 200) {  
                            // 如果请求成功，调用方法处理获取到的模板信息  
                            this.transformTemplate(data.msgTemplate);  
                        } else {  
                            // 如果请求失败，显示错误提示信息  
                            this.$message.error(data.msg);  
                        }  
                    });  
                }  
            });  
        },  
        /**  
         * 根据content信息展开data配置项(content为微信公众平台后台配置的模板)  
         * 如content='{{first.DATA}} ↵商品名称：{{keyword1.DATA}} ↵购买时间：{{keyword2.DATA}} ↵{{remark.DATA}}'  
         * 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}]  
         * 展示表单让管理员给对应的字段填充内容  
         */  
        transformTemplate(template) {  
            if (!template.miniprogram) template.miniprogram = { appid: '', pagePath: '' };  
            if (template.data instanceof Array) { // 如果已经配置过了，直接读取  
                this.dataForm = template;  
                return;  
            }  
            
            template.data = [];  
            // 通过正则表达式匹配content中类似{{xxx.DATA}}的内容，提取出其中的xxx部分，放入keysArray数组  
            let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || []; // 示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]  
            keysArray.map(item => {  
                const name = item.replace('{{', '').replace('.DATA}}', '');  
                // 基于提取的字段名创建对应的data数据项，设置初始的value为空，颜色为黑色  
                template.data.push({ "name": name, "value": "", color: "#000000" });  
            });  
            this.dataForm = template; // 更新dataForm  
        },  
        // 表单提交的方法  
        dataFormSubmit() {  
            // 对整个表单进行验证  
            this.$refs['dataForm'].validate((valid) => {  
                if (valid) {  
                    // 使用axios（这里假设$http是基于axios封装的）发送POST请求提交表单数据，根据id是否存在决定是保存还是更新操作  
                    this.$http({  
                        url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`),  
                        method: 'post',  
                        data: this.$http.adornData(this.dataForm) // 装饰数据  
                    }).then(({ data }) => {  
                        if (data && data.code === 200) {  
                            // 如果操作成功，显示成功提示信息，并在提示信息关闭后隐藏对话框，触发父组件的refreshDataList事件  
                            this.$message({  
                                message: '操作成功',  
                                type: 'success',  
                                duration: 1500,  
                                onClose: () => {  
                                    this.visible = false; // 隐藏对话框  
                                    this.$emit('refreshDataList'); // 触发父组件的事件  
                                }  
                            });  
                        } else {  
                            // 如果操作失败，显示错误提示信息  
                            this.$message.error(data.msg);  
                        }  
                    });  
                }  
            });  
        }  
    }  
}  
</script>  

<style scoped>  
.form-group-area {  
    border: 1px dotted gray; /* 添加边框样式，使其更明显 */  
}  
.form-group-title {  
    color: gray; /* 设置标题颜色 */  
    font-size: 12px; /* 设置标题字体大小 */  
}  
</style>