<!--
 * @Author: riverQiu
 * @Date: 2024-09-11 18:42:37
 * @LastEditors: riverQiu
 * @LastEditTime: 2024-09-11 19:03:23
 * @Description: 
-->
<template>
  <div class="container">
    <ContentWrap style="max-width: 1000px; margin: 0 auto; overflow-x: auto">
      <div class="text-center">
        <div class="mb-10px" style="font-size: 24px; letter-spacing: 2px">
          {{ info.title }}
        </div>
        <el-text>
          {{ formatDate(info.createTime, 'YYYY-MM-DD hh:mm:ss') }}
        </el-text>
      </div>
      <el-divider direction="horizontal" />

      <div v-dompurify-html="info.content"></div>
    </ContentWrap>
  </div>
</template>

<script setup name="NMDetail">
import { getNotifyMessageDetail, updateNotifyMessageRead } from '@/api/system/notify/message'
import { formatDate } from '@/utils/formatTime'

const route = useRoute()
const info = ref({})

function init() {
  getNotifyMessageDetail(route.query.id).then((data) => {
    info.value = data
    if (!data.readStatus) {
      handleReadOne(data.id)
    }
  })
}

/** 标记一条站内信已读 */
const handleReadOne = async (id) => {
  await updateNotifyMessageRead({
    ids: [id]
    // roleId: userStore.getUser?.currentRole
  })
  await getList()
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  max-height: 100%;
  overflow-y: auto;
}
:deep(p) {
  font-size: 14px;
}
:deep(table) {
  margin-top: 10px;
  border-collapse: separate;
  text-indent: initial;
  border-spacing: 1px;
  text-align: left;
  border-width: 1px;
  box-sizing: border-box;
}
:deep(th) {
  font-size: 14px;
  text-align: left;
  border-width: 1px;
  box-sizing: border-box;
}
:deep(td) {
  font-size: 12px;
  text-align: left;
  border-width: 1px;
  box-sizing: border-box;
  min-width: 44px;
  word-break: break-all;
}
:deep(.el-card__body) {
  padding: 20px 10px;
}
</style>
