<script lang="ts" setup>
/**
 * VIP 开通记录列表：组合徽标（等级+丝带）+ 原价/实付
 */
import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import VipBadgeCombo from '#/components/vip/VipBadgeCombo.vue';

import { formOptions } from './config/search';
import { gridOptions } from './config/table';

defineOptions({ name: 'VipRecord' });

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
</script>
<template>
  <Page auto-content-height title="VIP开通记录">
    <div class="p-4">
      <Grid>
        <template #vip_badge="{ row }">
          <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"
          />
        </template>
      </Grid>
    </div>
  </Page>
</template>
