<template>
  <div class="change-bid-price-wrapper">
    <p class="price-item">
      <span>我的求购价:</span>
      <span>￥{{ goodsInfo.goodPrice }}</span>
    </p>
    <p class="price-item">
      <span>当前最高求购价:</span>
      <span>￥{{ goodsInfo.bidHighestPrice }}</span>
    </p>
    <p v-if="goodsInfo.leastPrice" class="price-item">
      <span>最低现货价:</span>
      <span>￥{{ goodsInfo.leastPrice }}</span>
    </p>
    <InputUfo
      type="number"
      placeholder="定价需以9结尾 例如1999"
      :maxlength="8"
      :class="errorTip ? 'ipt-number show-error' : 'ipt-number'"
      v-model="chgPrice"
    >
      <span class="prepend" slot="prepend">￥</span>
    </InputUfo>
    <p class="error-tip">{{ errorTip }}</p>
    <p
      :class="
        i === computePriceList.length - 1
          ? 'promotion-list-item last'
          : 'promotion-list-item'
      "
      v-for="(priceInfo, i) in computePriceList"
      :key="i"
    >
      <span>{{ priceInfo.promotion }}:</span>
      <span>{{ priceInfo.promotionAmount }}</span>
    </p>
    <p class="tip">Tip: 调整求购价成功后,当前的求购将被关闭</p>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import InputUfo from "../price-change/components/input-ufo";
import { debounce } from "lodash";

const { mapActions, mapMutations } = createNamespacedHelpers("order/orderList");
export default {
  components: { InputUfo },
  props: {
    computePriceInfo: {
      type: Object,
      default: () => ({})
    },
    goodsInfo: {
      type: Object,
      default: () => ({})
    },
    orderCode: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      chgPrice: "",
      errorTip: "",
      computePrice: null
    };
  },

  computed: {
    computePriceList() {
      const priceInfo = this.computePrice || this.computePriceInfo;
      return priceInfo.promotionFormulaList.filter(
        ({ promotion }) => promotion === "运费" || promotion === "实付金额"
      );
    }
  },
  mounted() {
    // debounce防抖动,输入数字后延迟500毫秒提交
    this.inputChange = debounce(this.onChange.bind(this), 500);
  },
  methods: {
    ...mapActions(["computeChangePrice", "changePrice"]),
    ...mapMutations(["setChangePrice"]),
    async onChange(price) {
      if (this.checkPrice(price)) {
        const res = await this.computeChangePrice({
          price,
          orderCode: this.orderCode
        });
        if (typeof res === "string") {
          this.errorTip = res;
          this.setChangePrice(0);
        } else {
          this.computePrice = res;
          this.setChangePrice(price);
        }
      } else {
        this.setChangePrice(0);
      }
    },
    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 (+price === +this.goodsInfo.goodPrice) {
        this.errorTip = "前后价格没有变化";
      } else {
        this.errorTip = "";
        valid = true;
      }
      return valid;
    }
  },
  watch: {
    chgPrice(newVal) {
      this.inputChange(newVal);
    }
  }
};
</script>

<style lang="scss" scoped>
.change-bid-price-wrapper {
  font-size: 12px;
  color: #000;
  padding: 0 38px;
  letter-spacing: 0;

  .ipt-number {
    margin: 30px 0;

    &.show-error {
      margin-bottom: 0;
    }
  }

  .error-tip {
    color: #d0021b;
  }

  .promotion-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;

    &.last {
      color: #000;
    }
  }

  .tip {
    color: #999;
    margin-top: 40px;
  }
}
</style>