<template>
  <div class="pick-sku-cell">
    <div class="left">
      <img :src="$filters.urlToHttps(sku.image)" alt="" class="img">
    </div>
    <div class="right">
      <div class="name">{{sku.name}}</div>
      <div class="oparator">
        <div class="count">可退数量: {{sku.count - sku.currentCount}}</div>
        <div class="op">
          <PlusMinus
            :skuName="sku"
            :count="sku.currentCount"
            :maxCount="sku.count"
            @clickPlus="handlePlus"
            @clickMinus="handleMinus"
          ></PlusMinus>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PlusMinus from './plus-minus/plus-minus2.vue'
export default {
  components: {
    PlusMinus
  },
  props: {
    sku: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    handlePlus () {
      this.$emit('plus', this.index)
    },
    handleMinus () {
      this.$emit('minus', this.index)
    }
  }
}
</script>

<style lang="scss">
@import './pick-sku-cell.scss';
</style>