<script lang="ts" setup>
/**
 * 门店 VIP 开通页：点击徽标先进入 VIP 入口（升级 / 开通记录）
 */
import { Page, useVbenModal } from '@vben/common-ui';

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

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

defineOptions({ name: 'VipStore' });

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
const [HubModalComp, hubModalApi] = useVbenModal({
  connectedComponent: VipHubModal,
});

/** 打开 VIP 入口弹窗 */
const openVip = (row: any) => {
  hubModalApi.setData({
    store_id: row.store_id,
    store_name: row.store_name,
    vip: row.vip,
    gridApi,
  });
  hubModalApi.open();
};
</script>
<template>
  <Page auto-content-height title="门店VIP开通">
    <HubModalComp />
    <div class="p-4">
      <Grid>
        <template #vip_badge="{ row }">
          <div
            class="cursor-pointer"
            @click="openVip(row)"
          >
            <VipBadgeCombo
              size="md"
              :badge-url="row.vip?.badge_url"
              :duration-badge-url="row.vip?.duration_badge_url"
              :level-name="row.vip?.level_name"
              :duration-label="row.vip?.duration_label"
            />
          </div>
        </template>
        <template #action="{ row }">
          <TableAction
            :actions="[{ label: 'VIP管理', onClick: () => openVip(row) }]"
          />
        </template>
      </Grid>
    </div>
  </Page>
</template>
