<template>
  <Page title="消息">
    <template v-slot:body>
      <div v-for="item in messageList">
        <div class="p-[10px] bg-white my-[8px]" @click="toDetail(item)">
          <span :class="`${item.checked ? 'text-[#07C160]' : 'themeTextColor'}`">{{ item.msg }}</span>  
        </div>
      </div>
    </template>

    <template v-slot:footer>
      <Footer />
    </template>
  </Page>
</template>

<script setup>
import { ref } from "vue";
import { useLifecycle } from "@hooks/useCommon.js";
import { GET_MESSAGE_LIST, ONE_CLICK_READ } from "@hooks/useApi";
import useShowToast from "@hooks/useToast";
import useRouterStore from "@store/useRouterStore.js";
import useInfoStore from "@store/useInfoStore.js";
import requests from "@common/requests";
import { routingInfos } from "@utility/generalVariables" 
const { toastLoading, toastSuccess, toastFail } = useShowToast();

const router = useRouterStore()
const userInfo = useInfoStore()

const messageList = ref([]);

function getMessageList() {
  requests.post(GET_MESSAGE_LIST, {}).then(({ data = [] }) => {
    messageList.value = data || []
    userInfo.updateState({
      numberOfMessages: data.filter((item) => !item.checked)?.length || ''
    })
  })
}

function toDetail(item) {
  requests.post(READ_MESSAGE, { id: item.id }).then(() => {
    getMessageList()
  })
  const jumpTo = routingInfos[item.path.replace('/', '')]
  router.navigateTo({
    pathName: 'moduleList',
    success: () => {
      router.emit('moduleListDetailParameter', {
        row: JSON.stringify(jumpTo)
      })
    }
  })
}

// 一键已读
function oneClickRead() {
  requests.post(ONE_CLICK_READ, {}).then(() => {
    getMessageList()
  })
}

useLifecycle({
  load: () => {
    getMessageList()
  }
});

function longPress(row, item) {
  console.log('长按', row, item);
}
</script>

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