<template>
  <Modal
    class="ufo-font"
    v-model="visiable"
    :loading="fetchingNoSale"
    :transfer="true"
    @on-sure="onSure">
    <div class="change-price-modal">
      <p class="modal-title">选择你要下架的数量</p>
      <InputUfo v-model="unStockNum" :maxlength="8" :readonly="true" class="inp-unstock">
        <i slot="prepend" class="iconfont icon-plus-minus" @touchend="onChangeNum(-1)"></i>
        <i slot="append" class="iconfont icon-i-add" @touchend="onChangeNum(1)"></i>
      </InputUfo>
      <p class="stock-txt">
        目前还有 {{storageNum}} 个库存
      </p>
      <p class="tips">
        下架商品的保证金将会被释放
      </p>
    </div>
  </Modal>
</template>

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

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

export default {
  name: 'ModalPrice',
  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;
    }
  },
  components: {Modal, InputUfo}
};
</script>

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

  .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: bold;
    }

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

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