<template>
  <div class="commodity-card" :class="{ active: active }">
    <div class="commodity-card-image">
      <div class="before" :style="{ paddingTop: paddingTop }"></div>
      <div class="image">
        <img :src="mainImageSrc" />
      </div>
      <!-- 左上角 -->
      <div class="img_top_left">
        <span v-if="showSelectIcon" class="select-icon"></span>
        <slot name="top_left"></slot>
      </div>
      <!-- 右上角 -->
      <div class="img_top_right">
        <slot name="top_right"></slot>
      </div>
      <!-- 左下角 -->
      <div class="img_bottom_left">
        <slot name="bottom_left"></slot>
      </div>
      <!-- 右下角 -->
      <div class="img_bottom_right">
        <slot name="operations"></slot>
      </div>
    </div>
    <div class="commodity-card-info">
      <!-- 颜色图片列表 -->
      <div v-if="hasImageList" class="color-image flex flex-gap-10">
        <div
          v-for="(img, index) in imageList"
          :key="index"
          class="color-image-item"
        >
          <img :src="getItemImagePath(img)" />
        </div>
      </div>

      <!-- 时间信息插槽 -->
      <slot name="time"></slot>

      <!-- 名称和价格 -->
      <!-- <div
        v-if="cardItem?.productName"
        class="commodity-card-name-price flex flex-justify-space-between"
      >
        <slot name="productName">
          <span>{{ cardItem?.productName }}</span>
        </slot>
        <slot name="price"></slot>
      </div> -->

      <!-- SKU信息 -->
      <div
        v-if="cardItem?.sku"
        class="commodity-card-sku"
        @click.stop="copy(String(cardItem?.sku))"
      >
        <!-- <img src="../assets/images/id.png" height="20" /> -->
        <span>{{ cardItem?.sku }}</span>
      </div>
      <slot name="images"></slot>
      <!-- 自定义信息 -->
      <slot name="info"></slot>
    </div>
  </div>
</template>

<script>
/**
 * 通用卡片封装 BaseCard
 * 基于ElementUI el-card二次封装，配置驱动 + 多插槽拓展
 * @prop {Object} cardConfig 卡片核心配置对象
 * @prop {String} bodyPadding 卡片body内边距，默认 0px
 */
export default {
  name: "BaseCard",
  props: {
    cardItem: {
      type: Object,
      default: () => ({})
    },
    active: {
      type: Boolean,
      default: false
    },
    showSelectIcon: {
      type: Boolean,
      default: true
    },
    showSku: {
      type: Boolean,
      default: false
    },
    showProductInfo: {
      type: Boolean,
      default: false
    },
    showImageList: {
      type: Boolean,
      default: false
    },
    imageField: {
      type: String,
      default: "variantImage"
    },
    imageListField: {
      type: String,
      default: "imageList"
    },
    imagePathField: {
      type: String,
      default: "imagePath"
    },
    paddingTop: {
      type: String,
      default: "120%"
    }
  },
  data() {
    return { imageList: [] };
  },
  computed: {
    hasImageList() {
      return true;
    },
    mainImageSrc() {
      const item = this.cardItem;

      // 使用索引访问避免联合类型的属性访问问题
      if (
        this.imageField === "variantImage" &&
        typeof item[this.imageField] === "string"
      ) {
        return item[this.imageField];
      }
      if (
        this.imageField === "mainImage" &&
        typeof item[this.imageField] === "string"
      ) {
        return item[this.imageField];
      }
      // 默认返回空字符串
      return "";
    }
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.commodity-card {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.commodity-card-image {
  position: relative;
  border: 1px solid #eee;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .img_top_left {
    position: absolute;
    top: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .img_top_right {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .img_bottom_left {
    position: absolute;
    bottom: 5px;
    left: 5px;
  }

  .img_bottom_right {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    :deep(.svg-icon) {
      width: 2em;
      height: 2em;
    }
  }
}

.before {
  height: 0;
}

.image {
  position: absolute;
  // position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

.color-image {
  .color-image-item {
    width: 50px;
    height: 50px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}

.commodity-card-info {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  background: linear-gradient(
    90deg,
    rgba(228, 228, 228, 0.4) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.commodity-card-name-price {
  height: 30px;
  line-height: 30px;
}

.commodity-card-sku {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #fff;
  cursor: pointer;
}

.select-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid #cccccc;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4) inset;
  border-radius: 8px;
  background: #fff;
}

.commodity-card.active .select-icon {
  background: #4168ff;
  position: relative;
  border-color: #4168ff;
  box-shadow: none;
  font-size: 18px;
  top: -1px;
  left: -1px;
}

.commodity-card.active .select-icon::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
  transform: rotate(45deg) scale(0.8);
}
</style>
