/**
  购物车-店铺商品插槽组件
 */
<template>
  <div class="cartItemSlot">
    <div v-for="(item, index) in list" :key="index" class="main-list">
      <div v-if="item.skus.length" class="main-shop">
        <el-checkbox v-model="item.selected" :true-label="1" :false-label="0" @change="selectShop(item)" />
        <span class="goToStore" @click="toStore(item.shopId)">
          店铺: {{ item.shopName }}
        </span>
      </div>
      <div class="pro-list">
        <div v-for="(shopItem, j) in item.skus" :key="j" class="pro-item">
          <div class="top">
            <el-checkbox v-model="shopItem.selected" :true-label="1" :false-label="0" @change="selectProduct" />
            <div class="item">
              <img :src="shopItem.image" alt="" @click="goToProductDetail(shopItem, item.shopId)">
            </div>
            <div class="pro-des">
              <div>
                <p @click="goToProductDetail(shopItem, item.shopId)">{{ shopItem.productName }}</p>
                <p>
                  <span>{{ shopItem.sku }}</span>
                  <span>{{ shopItem.value }}</span>
                </p>
              </div>
            </div>
            <div class="item">
              <p>¥ {{ shopItem.price }}</p>
            </div>
            <div class="item">
              <el-input-number
                v-model="shopItem.number" :disabled="!shopItem.shelveState" :min="1"
                :max="shopItem.stockNumber" :step="1" label="描述文字" size="small"
                @change="handleChange(shopItem)"
              ></el-input-number>
            </div>
            <div class="item">
              <p v-if="shopItem.shelveState">¥ {{ shopItem.total }}</p>
              <p v-else class="fs20">(已下架)</p>
            </div>
            <div class="item">
              <p v-throttle @click="confirDelete(shopItem)">
                <icon-svg style="font-size:30px; margin-left: 30px;" icon-class="del" />
              </p>
            </div>
          </div>
          <!-- 领取优惠券 -->
          <div class="discount">
            优惠券
            <div class="pop-box">
              <div class="box-content">
                <p class="title">可领取的优惠券:</p>
                <ul>
                  <li v-for="(d, dIndex) in shopItem.markTools" :key="dIndex">
                    <p>¥{{ d.count }}</p>
                    <p>
                      <span>{{ d.discount }}</span>
                      <span>{{ d.time }}</span>
                    </p>
                    <p>领取</p>
                  </li>
                  <li v-for="(d, dIndex) in shopItem.shopMarkTools" :key="dIndex">
                    <p>¥{{ d.count }}</p>
                    <p>
                      <span>{{ d.discount }}</span>
                      <span>{{ d.time }}</span>
                    </p>
                    <p>领取</p>
                  </li>
                </ul>
                <!-- <ul v-else>
                  暂无优惠券
                  </ul> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped></style>
