<template>
  <view class="px32rpx py20rpx bg-white h-screen overflow-y-scroll" v-if="data">
    <view class="text-32rpx">{{ data.titile }}</view>
    <view class="text-[rgb(0,0,0,0.3)] text-24rpx mt24rpx mb24rpx">
      {{ data.sender }} {{ dayjs(data.sendTime).format("MM-DD ss:mm") }}</view
    >
    <view class="text-28rpx">
      <rich-text :nodes="text"></rich-text>
    </view>
    <view class="h112rpx"></view>
  </view>
</template>

<script setup lang="ts">
import dayjs from "dayjs";

const { data, send: getData } = useRequest(
  (id) => Apis.app.getMsgInfo({ params: { id } }),
  { immediate: false },
);
const text = computed(() => {
  if (data.value) {
    return data.value.msgContent.replace(
      /\<img/gi,
      '<img style="max-width:100%;height:auto" ',
    );
  }
});
onLoad(async (query: any) => {
  await getData(query.id);
});
</script>

<style scoped lang="scss"></style>
<route lang="json">
{
  "name": "notificationDetailes",
  "style": {
    "navigationBarTitleText": "消息通知"
  }
}
</route>
