<script lang="ts" setup>
/**
 * VIP 时效类型徽标：卡片布局 + 筛选（名称/编码/状态）
 * 卡片突出展示宽幅丝带图
 */
import { onMounted, reactive, ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import {
  Button,
  Card,
  Empty,
  Input,
  Pagination,
  Select,
  Tag,
} from 'ant-design-vue';

import { TableAction } from '#/components/table-action';

import { getVipDurationList } from './api';
import FormModal from './components/modal.vue';

defineOptions({ name: 'VipDuration' });

const STATUS_OPTIONS = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 },
];

const loading = ref(false);
const list = ref<any[]>([]);
const total = ref(0);
const page = reactive({ current: 1, pageSize: 10 });
const filters = reactive({
  code: '',
  name: '',
  status: undefined as number | undefined,
});

const [FormModalComp, formModalApi] = useVbenModal({
  connectedComponent: FormModal,
});

async function loadList() {
  loading.value = true;
  try {
    const res = await getVipDurationList({
      page: page.current,
      pageSize: page.pageSize,
      code: filters.code || undefined,
      name: filters.name || undefined,
      status: filters.status,
    });
    list.value = res?.items || [];
    total.value = Number(res?.total || 0);
  } finally {
    loading.value = false;
  }
}

function onSearch() {
  page.current = 1;
  loadList();
}

function onReset() {
  filters.code = '';
  filters.name = '';
  filters.status = undefined;
  onSearch();
}

const showModal = (row: any) => {
  formModalApi.setData({
    values: row,
    gridApi: { query: loadList, reload: loadList },
  });
  formModalApi.open();
};

onMounted(loadList);
</script>
<template>
  <Page auto-content-height title="时效类型徽标">
    <FormModalComp />
    <div class="p-4">
      <div class="mb-4 flex flex-wrap items-center gap-3">
        <Input
          v-model:value="filters.code"
          allow-clear
          placeholder="时效编码"
          class="w-36"
          @press-enter="onSearch"
        />
        <Input
          v-model:value="filters.name"
          allow-clear
          placeholder="时效名称"
          class="w-40"
          @press-enter="onSearch"
        />
        <Select
          v-model:value="filters.status"
          allow-clear
          placeholder="状态"
          class="w-28"
          :options="STATUS_OPTIONS"
        />
        <Button type="primary" @click="onSearch">查询</Button>
        <Button @click="onReset">重置</Button>
      </div>
      <Empty v-if="!loading && !list.length" description="暂无时效类型" />
      <div
        v-else
        class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
      >
        <Card
          v-for="item in list"
          :key="item.id"
          size="small"
          class="vip-duration-card"
          :loading="loading"
        >
          <div class="flex flex-col items-center">
            <div class="vip-duration-card__ribbon-wrap mb-4">
              <img
                v-if="item.badge_url"
                :src="item.badge_url"
                alt=""
                class="vip-duration-card__ribbon"
              />
              <div v-else class="vip-duration-card__ribbon-empty">
                未上传丝带
              </div>
            </div>
            <div class="mb-1 text-lg font-semibold dark:text-gray-100">{{ item.name }}</div>
            <div class="mb-2 text-sm text-gray-500 dark:text-gray-400">{{ item.code }}</div>
            <Tag
              class="mb-3"
              :color="item.status === 1 ? 'success' : 'default'"
            >
              {{ item.status === 1 ? '启用' : '禁用' }}
            </Tag>
            <TableAction
              :actions="[{ label: '编辑上传丝带', onClick: () => showModal(item) }]"
            />
          </div>
        </Card>
      </div>
      <div class="mt-4 flex justify-end">
        <Pagination
          v-model:current="page.current"
          v-model:page-size="page.pageSize"
          :total="total"
          :page-size-options="['10', '20', '50']"
          show-size-changer
          @change="loadList"
          @show-size-change="loadList"
        />
      </div>
    </div>
  </Page>
</template>
<style scoped>
.vip-duration-card :deep(.ant-card-body) {
  padding: 24px 20px;
}
.vip-duration-card__ribbon-wrap {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 16px 12px;
}
.vip-duration-card__ribbon {
  max-width: 100%;
  height: 56px;
  object-fit: contain;
}
.vip-duration-card__ribbon-empty {
  color: #999;
  font-size: 13px;
}
html.dark .vip-duration-card__ribbon-wrap,
.dark .vip-duration-card__ribbon-wrap {
  background: rgba(255, 255, 255, 0.06);
}
html.dark .vip-duration-card__ribbon-empty,
.dark .vip-duration-card__ribbon-empty {
  color: #a1a1aa;
}
</style>
