<template>
  <view class="flex-col page">
    <!-- <image src="/static/common/img/16530269846087107196.png" class="image"/> -->
    <u-navbar title="重置密码"></u-navbar>
    <view class="flex-col group" v-if="state === 1">
      <text class="text">重置密码</text>
      <view class="flex-col group_7">
        <view class="flex-col">
          <!-- <text class="text_1">手机号</text> -->
          <view class="text-wrapper flex-row view">
            <u-input
                v-model="phone"
                :disabled="disabled"
                placeholder="请输入手机号"
                type="text"
            />
          </view>
        </view>
        <view class="flex-col group_6">
          <!-- <text class="text_1">短信验证码</text> -->
          <view class="text-wrapper flex-row view" style="padding: 0">
            <u-input
                v-model="code"
                placeholder="请输入短信验证码"
                type="text"
            />
            <u-button
                :disabled="!(send == '发送验证码')"
                class="custom-style"
                style="background: transparent"
                @click="sendCode"
            >{{ send }}
            </u-button>
          </view>
        </view>
      </view>
      <!-- <navigator class="text_6" url="/pages/login/login/login">登录</navigator> -->
      <u-button
          class="flex-col items-center text-wrapper_1"
          shape="circle"
          type="primary"
          @click="login"
      >
        <text class="text_7">重置密码</text>
      </u-button>
    </view>
    <view class="flex-col group" v-if="state === 2">
      <text class="text">遇见身边的校友</text>
      <view class="flex-col group_7">
        <view class="flex-col">
          <u-input
              v-model="passWord"
              class="view text-wrapper"
              placeholder="请输入新密码"
              type="password"
          />
        </view>
        <view class="flex-col group_6">
          <u-input
              v-model="passWordTwo"
              class="view text-wrapper"
              placeholder="请确认新密码"
              type="password"
          />
        </view>
      </view>
      <view class="tips">
        <image src="/static/common/img/infoCircle.png"></image>
        提示：密码长度应该大于5，必须包含字母、数字、特殊字符，且不能包含中文!
      </view>
      <u-button
          class="flex-col items-center text-wrapper_1"
          shape="circle"
          throttle-time="1000"
          type="primary"
          @click="login"
      >
        <text class="text_7">立即重置</text>
      </u-button>
      <u-button
          class="flex-col items-center text-wrapper_1"
          shape="circle"
          style=" margin-top: 10px"
          type="primary"
          @click="state = 1"
      >
        <text class="text_7">返回</text>
      </u-button>
    </view>
    <u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
    <u-toast ref="uToast"/>
  </view>
</template>
<script>
import md5 from "js-md5";
import {aesEncrypt} from "@/utils/encrypt.js";

export default {
  data() {
    return {
      show: false,
      phone: "",
      passWord: "",
      code: "",
      passWordTwo: "",
      agreement: false,
      disabled: false,
      send: "发送验证码",
      state: 1,
    };
  },
  onLoad(e) {
  },
  methods: {
    // 提示
    tips(title, type, time) {
      this.$refs.uToast.show({
        title: title ? title : "",
        type: type ? type : "success",
        duration: time ? time + "" : "1500",
      });
    },
    // 发送验证码
    sendCode() {
      var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
      if (this.phone === "" || !reg.test(this.phone)) {
        // this.$tips("请输入正确的手机号码", "error");
        this.$refs.uToast.show({
          title: '请输入正确的手机号码',
          type: 'error',
        })
        return;
      }

      const timestamp = Date.now();
      const base64Key = btoa('xiaoyout!#@12345');
      const signStr = this.phone + timestamp + base64Key;
      const sign = md5(signStr);

      this.$u.apiList
          .GetAppValidateCode({
            phone: this.phone,
            t: timestamp.toString(),
            sign: sign,
            type: 2,
          })
          .then((res) => {
            //中间数字加密
            // let result =this.userName.replace(this.userName.substring(3,7),"****")
            // this.userName = result
            this.disabled = true;
            // this.$tips("发送成功");
            this.$refs.uToast.show({
              title: '发送成功',
              type: 'success',
            })
            var second = 60;
            this.send = second + "秒后重试";
            var time = setInterval(() => {
              this.send = second + "秒后重试";
              second--;
              if (second <= 0) {
                this.disabled = false;
                this.send = "发送验证码";
                clearInterval(time);
              }
            }, 1000);
          })
          .catch((err) => {
            // this.$tips(err.error, "error");
            this.$refs.uToast.show({
              title: err.error,
              type: 'error',
            })
          });
    },
    login() {
      if (this.state == 1) {
        if (this.phone === "") {
          return this.tips("请输入手机号", "error");
        }
        if (this.code === "") {
          return this.tips("请输入验证码", "error");
        }
        this.$u.apiList.ForgotPasswordValidate({
          phone: this.phone,
          code: this.code,
        }).then((res) => {
          console.info("🚀 ~ file:ForgetPassword method: line:189 -----", res)
          this.state = 2;
        }).catch((err) => {
          this.tips(err.error, "error");
        });

        return
      }
      if (this.state == 2) {
        if (this.passWord === "") {
          return this.tips("请输入新密码", "error");
        }
        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{5,}$/;
        if (!reg.test(this.passWord)) {
          /* return this.$tips(
            "密码必须包含字母、数字、特殊字符，且不能包含中文!",
            "error"
          ); */
          return this.$refs.uToast.show({
            title: "密码必须包含字母、数字、特殊字符，且不能包含中文!",
            type: 'error',
          })
        }
        if (this.passWordTwo === "") {
          return this.tips("请确认新密码", "error");
        }
        if (this.passWord != this.passWordTwo) {
          return this.tips("请检查两次密码是否一致", "error");
        }
      }
      const req = {
        phone: this.phone,
        code: this.code,
        newPassWord: aesEncrypt(this.passWord),
      };
      console.log(req, "res-");
      // return
      this.$u.apiList
          .ForgotPassword(req)
          .then((res) => {
            console.log(res, "res---");
            uni.showToast({
              title: "重置成功",
              duration: 2000,
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/",
              });
            }, 2000);
          })
          .catch((err) => {
            console.log(err, "err---");
            // this.$tips(err.error, "error");
            this.$refs.uToast.show({
              title: err.error,
              type: 'error',
            })
          });
    },
  },
};
</script>

<style scoped lang="scss">
.custom-style {
  color: #3cb5fb !important;
  padding: 0 !important;
  height: 70rpx !important;
  line-height: 60rpx !important;
}

.custom-style::after {
  border: none;
}

.page {
  padding-bottom: 0.015rem;
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
  width: 100%;
  overflow-x: hidden;
  height: 100%;

  .image {
    flex-shrink: 0;
    align-self: flex-start;
    width: 102%;
  }

  .group {
    padding: 1.0rem 0.29rem;

    .text {
      align-self: left;
      // color: rgb(46, 155, 255);
      color: #000;
      font-size: 0.22rem;
      font-family: PingFang;
      line-height: 0.17rem;
      font-weight: 600;
    }

    .group_7 {
      margin-top: 0.29rem;

      .text-wrapper {
        border: solid 2rpx #dcdfe6;
        border-radius: 100rpx;
        background: #f6f8fa;
      }

      .group_6 {
        margin-top: 0.2rem;
      }

      .text_1 {
        margin-left: 0.01rem;
        align-self: flex-start;
        color: rgb(51, 51, 51);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .view {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        padding: 20rpx 50rpx !important;
      }
    }

    .text_6 {
      width: 100%;
      text-align: right;
      margin-left: 0.01rem;
      margin-top: 0.2rem;
      align-self: flex-start;
      color: #1F2232;
      font-size: 0.13rem;
      font-family: PingFang;
      line-height: 0.13rem;
    }

    .text-wrapper_1 {
      margin: 50rpx 0rpx 40rpx;
      padding: 50rpx 0 50rpx;
      // background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
      background: #3cb4fb;
      box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
      border-radius: 100rpx;

      .text_7 {
        color: rgb(255, 255, 255);
        font-size: 32rpx;
        font-family: PingFang;
        line-height: 32rpx;
      }
    }

    .group_1 {
      margin-top: 0.12rem;

      .text_8 {
        color: rgb(102, 102, 102);
        font-size: 24rpx;
        font-family: PingFang;
        line-height: 0.13rem;
      }

      .text_9 {
        margin-left: 0.035rem;
        color: rgb(25, 140, 255);
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.13rem;
      }
    }

    .group_2 {
      margin-top: 0.36rem;
      justify-content: center;

      .section_1 {
        flex-shrink: 0;
        width: 0.17rem;
      }

      .group_3 {
        margin-left: 0.11rem;
        height: 0.18rem;
        line-height: 0.18rem;
        font-size: 0;

        .text_10 {
          color: rgb(153, 153, 153);
          font-size: 0.11rem;
          font-family: PingFang;
        }

        .text_11 {
          color: rgb(25, 140, 255);
          font-size: 0.11rem;
          font-family: PingFang;
        }

        .text_12 {
          color: rgb(102, 102, 102);
          font-size: 0.11rem;
          font-family: PingFang;
        }

        .text_13 {
          color: rgb(25, 140, 255);
          font-size: 0.11rem;
          font-family: PingFang;
        }
      }
    }
  }
}

.tips {
  font-size: 24rpx;
  color: #EF3920;
  display: flex;
  margin-top: 20rpx;

  image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
    margin-top: 5rpx;
  }
}
</style>
