<template>
    <el-dialog
        top="5vh"
        title="消息通知"
        custom-class="message-dialog"
        :visible.sync="dialogVisible"
        :before-close="(done)=>handleClose(done)"
        :append-to-body="true"
    >   
        <div class="message-header">
            <div class="message-title">主题:{{ message.title }}</div>
            <div class="message-info">
                <span>发信人:{{ message.owner }}</span>
                <span>发信时间:{{ message.createTime }}</span>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="message-content">
            <div v-html="message.content"></div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'MessageInfo',
    data() {
        return {
            dialogVisible: false,
            message: {},
        }
    },
    created() {},
    methods: {
        open(data) {
            this.dialogVisible = true
            this.message = data
        },
        handleClose(done) {
            if (done instanceof Function) {
                done()
            }else{
                this.dialogVisible = false;
            }
            this.$emit('close')
        },
    },
}
</script>

<style lang="scss" scoped>
>>> .message-dialog .el-dialog__body {
    padding-top: 30px;
}
>>> .message-dialog {
    width: 900px;
}
>>> .el-dialog__header {
    padding-bottom:20px;
    border-bottom: 1px solid #dcdfe6;
}
.message-header {
    width: 100%;
}
.message-title {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
}
.message-info {
    margin-bottom: 10px;
    color: #666;
    span {
        font-size: 12px;
        padding-right: 20px;
    }
}
</style>