<script lang="ts" setup>
/**
 * 门店 VIP 开通记录弹窗
 * 按 store_id 拉取开通流水，重点展示开通人、等级、时效与开通时间
 */
import { computed, ref } from 'vue';

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

import { Empty, Pagination, Spin, Tag } from 'ant-design-vue';

import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';
import { getVipRecordList } from '#/views/system/vip/record/api';

const storeId = ref(0);
const storeName = ref('');
const loading = ref(false);
const items = ref<any[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);

const title = computed(
  () => `开通记录 - ${storeName.value || storeId.value || ''}`,
);

/**
 * 拉取当前门店开通记录
 * 为什么单独封装：弹窗打开、翻页都要复用同一套查询参数
 */
async function loadList() {
  if (!storeId.value) {
    items.value = [];
    total.value = 0;
    return;
  }
  loading.value = true;
  try {
    const res = await getVipRecordList({
      page: page.value,
      pageSize: pageSize.value,
      store_id: storeId.value,
    });
    items.value = Array.isArray(res?.items) ? res.items : [];
    total.value = Number(res?.total || 0);
  } finally {
    loading.value = false;
  }
}

/** 等级展示：只展示名称，不展示 CUSTOM/V1 等编码 */
function levelLabel(row: Record<string, any>) {
  return String(row?.level_name || '').trim() || '—';
}

/** 开通人兜底：无操作人时标明系统/未知 */
function operatorLabel(row: Record<string, any>) {
  const name = String(row?.operator_name || '').trim();
  if (name) return name;
  const id = Number(row?.operator_id || 0);
  if (id > 0) return `管理员#${id}`;
  return '—';
}

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  class: 'w-[820px]',
  showConfirmButton: false,
  cancelText: '关闭',
  onCancel() {
    modalApi.close();
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      storeId.value = 0;
      storeName.value = '';
      items.value = [];
      total.value = 0;
      page.value = 1;
      return;
    }
    const data = modalApi.getData<Record<string, any>>() || {};
    storeId.value = Number(data.store_id || 0);
    storeName.value = String(data.store_name || '');
    page.value = 1;
    modalApi.setState({ title: title.value });
    await loadList();
  },
});

/** 分页切换 */
function onPageChange(current: number, size: number) {
  page.value = current;
  pageSize.value = size;
  loadList();
}
</script>

<template>
  <Modal>
    <Spin :spinning="loading">
      <Empty
        v-if="!loading && !items.length"
        description="暂无开通记录"
      />
      <div v-else class="vip-record-list">
        <div
          v-for="row in items"
          :key="row.id"
          class="vip-record-card"
        >
          <div class="vip-record-card__badge">
            <VipBadgeCombo
              size="md"
              :badge-url="row.badge_url"
              :duration-badge-url="row.duration_badge_url"
              :level-name="row.level_name"
              :duration-label="row.duration_label"
            />
          </div>
          <div class="vip-record-card__body">
            <div class="vip-record-card__title">
              {{ levelLabel(row) }}
              <Tag class="ml-2">{{ row.duration_label || '—' }}</Tag>
              <Tag color="blue">{{ row.open_type_txt || '—' }}</Tag>
            </div>
            <div class="vip-record-card__meta">
              <span>开通人：{{ operatorLabel(row) }}</span>
              <span>开通时间：{{ row.created_at || '—' }}</span>
              <span>到期：{{ row.expire_at || '—' }}</span>
            </div>
            <div class="vip-record-card__meta">
              <span>原价 ¥{{ row.original_price ?? '0.00' }}</span>
              <span>实付 ¥{{ row.pay_amount ?? '0.00' }}</span>
              <span v-if="row.remark">备注：{{ row.remark }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="total > 0" class="mt-4 flex justify-end">
        <Pagination
          v-model:current="page"
          v-model:page-size="pageSize"
          :total="total"
          size="small"
          show-size-changer
          @change="onPageChange"
        />
      </div>
    </Spin>
  </Modal>
</template>

<style scoped>
.vip-record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}
.vip-record-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card, var(--background)));
}
.vip-record-card__badge {
  flex-shrink: 0;
}
.vip-record-card__body {
  min-width: 0;
  flex: 1;
}
.vip-record-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.vip-record-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 6px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}
</style>
