<template>
  <div class="shop-commodity-box">
    <div class="img">
      <img :src="`${shopInfo.imgs[0]}?x-oss-process=style/commodity_cover`" alt="" />
    </div>
    <div class="content">
      <div class="price">￥{{ goodsInfo.price }}</div>
      <div class="change" v-if="choiceList.length">
        <span v-if="confStr">已选：{{ confStr }}</span>
        <span v-else>请选择商品分类</span>
      </div>
      <div class="limit" v-if="shopInfo.limitNum">限购 {{ shopInfo.limitNum }} 件</div>
      <div class="stock">库存 {{ goodsInfo.stock }} 件</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'shop-choice-commodity',
  props: {
    shopInfo: {
      default() {
        return {};
      }
    },
    goodsInfo: {
      default() {
        return {};
      }
    },
    choiceList: {
      default() {
        return [];
      }
    }
  },
  computed: {
    confStr() {
      let str = '';
      for (let i = 0; i < this.choiceList.length; i++) {
        const listItem = this.choiceList[i];
        for (let j = 0; j < listItem.spec_value.length; j++) {
          const item = listItem.spec_value[j];
          if (item.select) {
            str += str ? `，${item.name}` : item.name;
          }
        }
      }
      return str;
    }
  }
};
</script>

<style lang="less" scoped>
.shop-commodity-box {
  display: flex;
  padding: 0.1rem 0;
  .img {
    flex: 0 0 auto;
    margin-right: 0.1rem;
    width: 0.88rem;
    height: 0.88rem;
    border-radius: 0.04rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    .price {
      flex: 0 0 auto;
      line-height: 0.2rem;
      color: #ff4802;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .change {
      flex: 1;
      margin: 0.1rem 0;
      line-height: 0.2rem;
      font-size: 0.12rem;
      word-break: break-all;
      color: #000000;
    }
    .limit {
      flex: 0 0 auto;
      line-height: 0.2rem;
      color: #fc5147;
      font-size: 0.12rem;
    }
    .stock {
      position: absolute;
      bottom: 0;
      right: 0.1rem;
      line-height: 0.2rem;
      font-size: 0.12rem;
      color: #999999;
    }
  }
}
</style>
