<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="name">{{ shopInfo.name }}</div>
      <div class="change" v-if="choiceList.length">
        <span v-if="confStr">{{ confStr }}</span>
        <span v-else>请选择 商品分类</span>
      </div>
    </div>
    <div class="price-num">
      <div class="price">￥{{ goodsInfo.price }}</div>
      <div class="num">*{{ num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shop-payment-commodity',
  props: {
    shopInfo: {
      default() {
        return {};
      }
    },
    goodsInfo: {
      default() {
        return {};
      }
    },
    choiceList: {
      default() {
        return [];
      }
    },
    num: {
      default() {
        return 0;
      }
    }
  },
  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.15rem 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 {
    flex: 1;
    .name {
      line-height: 0.2rem;
      font-size: 0.12rem;
      word-break: break-all;
      color: #000;
    }
    .change {
      line-height: 0.25rem;
      font-size: 0.12rem;
      word-break: break-all;
      color: #999999;
    }
  }
  .price-num {
    line-height: 0.2rem;
    text-align: right;
    .price {
      flex: 0 0 auto;
      color: #ff4802;
      font-size: 0.16rem;
      font-weight: bold;
    }
    .num {
      font-size: 0.12rem;
      color: #999999;
    }
  }
}
</style>
