<template>
  <view class="msg-page">
    <view class="cell">
      <jx-icon icon="xinxi"></jx-icon>
      <text class="text">{{ msgData.title }}</text>
    </view>
    <view class="cell">
      <jx-icon icon="shijian"></jx-icon>
      <text class="text">{{ timeFormatHMS(msgData.createdAt) }}</text>
    </view>
    <view class="content">
      <rich-text :nodes="msgData.content"></rich-text>
    </view>
    <view class="imgWrap" v-if="msgData.imgs != ''">
      <div class="imgInnerWrap">
        <img class="img" :src="msgData.imgs" mode="aspectFit" />
      </div>
    </view>
    <view class="return" @tap="getBreak">返回消息列表</view>
  </view>

  <!-- 公共组件 -->
  <jx-loading />
</template>

<script lang="ts" setup>
import toast from '@/utils/toast'
import { timeFormatHMS } from '@/utils/tools'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import merchant from '@/api/https/merchant'

const messageID = ref<number>(0)
const id = ref<number>(0)
onLoad(async (options) => {
  messageID.value = options!.messageID
  id.value = options!.id
  await GetStoreMessages()
})

/**
 * 获取信息详情
 */
interface MsgDetaileType {
  content: string
  title: string
  type: number
  imgs: string
  createdAt: string
}
const msgData = ref<MsgDetaileType>({
  content: '',
  title: '',
  type: 0,
  imgs: '',
  createdAt: '',
})
const totalCount = ref<number>(0)
async function GetStoreMessages() {
  let data = {
    msgIDs: JSON.stringify([+messageID.value]),
    offset: 0,
    pageSize: 1,
  }
  let msgRes = await merchant.get_store_messages(data)
  if (msgRes.code == 0) {
    if (msgRes.data.totalCount != 0) {
      msgData.value = msgRes.data.data[0]
      totalCount.value = msgRes.data.totalCount
      readStoreMsg()
    } else {
      totalCount.value = 0
    }
  } else {
    toast('获取消息数据异常', 2)
  }
}

/**
 * 把信息改为已读
 */
async function readStoreMsg() {
  let data = {
    msgID: messageID.value,
    msgStatusID: id.value,
  }
  let redMsgRes = await merchant.read_store_message(data)
  if (redMsgRes.code != 0) {
    toast('读取信息异常', 2)
  }
}

/**
 * 返回信息列表
 */
function getBreak() {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
@import './messageDetail.scss';
</style>