<template>
  <div style="height: calc(100vh - 40px)" class="w-full bg-[#F7F8FA]">
    <ChatHeaderBar title="系统消息列表" />

    <div v-for="item in listData" @click="onChatPage(item?.id)" :key="item.id" class="w-full pt-40">
      <p class="w-full pt-16 mb-12 text-center text-black-9 text-sm">
        {{ formatTimestamp(item?.createTime) }}
      </p>
      <div class="w-[91.2%] box-border h-103 mx-16 bg-white p-16">
        <h1 class="text-black w-full line-clamp-1 text-2xl font-semibold mb-8">
          {{ item?.title ? item?.title : '标题标题' }}
        </h1>
        <p class="line-clamp-2 w-full leading-3xl text-black-9 text-sm">
          {{ item?.messageContent }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
useSeoMeta({
  title: '系统消息'
})
// 跳转聊天页面
const onChatPage = (query) => {
  navigateTo({
    path: `/profile/system-message/details?id=${query}`
  })
}

definePageMeta({
  layout: false
})

const listData = ref([])

onMounted(() => {
  getList()
})

const getList = async () => {
  const { data } = await request('/website/tourMessage/getsListSystemMessages', {
    query: {
      TypeId: 3
    }
  })

  if (Array.isArray(data) && data.length) {
    listData.value = data
  }
}
</script>

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