<template>
  <div class="forgetPaw">
    <van-nav-bar title="修改支付密码" left-arrow @click-left="onNavBack" />
    <ul class="con ul mt30">
      <li>
        <span class>支付密码</span>
        <label>
          <!-- 1. 把e - + 换空；2. 把数字之外的值换空； 3.空格换空 -->
          <input
            type="tel"
            placeholder="请填写新的支付密码"
            maxlength="4"
            oninput="value=value.replace(/e|-|\+/ig,'').replace(/[^0-9]/ig,'').replace(/\s+/g,'')"
            v-model.trim="password"
          />
        </label>
      </li>
    </ul>

    <div :class="['next', { blue: activeColor }]" @click="onSubmit">修改</div>
  </div>
</template>

<script>
import DialogService from '@/services/dialog-service';
import ToastService from '@/services/toast-service';
import APICommand from '@/api/command';
export default {
  data() {
    return {
      password: ''
    };
  },
  watch: {
    password() {
      if (this.password.length > 4) {
        this.password = this.password.slice(0, 4);
      }
    }
  },
  methods: {
    //   返回
    onNavBack() {
      this.$router.push({ name: 'Myself' });
    },
    // 修改
    onSubmit() {
      //判断是否是纯数字并且四位
      let reg = /\d{4,}$/;
      if (this.password !== '' && this.password.length === 4 && reg.test(this.password)) {
        DialogService.confirm({
          title: '提示',
          message: '真的修改支付密码吗？',
          showCancelButton: true
        })
          .then(() => {
            this.changePayPassword();
          })
          .catch(() => {});
      } else {
        DialogService.confirm({
          title: '温馨提示',
          message: '支付密码只能是四位纯数字，请您重新输入。'
        });
      }
    },
    // 修改支付密码
    changePayPassword() {
      // todo 调取修改支付密码的接口
      ToastService.loading({ message: '修改中...' });
      let reqBody = {
        imei: this.$route.query.code,
        text: this.password
      };
      APICommand.SetPayPassword(reqBody)
        .then(res => {
          let data = res.data;
          if (data.stateCode === 1) {
            ToastService.success({
              message: '修改成功',
              duration: 1500
            });
            setTimeout(() => {
              this.$router.push({ name: 'device' });
            }, 2000);
          } else {
            DialogService.confirm({
              title: '提示',
              message: data.message
            });
          }
        })
        .catch(error => {
          console.log('error::', error);
        })
        .finally(() => {
          setTimeout(() => {
            ToastService.clear();
          }, 1500);
        });
    }
  },
  computed: {
    activeColor() {
      return this.password !== '';
    }
  }
};
</script>

<style lang="scss" scoped>
.forgetPaw {
  height: 100vh;
  background: $background;

  .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 px2rem(40);
    height: px2rem(120);
    color: #999;
    font-size: px2rem(24);

    span {
      color: $green;
    }
  }

  .con {
    display: flex;
    align-items: center;
    padding: 0 40px;
    height: 88px;
    background: #fff;

    &.ul {
      flex-flow: column;
      height: auto;
    }

    li {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      height: 88px;
      border-bottom: 1px solid $border_color;

      &:last-child {
        border: none;
      }

      i {
        position: absolute;
        right: 25px;
        width: 32px;
        height: 32px;
        /*  background: url(./img/eyes-close.png) center no-repeat; */
        background-size: 32px 32px;

        &.on {
          /* background: url(./img/eyes-open.png) center no-repeat; */
          background-size: 32px 32px;
        }
      }
    }

    span {
      width: 150px;
      color: #333333;
      font-size: 28px;

      &.border_right {
        width: 115px;
        border-right: 1px solid #b3b4b4;
      }
    }

    label {
      input {
        display: flex;
        align-items: center;
        width: 340px;
        height: 60px;
        color: #333;
        font-size: 28px;
        text-indent: 0;

        &.ti50 {
          text-indent: 50px;
        }

        &::-webkit-input-placeholder {
          color: #e1e4e9;
        }
      }
    }

    a {
      flex: auto;
      color: #333333;
      font-size: 28px;

      &:before {
        content: ' ';
        width: 0;
        height: 30px;
        margin-right: 20px;
        border: 1px solid #b3b4b4;
      }
    }
  }

  .next {
    @include flexbox(center, center, column, nowrap);
    margin: 230px auto 0;
    width: 550px;
    height: 80px;
    border-radius: 10px;
    background: $next;
    color: #fff;
    font-size: 36px;

    &.blue {
      background: $green;
    }

    &.res {
      margin: 140px auto 0;
    }
  }
}
</style>
>
