<template>
  <div class="admin-mobile-list">
    <q-inner-loading :showing="loading" label="加载中..." />

    <template v-if="rows.length">
      <article v-for="row in rows" :key="row.id" class="admin-mobile-card">
        <div class="admin-mobile-card__head">
          <div>
            <h3>{{ row.title }}</h3>
            <p>{{ row.subtitle }}</p>
          </div>
          <AdminStatusChip :label="row.status" :tone="row.statusTone" />
        </div>
        <div class="admin-mobile-card__meta">
          <q-icon name="schedule" />
          {{ row.meta }}
        </div>
        <div class="admin-mobile-card__actions">
          <q-btn
            v-for="action in row.actions"
            :key="action.key"
            dense
            round
            flat
            :color="action.color"
            :icon="action.icon"
            :loading="actionBusy === `${action.key}:${row.id}`"
            :disable="loading || !!actionBusy"
            @click="$emit('action', action.key, row.raw)"
          >
            <q-tooltip>{{ action.label }}</q-tooltip>
          </q-btn>
        </div>
      </article>
    </template>

    <AdminEmptyState v-else />

    <div class="admin-mobile-list__pager">
      <q-pagination
        :model-value="page"
        :max="pageCount"
        :disable="loading"
        input
        @update:model-value="$emit('page', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AdminAction, AdminMobileRow, AdminRow } from "../types";
import AdminEmptyState from "./AdminEmptyState.vue";
import AdminStatusChip from "./AdminStatusChip.vue";

defineProps<{
  rows: AdminMobileRow[];
  loading: boolean;
  page: number;
  pageCount: number;
  actionBusy: string;
}>();

defineEmits<{
  page: [page: number];
  action: [action: AdminAction, row: AdminRow];
}>();
</script>