<template>
  <div style="height: 100vh" class="w-full bg-[#F7F8FA]">
    <ChatHeaderBar title="系统消息列表" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div style="height: 100vh" class="pt-40">
        <Empty v-if="!listData?.length && !loading" title="暂无系统消息" top="100" />

        <van-list
          v-else-if="listData.length"
          v-model:loading="loading"
          error-text="获取失败"
          finished-text="-- 没有更多了 --"
          :finished="finished"
          :immediate-check="false"
          @load="getLoadList"
        >
          <div v-for="item in listData" @click="onChatPage(item?.id)" :key="item.id" class="w-full">
            <p class="w-full pt-16 mb-12 text-center text-black-9 text-sm">
              {{ formatTimestamp(item?.createTime) }}
            </p>
            <div
              style="box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05)"
              class="w-[91.2%] box-border h-103 mx-16 bg-white p-16 rounded-2xl"
            >
              <h1 class="text-black w-full line-clamp-1 text-2xl font-semibold mb-8">
                {{ messageShowName(item?.messageContent).title }}
              </h1>
              <p class="line-clamp-2 w-full leading-3xl text-black-9 text-sm">
                {{ messageShowName(item?.messageContent)?.messageContent }}
              </p>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
useSeoMeta({
  title: '系统消息'
})

const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  noticeType: 3
})

// 跳转聊天页面
const onChatPage = (query) => {
  navigateTo({
    path: `/profile/system-message/details`,
    query: {
      id: query
    }
  })
}

definePageMeta({
  layout: false
})

const listData = ref([])

// 触底加载
const getLoadList = () => {
  queryParams.pageNum++
  finished.value = true
  getList()
}

const onRefresh = () => {
  refreshing.value = true
  queryParams.pageNum = 1
  listData.value = []
  getList()
}

const getList = async () => {
  try {
    loading.value = true
    const {
      data: { dataList, totalCount }
    } = await request('/website/tourMessage/getsListSystemAndFocusMessages', {
      query: {
        ...queryParams
      }
    })
    loading.value = false
    refreshing.value = false
    if (Array.isArray(dataList) && dataList.length) {
      listData.value = listData.value.concat(dataList)
    }

    if (listData.value.length >= totalCount) {
      finished.value = true
    } else {
      finished.value = false
    }
  } catch (error) {
  } finally {
    refreshing.value = false
    loading.value = false
  }
}

// 消息的内容转换
function messageShowName(messageContent) {
  try {
    let content = {}
    if (messageContent) {
      content = JSON.parse(messageContent)
      return content
    } else {
      return ''
    }
  } catch (error) {
    console.log(error)
  }
}

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

<style lang="scss" scoped></style>
