<template>
  <div class="p-20px">
    <ContentWrap style="max-width: 1000px; margin: 0 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 } 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
  })
}

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

<style lang="scss" scoped>
: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;
}
:deep(.el-card__body) {
  padding: 20px 10px;
}
</style>
