<template>
  <div class="goods-popup-selected">
    <cr-image :src="info.imageUrl | imogr({ w: 100, h: 100 })" width="2.67rem" height="2.67rem" />
    <div class="Gp-selected-right">
      <div class="Gps-right-header">
        <div class="Gpsr-header-price">
          <span>¥</span>
          <span>{{ info.salePrice }}</span>
        </div>
        <!-- <div v-if="detailInfo.marketPrice" class="Gpsr-header-discount">
                <span>原价：</span>
                <span>¥{{ detailInfo.marketPrice }}</span>
              </div> -->
      </div>
      <div v-if="info.spec" class="Gps-right-selected">已选：{{ info.spec }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SelectSku',
  props: {
    info: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>
<style lang="less" scoped>
.goods-popup-selected {
  display: flex;
  align-items: flex-end;
  padding: 0 @padding-lg;
  margin: @padding-md + 2 0;
  .cr-image {
    border-radius: @border-radius-sm;
    overflow: hidden;
    border: 1px solid #f7f7f7;
  }

  .Gp-selected-right {
    display: flex;
    flex-direction: column;
    padding-left: @padding-sd;
    align-items: flex-start;
    .Gps-right-header {
      display: flex;
      align-items: center;

      .Gpsr-header-price {
        margin-right: @padding-x;
        line-height: 0;
        span {
          color: @red-light;
          font-weight: @font-weight-bold;
          &:first-child {
            .text-size(14);
          }

          &:last-child {
            .text-size(24);
          }
        }
      }

      .Gpsr-header-discount {
        .text-size(12);
        color: @gray-4;

        span {
          &:last-child {
            text-decoration: line-through;
          }
        }
      }
    }

    .Gps-right-selected {
      .text-size(13);
      color: @black;
      display: inline-block;
    }
  }
}
</style>
