<template>
    <super-dialog
        v-on="$listeners"
        v-bind="$attrs"
        v-model="dialogVisible"
        @close="$emit('close-dialog')"
        @closed="closed"
        @open="open"
    >
        <div class="detail-box">
            <div class="detail-title">{{ detailInfo.subject }}：</div>
            <div class="time">{{ detailInfo.createTime }}</div>
            <div class="detail-content">
                {{ detailInfo.content }}
            </div>
            <div class="detail-source-time">发信人：{{ detailInfo.owner }}</div>
        </div>

        <template v-slot:footer>
            <el-button
                type="primary"
                title="关闭消息通知"
                plain
                @click="dialogVisible = false"
                >关闭</el-button
            >
        </template>
    </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {detailData} from '@/api/MessageReminder'

export default {
    name: 'DetailDialog',
    components: {SuperDialog},
    props: {
        isShowDetail: {
            default: false,
            type: Boolean,
        },
        rowInfo: {
            default() {
                return {}
            },
            type: Object,
        },
    },
    computed: {
        dialogVisible: {
            get() {
                return this.isShowDetail
            },
            set(val) {
                this.$emit('update:isShowDetail', val)
            },
        },
    },
    data() {
        return {
            detailInfo: {},
        }
    },
    methods: {
        // 弹层打开
        open() {
            if (this.rowInfo.id) {
                this.getDetailData(this.rowInfo.id)
            }
        },

        // 弹层关闭
        closed() {
            this.detailInfo = {}
        },

        // 获取详情
        async getDetailData(id) {
            const {data} = await detailData(id)
            this.detailInfo = data
        },
    },
}
</script>
<style lang="scss" scoped>
.detail-box {
  display: flex;
  flex-direction: column;
  row-gap: 12px;

  .detail-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
  }

  .time {
    color: #b4b4b4;
    font-size: 14px;
  }

  .detail-content {
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    text-indent: 32px;
    margin: 10px 0 20px 0;
  }

  .detail-source-time {
    color: #fff;
    font-size: 16px;
  }
}
</style>
