<template>
  <u-navbar autoBack :title="Event?.title" :safeAreaInsetTop="true" placeholder>
    <template #right>
      <view style="font-size: 26rpx; font-weight: 700" @click="onclickPreviewHandler">一键已读</view>
    </template>
  </u-navbar>
  <view class="msglist">
    <template v-if="pageList?.records.length">
      <view class="msglist-item" v-for="_ in pageList?.records" :key="_.id" @click="jumpUrlHandler(_)">
        <view class="flexJ" style="margin-bottom: 28rpx">
          <view class="msglist-title">{{ proxy.$h.optObjectValue('MessageType', _?.type) }}</view>
          <view class="msglist-time">{{ _?.time }}</view>
        </view>
        <view class="msglist-message">{{ _?.content }}</view>
        <u-line margin="32rpx 0"></u-line>
        <view class="flexJ">
          <view class="msglist-todetail">查看详情</view>
          <u-icon size="20" name="arrow-right" color="#c1c1c1"></u-icon>
        </view>
      </view>
      <view class="msglist-empty flexC">没有更多数据了~</view>
    </template>
    <template v-else>
      <Empty text="暂无通知" />
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import Empty from '@/components/Empty.vue'
import { getMsg_list, getis_all_read } from '../../api'
import { MessageListParamsType, PageListType, MessageListType } from '../../types'

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

interface EventType {
  title: string
  type: string
}

const Event = ref<EventType>()

const pageList = ref<PageListType<MessageListType>>({ records: [] })

const params = ref<MessageListParamsType>({
  type: 0,
  pageNo: 0,
  pageSize: 10
})

onLoad((e: EventType) => {
  Event.value = e

  params.value.type = Number(e.type)

  getListHandler(true)
})

onReachBottom(() => getListHandler(false))

const getListHandler = async (refresh: boolean) => {
  refresh ? ((params.value.pageNo = 1), pageList.value?.records.splice(0)) : params.value.pageNo++

  const { result }: { result: PageListType<MessageListType> } = await getMsg_list(params.value)

  if (!result.records.length) return

  result.records.map(_ => pageList.value?.records.push(_))
}

const data = {
  '1': '/pages2/message/detail',
  '2': '/pages2/message/mineComment'
}

const jumpUrlHandler = (_: MessageListType) => proxy.$h.jumpUrl(`${data[Event.value?.type as string]}?id=${_.id}`)

const onclickPreviewHandler = async () => {
  uni.showModal({
    title: '您确定要一键已读所有消息吗?',
    showCancel: true,
    success: async ({ confirm, cancel }) => {
      if (confirm) {
        await getis_all_read({ type: Event.value?.type as string })

        getListHandler(true)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
page {
  background: #f7f8fa;
}
.msglist {
  box-sizing: border-box;
  padding: 26rpx 24rpx;
  &-item {
    box-sizing: border-box;
    padding: 32rpx 24rpx;
    background: #fff;
    margin-bottom: 22rpx;
  }
  &-title {
    color: #323233;
    font-size: 36rpx;
    font-weight: 700;
  }
  &-time {
    color: #999999;
    font-size: 26rpx;
  }
  &-message {
    color: #666666;
    font-size: 26rpx;
  }
  &-todetail {
    color: #323233;
    font-size: 28rpx;
    font-weight: 700;
  }
  &-empty {
    margin: 58rpx auto 0;
    color: #999999;
    font-size: 26rpx;
  }
}
</style>