<template>
  <Modal
    v-model="visiable"
    sure-text="调整售价"
    cancel-text="取消"
    :loading="postLoading"
    class="modal"
    :transfer="true"
    @on-sure="onSure"
    @on-cancel="onCancel"
    >
    <div class="change-price-modal">
      <p class="modal-title">{{leastPriceMsg}}</p>
      <InputUfo type="number" placeholder="定价需以9结尾 例如1999" :maxlength="8" class="ipt-number" v-model="chgPrice">
        <span class="prepend" slot="prepend">￥</span>
      </InputUfo>
      <p class="tips" v-show="errorTip">{{errorTip}}</p>
      <p class="price-line">
        <span class="title">平台费用：</span>
        <span class="price">{{platformFee}}</span>
      </p>
      <p class="price-line">
        <span class="title">银行转账费用：</span>
        <span class="price">{{bankTransferFee}}</span>
      </p>
      <p class="price-line total">
        <span class="title">实际收入：</span>
        <span class="price">{{income}}</span>
      </p>
    </div>
  </Modal>
</template>

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

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

export default {
  name: 'ModalPrice',
  data() {
    return {
      visiable: false,
      skc: {},
      platformFee: '-￥0',
      bankTransferFee: '-￥0',
      income: '￥0',
      errorTip: '',
      chgPrice: '',
      calced: false
    };
  },
  mounted() {
    this.inputChange = debounce(this.onChange.bind(this), 500);
  },
  watch: {
    chgPrice(newVal) {
      this.calced = false;
      this.platformFee = '-￥0';
      this.bankTransferFee = '-￥0';
      this.income = '￥0';
      this.inputChange(newVal);
    }
  },
  computed: {
    ...mapState(['fetchingChangePrice']),
    leastPriceMsg() {
      if (this.skc.leastPrice) {
        return `当前${this.skc.sizeName}码最低售价：¥${this.skc.leastPrice}`;
      } else if (this.skc.suggestMinPrice && this.skc.suggestMaxPrice) {
        return `当前${this.skc.sizeName}码建议售价：¥${this.skc.suggestMinPrice} - ¥${this.skc.suggestMaxPrice}`;
      }
      return `当前${this.skc.sizeName}码最低售价：¥-`;
    },
    postLoading() {
      return this.fetchingChangePrice || !this.calced;
    }
  },
  methods: {
    ...mapActions(['postCalcPrice']),
    resetPrices() {
      this.prices = [];
    },
    show({skc, product}) {
      this.chgPrice = '';
      this.errorTip = '';
      this.prices = [];
      this.skc = skc;
      this.product = product;
      this.visiable = true;
      this.calced = false;
    },
    hide() {
      this.skc = {};
      this.product = {};
      this.visiable = false;
    },
    onChange(price) {
      if (!this.visiable) {
        return;
      }
      if (this.checkPrice(price)) {
        this.calcPrice(price);
      }
    },
    async calcPrice(price) {
      const result = await this.postCalcPrice({
        product_id: this.product.productId,
        storage_id: this.skc.storageId,
        new_price: price,
        old_price: this.skc.price,
        num: this.skc.storageNum,
        skupType: this.skc.attributes,
      });

      if (result && result.code === 200) {
        this.platformFee = get(result, 'data.platformFee.amount', '');
        this.bankTransferFee = get(result, 'data.bankTransferFee', '');
        this.income = get(result, 'data.income', '');
        this.calced = true;
      } else {
        if (result.message) {
          this.errorTip = result.message;
        }
        this.$createToast({
          txt: result.message,
          type: 'warn',
        }).show();
      }
    },
    checkPrice(price) {
      let valid = false;

      if (!price) {
        this.errorTip = '没有价格';
        return false;
      } else if (!/^\d+$/.test(price)) {
        this.errorTip = '价格只能为正整数';
      } else if (!/9$/.test(price)) {
        this.errorTip = '出售价格必须以9结尾';
      } else if (this.skc.minPrice && price < this.skc.minPrice) {
        this.errorTip = '您的出价过低';
      } else if (this.skc.maxPrice && price > this.skc.maxPrice) {
        this.errorTip = '您的出价格过高';
      } else if (+price === this.skc.price) {
        this.errorTip = '前后价格没有变化';
      } else if (this.skc.suggestMaxPrice && price > this.skc.suggestMaxPrice) {
        this.errorTip = '超出建议价将被限制展示，建议下调至合理价格区间';
        valid = true;
      } else if (this.skc.leastPrice && price > this.skc.leastPrice) {
        this.errorTip = '您的出价高于最低售价';
        valid = true;
      } else {
        this.errorTip = '';
        valid = true;
      }
      return valid;
    },
    onSure() {
      if (!this.checkPrice(this.chgPrice)) {
        this.$createToast({
          txt: this.errorTip,
          type: 'warn',
        }).show();
      } else {
        this.$emit('on-change-price', {skc: this.skc, price: this.chgPrice});

        this.$root.reportApp('', 'BUSINESS_UFO_SELL_CHANGE', {
          locfun: `click:changePrice:yes:${this.chgPrice}`
        });
      }
    },
    onInput(val) {
      this.$emit('input', val);
    },
    onCancel() {
      this.$root.reportApp('', 'BUSINESS_UFO_SELL_CHANGE', {
        locfun: 'click:changePrice:no'
      });
    }
  },
  components: {Modal, InputUfo}
};
</script>

<style lang="scss" scoped>
.change-price-modal {
  .tips {
    color: #d0021b;
    font-size: 24px;
    margin-bottom: 20px;
  }

  .price-line {
    margin-bottom: 20px;
    color: #999;
    font-size: 24px;
    display: flex;

    .title {
      width: 50%;
    }

    .price {
      width: 50%;
      text-align: right;
    }

    &.total {
      color: #000;
    }
  }

  .ipt-number {
    /deep/ .prepend {
      width: 40px;
      margin-left: 20px;
      text-align: left;
    }
  }

  .modal-title {
    line-height: 100px;
    text-align: center;
  }
}

.modal {
  /deep/ .modal-footer button:first-child {
    color: inherit;
  }
}
</style>