<template>
    <Dialog
        v-model="isShowDialog"
        width="560px"
        top="10vh"
        @open="open"
        @close="handlClosed"
        title="消息通知"
    >
        <div
            class="detail-box"
            v-loading="loading"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <div class="detail-title">{{ messageData.subject }}：</div>
            <div class="time">{{ messageData.createTime }}</div>
            <div class="detail-content">
                {{ messageData.content }}
            </div>
            <div class="detail-source-time">发信人：{{ messageData.owner }}</div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handlClosed">关 闭</el-button>
            </div>
        </template>
    </Dialog>
</template>

<script lang="ts" setup name="MessageDetail">
import { detailData } from '@/api/system/message'
import { computed, ref, reactive } from 'vue'
import Dialog from '@/components/Dialog/index.vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
    isShow: Boolean,
    messageId: {
        required: true,
        type: String,
        default: ''
    }
})

interface MessageData {
    id: string
    subject: string
    content: string
    owner: string
    createTime: string
}
const messageData = ref({} as MessageData)
const loading = ref(false)

const open = async () => {
    // 弹窗打开时的逻辑
    messageData.value = {} as MessageData
    if (!props.messageId) {
        ElMessage.error('消息ID不存在')
        return
    }
    loading.value = true
    try {
        const { data = {} as MessageData } = (await detailData(props.messageId)) as {
            data: MessageData
        }
        messageData.value = data
    } catch (error) {
        console.log(error)
    } finally {
        loading.value = false
    }
}

const handlClosed = () => {
    // 弹窗关闭时的逻辑
    isShowDialog.value = false
    if (messageData.value.id) {
        emit('read', props.messageId)
    }
}

const emit = defineEmits(['update:isShow', 'read'])

const isShowDialog = computed({
    get: () => {
        return props.isShow
    },
    set: (val: boolean) => {
        emit('update:isShow', val)
    }
})
</script>

<style lang="scss" scoped>
.dialog-footer {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
.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>
