<template>
  <img v-if="logoSrc" :src="logoSrc" alt="card-logo" style="width: 100%" />
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import c1 from "@/assets/img/b4f258fb3fcfa.svg";
import c2 from "@/assets/img/d9f501073fcfa.svg";
import c3 from "@/assets/img/761998023fcfa.svg";
import c4 from "@/assets/img/272b931f3fcfa.svg";
import c5 from "@/assets/img/d2820b3b3fcfa.svg";
import c6 from "@/assets/img/e62e66803fcfa.svg";
import c7 from "@/assets/img/c8e88e5f3fcfa.svg";
import c8 from "@/assets/img/1a32e1333fcfa.svg";

export default defineComponent({
  name: "CardLogo",
  props: {
    cardType: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const logoSrc = computed(() => {
      if (!props.cardType) {
        return null
      }
      const cardTypeUpper = props.cardType?.toLocaleUpperCase();

      if (cardTypeUpper.includes("VISA")) {
        return c1;
      } else if (cardTypeUpper.includes("MASTERCARD")) {
        return c2;
      } else if (cardTypeUpper.includes("JCB")) {
        return c3;
      } else if (cardTypeUpper.includes("CHINA UNION PAY")) {
        return c4;
      } else if (cardTypeUpper.includes("AMERICAN EXPRESS")) {
        return c5;
      } else if (cardTypeUpper.includes("DISCOVER")) {
        return c6;
      } else if (cardTypeUpper.includes("MAESTRO")) {
        return c7;
      } else if (cardTypeUpper.includes("DINNERS")) {
        return c8;
      }
      // 你可以添加更多的卡类型和对应的图片
      return null; // 如果没有匹配的卡类型，则不显示图片
    });

    return {
      logoSrc,
    };
  },
});
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>
