<template>
  <div class="pay-wrap">
    <nav-bar title="支付金额"/>
    <div class="wrap">
      <div>
        <div class="title">支付金额</div>
        <div class="input pr">
          <p>{{data.moneySymbol}}</p>
          <van-field
            type="number"
            v-model="value"
            clearable
          />
        </div>
        <p class="flex_sb align-c error">
          <span>共需支付{{data.moneySymbol}}{{data.remindAmount}}</span>
          <i v-show="!value" @click="payAll">支付全部</i>
        </p>
      </div>
      <div class="info align-c">
        <i class="icon icon-tishixinxi"></i>
        <p>{{data.tips}}</p>
      </div>
      <div class="btn">
        <van-button type="default" :class="{disabled: disabled}" @click="goPay">确认金额</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Pay",
  components: {
    NavBar
  },
  data() {
    return {
      lang: this.$store.state.langStr,
      value: null,
      disabled: true,
      data: {}
    };
  },
  watch: {
    value(val) {
      if (val) {
        this.disabled = false;
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.disabled = true;
          this.valitePayaMount();
        }, 500);
        if (Number(val).toFixed(2) <= 0) {
          this.disabled = true;
        }
      } else {
        this.disabled = true;
      }
    }
  },
  created() {
    let data = this.$util.sessionStorage.fetch("orderInfo");
    this.data = JSON.parse(decodeURIComponent(data));
  },
  methods: {
    // 实时验证金额
    valitePayaMount() {
      let value = this.$util.deepClone(this.value);
      value = value
        // .replace(/[^\d\.]/, "1")
        .replace(/^0(?=[0-9])/, "")
        .replace(/^\./, "0.");
      let len = null;
      if (value.toString().split(".").length > 1) {
        len = value.toString().split(".")[1].length;
      }
      if (len > 2) {
        value = Number(value).toFixed(2);
      }
      if (value > 0) {
        if (Number(value) > Number(this.data.remindAmount)) {
          value = this.data.remindAmount;
        }
        this.value = value;
        let params = {};
        params.url = this.$apis.api_hpay_upay;
        params.data = {
          payAmount: this.value,
          id: this.data.id
        };
        this.$net.req(params, this).then(
          res => {
            if (res.code == 0) {
              this.disabled = false;
              if (res.data.errText) this.$Toast(res.data.errText);
              if (Number(res.data.isCorrect) != 1) this.disabled = true;
            } else {
              this.disabled = true;
              this.$Toast(res.msg);
            }
          },
          e => {
            this.$Toast(e.msg);
          }
        );
      }
    },
    // 保存数据
    saveData() {
      let params = {};
      params.url = this.$apis.api_user_order_list;
      params.data = {};
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 支付全部
    payAll() {
      this.value = this.data.remindAmount;
    },
    // 去支付
    goPay() {
      if (!this.disabled) {
        this.$util.sessionStorage.save(
          "payAmount",
          encodeURIComponent(this.value)
        );
        this.$router.push({
          path: `/${this.lang}/cashier`
        });
      }
    }
  }
};
</script>

<style scoped lang='less'>
.pay-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  .wrap {
    padding: 20px;
    > div:first-child {
      background: #fff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      border: 1px solid rgba(238, 238, 238, 1);
      margin-bottom: 10px;
      padding: 15px 15px 0;
      .title {
        font-size: 13px;
        color: #999;
        margin-bottom: 10px;
      }
      .input {
        width: 100%;
        height: 48px;
        border-bottom: 1px solid #ddd;
        color: #222;
        display: flex;
        > p {
          font-size: 18px;
          margin: 20px 0 0 0;
        }
        .van-cell {
          padding: 5px 10px 5px 0;
          height: 46px;
        }
        > i {
          right: 0;
          bottom: 10px;
          font-size: 12px;
        }
      }
      > p {
        margin: 10px 0 15px;
        span {
          font-size: 13px;
          color: #ccc;
        }
        i {
          font-size: 13px;
          color: #6b96ff;
        }
      }
      > p.error {
        span {
          color: #ccc;
        }
      }
    }
    .info {
      display: flex;
      margin-bottom: 20px;
      i {
        flex-shrink: 0;
        color: #ccc;
      }
      p {
        font-size: 13px;
        color: #999;
        margin-left: 5px;
      }
    }
    .btn {
      border: 0;
      button {
        width: 100%;
        height: 45px;
        font-size: 18px;
        background: #ff523d;
        border-radius: 25px;
        color: #fff;
        font-weight: 500;
        border: 0;
      }
      .disabled {
        background: #ffbfab;
      }
    }
  }
}
</style>
