<template>
  <div class="bg-white  rounded-[12px] px-12 pt-[12px] mb-[12px]">
    <span class="text-[16px] text-[#171717] leading-[24px] font-medium">
      {{ t("order.voucher.title") }}
    </span>

    <div class="flex items-center justify-between py-12" :class="[
      index + 1 === props.orderData.commodityPackageConfig.length
        ? ''
        : 'border-b border-ink-200',
    ]" v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
      <div class="flex flex-col">
        <span class="span-color-900 text-[16px]">{{ item.name }}</span>
        <div class="flex flex-row mt-[8px]">
          <div class="bg-[#f5f7fa] span-color-600 text-[12px] p-4 rounded-[4px] mr-[4px]">
            {{ t("order.qrcode.total") }}{{ item.count }}{{ item.unit }}
          </div>
          <div class="bg-[#f0f8f3] text-[#2D91FF] text-[12px] p-4 rounded-[4px]">
            {{ t("order.qrcode.remaining") }}{{ item.count - item.writeOffCount }}{{ item.unit }}{{
              t("order.qrcode.available") }}
          </div>
        </div>
      </div>

      <div class="flex items-center px-14 py-8 rounded-[8px]"
        :class="[item.packageStatus === 0 ? 'bg-[#f0f8f3]' : 'bg-gray']" @click="handleShowQrcode(item, index)">
        <span v-if="item.packageStatus === 0" class="text-[14px] text-white">{{ t("order.voucher.show") }}</span>
        <span v-else class="text-[14px] span-color-300">{{ t("order.voucher.used") }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { useI18n } from "vue-i18n";

const emit = defineEmits(["selected"]);
const { t } = useI18n();

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const handleShowQrcode = (item, index) => {
  console.log("显示核销凭证二维码，凭证信息：", item);
  if (item.packageStatus !== 0) {
    showToast(t("order.voucher.usedToast"));
    return;
  }
  emit("selected", { item, index });
};
</script>
