<template>
  <main class="min-h-screen bg-gray-50 p-8">
    <div class="mx-auto max-w-5xl space-y-6">
      <a-card class="shadow-sm" title="文章列表 (pageAppArticle)">
        <div class="flex flex-wrap items-center gap-3">
          <a-input-password
            v-model:value="token"
            class="w-96"
            placeholder="Authorization (AccessToken)"
          />
          <a-button :disabled="pending" @click="applyToken">设置Token</a-button>
          <a-button :disabled="pending" danger @click="clearToken">清除Token</a-button>
          <a-input
            v-model:value="keywords"
            class="w-72"
            placeholder="关键词 keywords"
            @pressEnter="doSearch"
          />
          <a-button :loading="pending" type="primary" @click="doSearch">查询</a-button>
          <a-button :disabled="pending" @click="refresh">刷新</a-button>
          <div class="text-sm text-gray-500">
            TenantId: {{ tenantId }}
          </div>
        </div>

        <a-alert
          v-if="error"
          :message="String(error)"
          class="mt-4"
          show-icon
          type="error"
        />

        <a-table
          :data-source="list"
          :loading="pending"
          :pagination="false"
          class="mt-4"
          row-key="articleId"
          size="middle"
        >
          <a-table-column data-index="articleId" title="ID" width="90" />
          <a-table-column data-index="title" title="标题" />
          <a-table-column data-index="code" title="编号" width="220" />
          <a-table-column data-index="categoryName" title="栏目" width="160" />
          <a-table-column data-index="createTime" title="创建时间" width="180" />
        </a-table>

        <div class="mt-4 flex items-center justify-end">
          <a-pagination
            :current="page"
            :page-size="limit"
            :page-size-options="['10', '20', '50', '100']"
            :total="total"
            show-size-changer
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-card>
    </div>
  </main>
</template>

<script lang="ts" setup>
import { pageAppArticle as pageCmsArticle } from '@/api/app/article'
import { getToken, removeToken, setToken } from '@/utils/token-util'

const config = useRuntimeConfig()
const tenantId = computed(() => String(config.public.tenantId))

const page = ref(1)
const limit = ref(10)
const keywords = ref('')
const token = ref('')

onMounted(() => {
  token.value = getToken()
})

const { data, pending, error, refresh } = useAsyncData(
  'app-article-page',
  () =>
    pageCmsArticle({
      page: page.value,
      limit: limit.value,
      keywords: keywords.value || undefined
    }),
  { server: false }
)

const list = computed(() => data.value?.list ?? [])
const total = computed(() => data.value?.count ?? 0)

function applyToken() {
  setToken(token.value, true)
  refresh()
}

function clearToken() {
  removeToken()
  token.value = ''
  refresh()
}

function doSearch() {
  page.value = 1
  refresh()
}

function onPageChange(nextPage: number) {
  page.value = nextPage
  refresh()
}

function onPageSizeChange(_current: number, nextSize: number) {
  limit.value = nextSize
  page.value = 1
  refresh()
}
</script>
