<template>
  <div v-if="item.skuId" class="confirm-goods" :class="className">
    <cr-image
      v-imogr="{ w: 85, h: 85 }"
      class="confirm-goods__left"
      :src="item.skuImg | imogr({ w: 85, h: 85 })"
      width="85px"
      height="85px"
      fit="contain"
    />
    <div class="confirm-goods__middle">
      <div class="Cg-middle__title">
        <span class="Cg-middle__name"> {{ item.skuName }} </span>
        <span class="Cg-middle__price"
          >¥{{ item.salePrice || '0.00'
          }}<template v-if="showCountView"
            ><br /><i>{{ showCount + '件' }}</i></template
          ></span
        >
      </div>
      <div class="Cg-middle__sku">
        <div>{{ item.skuAttr }}</div>
      </div>
      <div class="Cg-middle__stepper">
        <div v-if="item.activityCanBuyCount || item.commonLimitCount" class="Cg-middle__warn">
          <img v-if="item.newComersLabel" :src="item.newComersLabel.icon" />
          <img v-if="showActivityIcon" :src="showActivityIcon" />
          <span>限购{{ item.activityCanBuyCount || item.commonLimitCount }}件</span>
        </div>

        <div v-else-if="item.invalidStatusDesc" class="Cg-middle__invalid_warn">
          <cr-icon type="warning-plane" size="12px" color="#EC1500" />
          <span>{{ item.invalidStatusDesc }}</span>
        </div>
        <slot v-if="!isInvalid" name="stepbottom" :item="item" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    className: {
      type: String,
      default: ''
    },
    shopSkuList: {
      type: Array,
      default: () => []
    },
    isInvalid: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 1. 有效商品超过1件时，显示件数 2. 失效商品时，显示件数
    showCountView() {
      return this.shopSkuList.length > 1 || this.isInvalid;
    },
    showCount() {
      return this.item.count;
    },
    showActivityIcon() {
      // https://kdspstatic.91xr.cn/rush-purches-sku-info.png activityShareInfo
      return this.item?.activityShareInfo?.icon;
    }
  }
};
</script>

<style lang="less" scoped>
.confirm-goods {
  display: flex;
  padding: 8px 8px 12px 8px;
  background: @white;
  &__left {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    margin-right: @padding-xs + 2;
  }
  &__middle {
    flex: 1;
  }
  &.invalid {
    .Cg-middle__title,
    .Cg-middle__sku,
    .confirm-goods__left {
      opacity: 0.7;
    }
    .Cg-middle__name,
    .Cg-middle__price {
      color: @gray-4 !important;
    }
  }
}
.Cg-middle {
  &__title {
    .text-size(13);
    color: @black;
    display: flex;
    justify-content: space-between;
    margin-bottom: @padding-xs - 2;
  }
  &__name {
    .mx_multline_overwrite(2);
    margin-right: @padding-unit + 2;
  }
  &__price {
    text-align: right;
    margin-left: auto;
    i {
      font-style: normal;
      color: @gray-4;
    }
  }
  &__sku {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 18px;
    margin-top: 5px;
    .text-size(12);
    color: @gray-4;
  }
  &__stepper {
    display: flex;
    margin-top: 8px;
    .stepper {
      margin-left: auto;
    }
  }
  &__warn {
    display: flex;
    flex-direction: column;
    .text-size(13);
    color: @red-dark;
    img {
      margin-bottom: 4px;
      width: 30%;
    }
  }
  &__invalid_warn {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    color: @red-dark;
    span {
      margin-left: 4px;
      .text-size(13);
    }
  }
}
</style>
