<script setup lang="ts">
import type { PointMallProductCardViewModel } from '../types';

import { computed } from 'vue';

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

import { Tag } from 'ant-design-vue';

import {
  POINTS_MALL_PRODUCT_STATUS_TEXT_MAP,
  POINTS_MALL_REDEEM_TYPE_CLASS_MAP,
} from '../composables/points-mall-page/constants';
import {
  formatCurrency,
  formatPoints,
} from '../composables/points-mall-page/helpers';

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

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

const statusTagColor = computed(() =>
  props.item.status === 'enabled' ? 'green' : 'default',
);

const statusActionText = computed(() =>
  props.item.status === 'enabled' ? '下架' : '上架',
);

const redeemTypeClass = computed(
  () => POINTS_MALL_REDEEM_TYPE_CLASS_MAP[props.item.redeemType],
);

const statusText = computed(
  () =>
    props.item.statusText ||
    POINTS_MALL_PRODUCT_STATUS_TEXT_MAP[props.item.status] ||
    '未知',
);
</script>

<template>
  <div
    class="mpm-product-card"
    :class="{ 'is-disabled': item.status !== 'enabled' }"
  >
    <div class="mpm-product-image">
      <img v-if="item.imageUrl" :src="item.imageUrl" :alt="item.name" />
      <IconifyIcon v-else icon="lucide:image" />
    </div>

    <div class="mpm-product-body">
      <div class="mpm-product-name">
        <span>{{ item.name }}</span>
        <span class="mpm-type-tag" :class="redeemTypeClass">
          {{ item.redeemTypeText }}
        </span>
      </div>

      <div class="mpm-product-price">
        {{ formatPoints(item.requiredPoints) }}积分
        <span v-if="item.exchangeType === 'mixed'" class="cash">
          + {{ formatCurrency(item.cashAmount) }}
        </span>
      </div>

      <div class="mpm-product-meta">
        <span>库存 {{ formatPoints(item.stockAvailable) }}</span>
        <span>已兑换 {{ formatPoints(item.redeemedCount) }}</span>
      </div>

      <div class="mpm-product-footer">
        <button
          type="button"
          class="g-action"
          :disabled="!canManage"
          @click="emit('edit', item)"
        >
          编辑
        </button>
        <button
          type="button"
          class="g-action"
          :disabled="!canManage"
          @click="emit('toggleStatus', item)"
        >
          {{ statusActionText }}
        </button>
        <button
          type="button"
          class="g-action g-action-danger"
          :disabled="!canManage"
          @click="emit('remove', item)"
        >
          删除
        </button>
        <Tag :color="statusTagColor">{{ statusText }}</Tag>
      </div>
    </div>
  </div>
</template>
