<script setup lang="ts">
/**
 * 文件职责：次卡列表卡片。
 */
import type { PunchCardTemplateCardViewModel } from '../types';

import { IconifyIcon } from '@vben/icons';

import {
  PUNCH_CARD_SCOPE_TEXT_MAP,
  PUNCH_CARD_STATUS_TEXT_MAP,
} from '../composables/punch-card-page/constants';
import { formatCurrency } from '../composables/punch-card-page/helpers';

const props = defineProps<{
  canManage: boolean;
  item: PunchCardTemplateCardViewModel;
}>();

const emit = defineEmits<{
  (event: 'edit', row: PunchCardTemplateCardViewModel): void;
  (event: 'remove', row: PunchCardTemplateCardViewModel): void;
  (event: 'toggleStatus', row: PunchCardTemplateCardViewModel): void;
}>();

function resolveScopeClass(
  scopeType: PunchCardTemplateCardViewModel['scopeType'],
) {
  if (scopeType === 'category') {
    return 'is-blue';
  }
  if (scopeType === 'tag') {
    return 'is-green';
  }
  if (scopeType === 'product') {
    return 'is-purple';
  }
  return 'is-orange';
}

function resolveUsageModeText(row: PunchCardTemplateCardViewModel) {
  if (row.usageMode === 'cap') {
    return `上限${formatCurrency(row.usageCapAmount ?? 0)}/次`;
  }
  return '完全免费';
}

function resolveDailyLimitText(value: null | number) {
  if (!value || value <= 0) {
    return '不限次/日';
  }
  return `每日限${value}次`;
}

function resolveStatusClass(status: PunchCardTemplateCardViewModel['status']) {
  return status === 'enabled' ? 'is-green' : 'is-gray';
}
</script>

<template>
  <div class="mpc-card" :class="{ 'mpc-card-off': item.isDimmed }">
    <div class="mpc-card-cover">
      <img
        v-if="item.coverImageUrl"
        :src="item.coverImageUrl"
        :alt="item.name"
        class="mpc-card-cover-image"
      />
      <div v-else class="mpc-card-cover-fallback">
        <IconifyIcon icon="lucide:ticket" class="mpc-card-cover-icon" />
        <div class="mpc-card-cover-count">
          {{ item.totalTimes }}
          <small>次</small>
        </div>
      </div>
    </div>

    <div class="mpc-card-body">
      <div class="mpc-card-name-row">
        <div class="mpc-card-name">{{ item.name }}</div>
        <span class="mpc-scope-tag" :class="resolveScopeClass(item.scopeType)">
          {{ PUNCH_CARD_SCOPE_TEXT_MAP[item.scopeType] }}
        </span>
      </div>

      <div class="mpc-card-price-row">
        <span class="mpc-card-price-now">{{
          formatCurrency(item.salePrice)
        }}</span>
        <span v-if="item.originalPrice" class="mpc-card-price-origin">
          {{ formatCurrency(item.originalPrice) }}
        </span>
      </div>

      <div class="mpc-card-info-tags">
        <span class="mpc-card-info-tag">{{ item.validitySummary }}</span>
        <span class="mpc-card-info-tag">{{ resolveUsageModeText(item) }}</span>
        <span class="mpc-card-info-tag">{{
          resolveDailyLimitText(item.dailyLimit)
        }}</span>
      </div>

      <div class="mpc-card-meta">
        <span>已售 {{ item.soldCount }}</span>
        <span>使用中 {{ item.activeCount }}</span>
      </div>

      <div class="mpc-card-actions">
        <button
          type="button"
          class="g-action"
          :disabled="!props.canManage"
          @click="emit('edit', item)"
        >
          编辑
        </button>
        <button
          type="button"
          class="g-action"
          :disabled="!props.canManage"
          @click="emit('toggleStatus', item)"
        >
          {{ item.status === 'enabled' ? '下架' : '上架' }}
        </button>
        <button
          type="button"
          class="g-action g-action-danger"
          :disabled="!props.canManage"
          @click="emit('remove', item)"
        >
          删除
        </button>
        <span class="mpc-status-tag" :class="resolveStatusClass(item.status)">
          {{ PUNCH_CARD_STATUS_TEXT_MAP[item.status] }}
        </span>
      </div>
    </div>
  </div>
</template>
