<template>
  <div class="bg-white border-box rounded-12 px-12 pt-12 mb-12">
    <span class="font-size-16 color-171717 line-height-24 font-500">
      核销凭证列表
    </span>

    <div
      class="flex flex-items-center flex-justify-between py-12"
      :class="[
        index + 1 === props.orderData.commodityPackageConfig.length
          ? ''
          : 'border-bottom',
      ]"
      v-for="(item, index) in props.orderData.commodityPackageConfig"
      :key="item.name"
    >
      <div class="flex flex-col">
        <span class="span-color-900 font-size-16">{{ item.name }}</span>
        <div class="flex flex-row mt-8">
          <div class="bg-F5F7FA span-color-600 font-size-12 p-4 rounded-4 mr-4">
            总计{{ item.count }}{{ item.unit }}
          </div>
          <div
            class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4"
          >
            剩{{ item.count - item.writeOffCount }}{{ item.unit }}可用
          </div>
        </div>
      </div>

      <div
        class="flex flex-items-center px-14 py-8 rounded-8"
        :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-gray']"
        @click="handleShowQrcode(item, index)"
      >
        <span v-if="item.packageStatus === 0" class="font-size-14 color-white"
          >出示凭证</span
        >
        <span v-else class="font-size-14 span-color-300">已核销</span>
      </div>
    </div>
  </div>
</template>

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

const emit = defineEmits(["selected"]);

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

const handleShowQrcode = (item, index) => {
  console.log("显示核销凭证二维码，凭证信息：", item);
  if (item.packageStatus !== 0) {
    uni.showToast({
      title: "该凭证已核销使用",
      icon: "none",
    });
    return;
  }
  emit("selected", { item, index });
};
</script>
