<script lang="ts" setup>
import dayjs from "dayjs";
import usePage from "@/hooks/usePage";
import {appMessageListPost, appMessageReadAllPost, appMessageReadPost} from "@/service";
import {MessageTypeEnum} from "@/constant/enums";

const {t} = useI18n()

const {paging, loading, firstLoaded, dataList, queryList} = usePage((pageNum: number, pageSize: number) => {
  return new Promise(resolve => {
    appMessageListPost({
      params: {
        pageNum: pageNum,
        pageSize: pageSize,
      }
    }).then(res => {
      resolve(res)
    })
  })
})

// 一键已读
function readAll() {
  appMessageReadAllPost({}).then(() => {
    paging.value?.refresh()
  })
}

// 消息设置为已读
function readMessage(id: number) {
  appMessageReadPost({
    body: [id]
  }).then(() => {
    paging.value?.refresh()
  })
}

function handleClickMsg(item: any) {
  readMessage(item.id)
  switch (item.messageType) {
    case MessageTypeEnum.COMMENTED: // 有人评论了你
    case MessageTypeEnum.REPLIED: // 有人回复了你
    case MessageTypeEnum.COMMENT_APPROVED: // 评论审核通过
    case MessageTypeEnum.COMMENT_REJECTED: // 评论审核未通过
      navigateTo('/pages-user/pages/recipe/detail?id=' + item.objectId)
      break
    case MessageTypeEnum.ORDER_CREATED: // 用户下单
      navigateTo('/pages-user/pages/order/index?id=' + item.objectId)
      break
    case MessageTypeEnum.SETTLEMENT_APPROVED: // 商家入驻审核通过
    case MessageTypeEnum.SETTLEMENT_REJECTED: //
      navigateTo('/pages-user/pages/store-settle-in/list')
      break
  }
  paging.value?.refresh()
}

function navigateTo(url: string) {
  uni.navigateTo({url})
}
</script>

<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <template #top>
      <navbar :title="t('pages-user.message.title')">
        <template #right>
          <view class="flex items-center text-#CE7138" @click="readAll">
            <image class="w-40rpx h-40rpx shrink-0 mr-8rpx" src="@img/chef/140.png"></image>
            <text class="text-26rpx font-500">{{ t('pages-user.message.readAll') }}</text>
          </view>
        </template>
      </navbar>
    </template>
    <template v-for="item in dataList">
      <view class="w-full border-bottom px-40rpx py-42rpx flex items-center" @click="handleClickMsg(item)">
        <image class="w-120rpx h-120rpx shrink-0 mr-24rpx" src="@img/chef/141.png"></image>
        <view class="flex-1">
          <view class="w-full mb-22rpx flex items-start justify-between">
            <text class="text-34rpx lh-34rpx text-#000 font-500">{{ item.title }}</text>
            <text class="text-24rpx text-#666 shrink-0">{{
                dayjs(Number(item.createTime)).format('MM:DD HH:mm')
              }}
            </text>
          </view>
          <view class="text-26rpx text-#666 flex-center-sb">
            {{ item.content }}
            <view v-if="+item.readStatus === 2" class="w-14rpx h-14rpx bg-red-5 rounded-50%"></view>
          </view>
        </view>
      </view>
    </template>
  </z-paging>
</template>

<style>
page {
  background-color: #fff;
}
</style>