<template>
  <Modal
    v-model="visiable"
    :loading="fetchingNoSale"
    :transfer="true"
    sure-text="不卖了"
    cancel-text="继续出售"
    @on-sure="onSure"
  >
    <div class="change-price-modal" v-if="skc.storageNum > 1">
      <p class="modal-title">选择你要下架的数量</p>
      <InputUfo v-model="unStockNum" :maxlength="8" :readonly="true" class="inp-unstock">
        <i slot="prepend" class="iconfont iconplus-minus" @touchend="onChangeNum(-1)"></i>
        <i slot="append" class="iconfont iconi-add" @touchend="onChangeNum(1)"></i>
      </InputUfo>
      <p class="stock-txt">
        目前还有{{storageNum}}个库存
      </p>
      <p class="tips">
        下架商品保证金会被释放
      </p>
    </div>
    <div class="change-price-modal">
      <p class="modal-title">您确定不卖此商品吗？</p>
    </div>
  </Modal>
</template>

<script>
import Modal from './modal';
import InputUfo from './input-ufo';
import {createNamespacedHelpers} from 'vuex';

const {mapState} = createNamespacedHelpers('order/priceChange');

export default {
  name: 'ModalUnstock',
  components: {Modal, InputUfo},
  data() {
    return {
      visiable: false,
      skc: {},
      unStockNum: 1,
      storageNum: 1
    };
  },
  computed: {
    ...mapState(['fetchingNoSale'])
  },
  methods: {
    show({skc}) {
      this.skc = skc;
      this.unStockNum = 1;
      this.storageNum = skc.storageNum;
      this.visiable = true;
    },
    hide() {
      this.skc = {};
      this.storageNum = 1;
      this.unStockNum = 1;
      this.visiable = false;
    },
    onSure() {
      this.$emit('on-no-sale', {skc: this.skc, num: this.unStockNum});
    },
    onInput(val) {
      this.$emit('input', val);
    },
    onChangeNum(num) {
      const value = this.unStockNum + num;

      if (value <= 0 || value > this.storageNum) {
        return;
      }

      this.unStockNum = value;
    }
  }
};
</script>

<style lang="scss" scoped>
.change-price-modal {
  .stock-txt {
    margin: 20px 0 10px 0;
  }

  .tips {
    margin-bottom: 10px;
    color: #999;
  }

  .inp-unstock {
    margin-bottom: 10px;

    /deep/ .iconfont {
      padding: 34px 40px;
      width: 112px;
      font-size: 32px;
      color: #999;
      font-weight: 600;
    }

    /deep/ .cube-input-field {
      text-align: center;
    }
  }

  .modal-title {
    line-height: 100px;
    text-align: center;
  }
}
</style>