<template>
    <!-- 消息回复对话框 -->
    <el-dialog title="消息回复" :close-on-click-modal="false" :visible.sync="visible">
        <!-- 表单区域 -->
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
            <!-- 表单项：回复内容 -->
            <el-form-item prop="replyContent">
                <!-- 文本区域输入框，用于输入回复内容 -->
                <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input>
                <!-- 当回复类型为文本时显示，点击插入链接 -->
                <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
            </el-form-item>
        </el-form>
        <!-- 对话框底部操作区域 -->
        <span slot="footer" class="dialog-footer">
            <!-- 取消按钮，点击关闭对话框 -->
            <el-button @click="visible = false">取消</el-button>
            <!-- 发送按钮，根据uploading状态显示不同文本，并控制是否禁用 -->
            <el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{uploading ? '发送中...' : '发送'}}</el-button>
        </span>
    </el-dialog>
</template>


<script>
export default {
    data() {
        return {
            // 控制对话框显示状态
            visible: false,
            // 控制发送按钮状态及文本
            uploading: false,
            // 表单数据模型
            dataForm: {
                // 用户唯一标识
                openid: '',
                // 回复类型，默认为文本
                replyType: 'text',
                // 回复内容
                replyContent: ''
            },
            // 表单验证规则
            dataRule: {
                // 回复内容必填验证
                replyContent: [
                    { required: true, message: "回复内容不能为空", trigger: "blur" }
                ]
            }
        }
    },
    // 局部注册组件（但在此组件模板中未使用）
    components: {
        WxMsgPreview: () => import('@/components/wx-msg-preview')
    },
    methods: {
        // 初始化方法，接收openid并显示对话框
        init(openid) {
            if (!openid) throw '参数异常'; // 校验openid是否存在
            this.dataForm.openid = openid; // 设置openid
            this.visible = true; // 显示对话框
        },
        // 表单提交方法
        dataFormSubmit() {
            if (this.uploading) return; // 如果正在上传，则直接返回
            this.uploading = true; // 设置上传状态为true
            this.$refs['dataForm'].validate((valid) => { // 验证表单
                if (valid) { // 如果验证通过
                    // 发送请求（注意：这里假设存在一个自定义的$http方法）
                    this.$http({
                        url: this.$http.adornUrl(`/manage/wxMsg/reply`), // 请求地址（可能经过某种处理）
                        method: 'post', // 请求方法
                        data: this.$http.adornData(this.dataForm) // 请求数据（可能经过某种处理）
                    }).then(({ data }) => { // 请求成功回调
                        if (data && data.code === 200) { // 如果请求成功且返回码为200
                            // 显示成功消息，并关闭对话框，清空回复内容
                            this.$message({
                                message: '回复成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false;
                                }
                            });
                            this.$emit("success", { ...this.dataForm }); // 触发success事件，传递表单数据
                            this.dataForm.replyContent = ''; // 清空回复内容
                        } else { // 如果请求失败
                            // 显示错误消息
                            this.$message.error(data.msg);
                        }
                        this.uploading = false; // 无论成功或失败，都重置上传状态
                    });
                }
            });
        },
        // 插入链接方法，向回复内容中添加链接文本（注意：链接地址未动态设置）
        addLink() {
            this.dataForm.replyContent += '<a href="链接地址">链接文字</a>';
        }
    }
}
</script>

<style scoped>
/* 样式部分，但.msg-container类在模板中未使用 */
.msg-container {
    background: #eee;
}
</style>