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

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

import { formatCurrency } from '../composables/stored-card-page/helpers';

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

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

function handleToggle() {
  emit('toggleStatus', props.item);
}
</script>

<template>
  <div
    class="msc-plan-card"
    :class="{ 'is-disabled': item.status === 'disabled' }"
  >
    <div class="msc-plan-card-head">
      <div class="msc-plan-amount">
        充 {{ formatCurrency(item.rechargeAmount) }}
      </div>
      <div class="msc-plan-gift">送 {{ formatCurrency(item.giftAmount) }}</div>
      <div class="msc-plan-arrived">
        到账 {{ formatCurrency(item.arrivedAmount) }}
      </div>
    </div>

    <div class="msc-plan-card-body">
      <div class="msc-plan-meta-item">
        累计充值 <span>{{ item.rechargeCount }}次</span>
      </div>
      <div class="msc-plan-meta-item">
        合计 <span>{{ formatCurrency(item.totalRechargeAmount) }}</span>
      </div>
    </div>

    <div class="msc-plan-card-foot">
      <Switch
        :checked="item.status === 'enabled'"
        :disabled="!canManage"
        @change="handleToggle"
      />
      <div class="msc-plan-actions">
        <button
          type="button"
          class="g-action"
          :disabled="!canManage"
          @click="emit('edit', item)"
        >
          编辑
        </button>
        <button
          type="button"
          class="g-action g-action-danger"
          :disabled="!canManage"
          @click="emit('remove', item)"
        >
          删除
        </button>
      </div>
    </div>
  </div>
</template>
