<template>
    <div>
        <el-form
            :model="form"
            :rules="rules"
            ref="refForm"
            label-width="100px"
            label-position="top"
        >
            <el-form-item label="消息标题：" prop="msgTitle">
                <el-input v-model="form.msgTitle"></el-input>
            </el-form-item>
            <el-form-item label="有效性：" prop="enable" v-if="isEditMode">
                <el-switch v-model="form.enable"></el-switch>
            </el-form-item>
            <el-form-item label="消息类型：" prop="msgType">
                <el-select
                    v-model="form.msgType"
                    placeholder="请选择"
                    @change="handleMsgChange"
                >
                    <el-option
                        v-for="item in msgTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发送时间：" prop="msgSendType">
                <el-radio-group v-model="form.msgSendType">
                    <el-radio
                        v-for="item in msgSendTypeOptions"
                        :key="item.value"
                        :label="item.value"
                        :value="item.value"
                        >{{ item.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="startTime" v-if="isMsgSendType2">
                <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    placeholder="选择日期时间"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="消息简介：" prop="msgBrief">
                <el-input
                    type="textarea"
                    :rows="3"
                    v-model="form.msgBrief"
                ></el-input>
            </el-form-item>
            <el-form-item label="消息内容：" prop="msgContent">
                <el-input v-model="form.msgContent" v-show="false"></el-input>
                <wang-editor-ex
                    ref="refWangEditorEx"
                    :contentText="form.msgContent"
                    @change="editorContentChange"
                ></wang-editor-ex>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('refForm')"
                    >创建消息</el-button
                >
                <el-button @click="resetForm('refForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import wangEditorEx from "@/components/wangEditorEx";

// 消息类型选项列表
const msgTypeOptions = [
    // 1235 服务商不能发布
    // {
    //     value: 1,
    //     label: "系统全局公告消息",
    // },
    // {
    //     value: 2,
    //     label: "全局的企业消息",
    // },
    // {
    //     value: 3,
    //     label: "全局的服务商消息",
    // },
    {
        value: 4,
        label: "企业个体消息",
    },
    // {
    //     value: 5,
    //     label: "服务商个体消息",
    // },
    {
        value: 6,
        label: "用户个人消息",
    },
    {
        value: 7,
        label: "服务商下企业消息",
    },
];

// 发送时间类型选项
const msgSendTypeOptions = [
    {
        value: 1,
        label: "立即",
    },
    {
        value: 2,
        label: "定时",
    },
];

export default {
    name: "MessageForm",
    components: {
        "wang-editor-ex": wangEditorEx,
    },
    props: {
        inputForm: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {
            msgTypeOptions: msgTypeOptions,
            msgSendTypeOptions: msgSendTypeOptions,
            form: this.inputForm,
            rules: {
                enable: [
                    {
                        required: true,
                        message: "请选择消息有效性",
                        trigger: "change",
                    },
                ],
                msgType: [
                    {
                        required: true,
                        message: "请选择消息类型",
                        trigger: "change",
                    },
                ],
                msgTitle: [
                    {
                        required: true,
                        message: "请输入消息标题",
                        trigger: "change",
                    },
                ],
                msgBrief: [
                    {
                        required: true,
                        message: "请输入消息简介",
                        trigger: "change",
                    },
                ],
                msgContent: [
                    {
                        required: true,
                        message: "请输入消息内容",
                        trigger: "change",
                    },
                ],
                msgSendType: [
                    {
                        required: true,
                        message: "请选择发送时间",
                        trigger: "change",
                    },
                ],
                startTime: [
                    {
                        required: true,
                        message: "请选择发送时间",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    computed: {
        // 选择定时发送，返回true,否则false
        isMsgSendType2: function () {
            return this.form.msgSendType === 2;
        },
        // 是编辑模式
        isEditMode: function () {
            return this.inputForm && this.inputForm.msgId;
        },
    },
    methods: {
        // 消息类型改变
        handleMsgChange() {
            this.$emit("msgTypeChange", this.inputForm.msgType);
        },
        // 编辑器中文本改变
        editorContentChange(content) {
            console.log("editorContentChange");
            console.log(content);
            this.$set(this.form, "msgContent", content);
        },
        // 是编辑模式
        // isEditMode() {
        //     return this.inputForm && this.inputForm.msgId;
        // },
        submitForm(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let args = {
                        msgType: _this.form.msgType,
                        msgTitle: _this.form.msgTitle,
                        msgBrief: _this.form.msgBrief,
                        msgContent: _this.form.msgContent,
                    };
                    if (_this.form.msgSendType === 2) {
                        args.startTime = this.dateFormat(
                            new Date(_this.form.startTime),
                            "yyyy-MM-dd HH:mm:ss"
                        );
                    }
                    if (_this.inputForm && _this.inputForm.msgId) {
                        args.msgId = _this.inputForm.msgId;
                        args.enable = _this.form.enable;
                    }

                    this.$emit("submit", args);
                } else {
                    _this.$message.error(
                        "输入信息不合法，请检查您的输入信息！"
                    );
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.form = {};
            this.$refs[formName].resetFields();
        },
        dateFormat(date, fmt) {
            // 小时只支持24小时制
            var o = {
                "M+": date.getMonth() + 1, // 月份
                "d+": date.getDate(), // 日
                "H+": date.getHours(), // 24小时,
                "m+": date.getMinutes(), // 分
                "s+": date.getSeconds(), // 秒
                "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
                S: date.getMilliseconds(), // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(
                    RegExp.$1,
                    (date.getFullYear() + "").substr(4 - RegExp.$1.length)
                );
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length == 1
                            ? o[k]
                            : ("00" + o[k]).substr(("" + o[k]).length)
                    );
            return fmt;
        },
    },
};
</script>