<script setup lang="ts">
import IcBaselineNotificationsNone from "~icons/ic/baseline-notifications-none";
import IconParkOutlineClearFormat from "~icons/icon-park-outline/clear-format";
import MaterialSymbolsAndroidContacts from "~icons/material-symbols/android-contacts";
import { mockClient } from "@/api";

const router = useRouter();
const { data } = mockClient("notify.list");

function handleItemClick(id: number) {
  router.push(`/notify/${id}`);
}
</script>

<template>
  <IonPage>
    <IonHeader class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-button slot="start" fill="clear">
          <IconParkOutlineClearFormat slot="icon-only" />
        </ion-button>
        <ion-button slot="end" fill="clear">
          <MaterialSymbolsAndroidContacts slot="icon-only" />
        </ion-button>
        <ion-title>通知</ion-title>
      </ion-toolbar>
    </IonHeader>
    <IonContent :fullscreen="true">
      <ion-searchbar placeholder="Search" />

      <ion-list lines="none">
        <ion-item
          v-for="item in data"
          :key="item.id"
          class="py-3"
          button
          @click="handleItemClick(item.id)"
        >
          <div slot="start" class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full">
            <IcBaselineNotificationsNone class="text-2xl text-[#71cc51]" />
          </div>
          <div class="pl-3 w-full">
            <div class="flex items-center justify-between mb-1">
              <div class="flex-center gap-2">
                <div class="text-md font-semibold">
                  {{ item.title }}
                </div>
                <div v-show="!item.read" class="h-2 w-2 bg-red-500 rounded-full" />
              </div>
              <ion-note slot="end" class="text-xs">
                {{ useDateFormat(item.date, 'MM/DD HH:mm') }}
              </ion-note>
            </div>
            <div class="text-xs overflow-hidden text-ellipsis">
              {{ item.content }}
            </div>
          </div>
        </ion-item>
      </ion-list>
    </IonContent>
  </IonPage>
</template>
