<template>
  <div class="similar">
    <div v-if="skuInfo" class="similar-wrapper">
      <div class="similar-info">
        <div class="similar-info-image">
          <cr-image width="117px" height="100px" fit="contain" :src="skuInfo.imageUrl" />
        </div>
        <div class="similar-info-right">
          <div class="similar-info-title">
            {{ skuInfo.skuName }}
          </div>
          <div class="similar-info-price">{{ skuInfo.salePrice }}</div>
          <div class="similar-info-count">已售{{ skuInfo.saleCount }}件</div>
        </div>
      </div>
    </div>

    <browse-goods-list :status="1" :params="queryParams" />
  </div>
</template>

<script>
import browseGoodsList from './components/browseGoodsList.vue';
import { basicSkuInfoQuery } from '@/api/browse.api';
export default {
  components: {
    browseGoodsList
  },
  data() {
    return {
      skuInfo: null
    };
  },
  computed: {
    queryParams() {
      const goodsId = this.$route.query.goodsId;
      return { goodsId };
    }
  },
  created() {
    this.basicSkuInfoQuery();
  },
  methods: {
    async basicSkuInfoQuery() {
      const [res, error] = await basicSkuInfoQuery(this.$route.query.goodsId);
      if (!error) {
        this.$set(this, 'skuInfo', {
          imageUrl: res.imageUrl,
          skuName: res.skuName,
          salePrice: res.salePrice,
          saleCount: res.saleCount
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.similar {
  color: @black;
  &-wrapper {
    padding: @padding-sm @padding-sm 0 @padding-sm;
  }
  &-info {
    background: @white;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    &-image {
      width: 117px;
      height: 100px;
      overflow: hidden;
    }
    &-right {
      flex: 1;
      padding-left: 8px;
      box-sizing: border-box;
    }
    &-title {
      .text-size(12);
      .mx_multline_overwrite();
      min-height: 36px;
    }
    &-price {
      .text-size(18);
      color: @red;
      font-weight: 500;
      padding-top: 18px;
      &::before {
        content: '¥';
        font-size: 0.7em;
        font-weight: bold;
      }
    }
    &-count {
      color: @gray-4;
      .text-size(12);
    }
  }
}
</style>
