<!--  -->
<template>
  <div class="forget_box" :style="'height:' + fullHeight + 'px'">
    <!-- 背景图 -->
    <img src="../../assets/image/bajing.png" alt class="forget_box_baijingimg" />

    <!-- 返回按钮 -->
    <div class="returnR">
      <img @click="fanhui()" src="../../assets/image/returnR.png" alt class="returnR_img" />
    </div>
    <!-- 返回按钮 -->

    <!-- 标题 -->
    <div class="forget_box_text">忘记密码</div>

    <!-- 注册框 -->
    <!-- 卡片 -->
    <el-card class="forget_box_card">
      <el-form :model="ruleForm" ref="ruleForm" label-width="50px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input
            v-model="ruleForm.username"
            :onkeyup="ruleForm.username = ruleForm.username.replace(/\s+/g,'')"
            ref="input1"
            maxlength="11"
            placeholder="请输入手机号"
            clearable
            prefix-icon="el-icon-user"
            autocomplete="on"
            class="username_ipt"
          ></el-input>
        </el-form-item>

        <!-- 第一次输入密码 -->
        <div class="paswd_box">
          <img src="../../../static/suo.png" alt class="paswd_box_imgA" />
          <div class v-if="pwdType">
            <input
              class="paswd_ipt"
              type="password"
              maxlength="8"
              v-model="ruleForm.password"
              :onkeyup="ruleForm.password = ruleForm.password.replace(/\s+/g,'')"
              placeholder="请输不能小于6位的密码"
              ref="input2"
            />
          </div>
          <div class v-else>
            <input
              class="paswd_ipt"
              type="text"
              maxlength="8"
              v-model="ruleForm.password"
              :onkeyup="ruleForm.password = ruleForm.password.replace(/\s+/g,'')"
              placeholder="请输入不能小于6位的密码"
              ref="input2"
            />
          </div>
          <img :src="seen ? seenImg : unseenImg" @click="changeType()" class="paswd_boxA_imgB" />
        </div>

        <!-- 第二次输入密码 -->
        <div class="paswd_boxA">
          <img src="../../../static/suo.png" alt class="paswd_boxA_imgA" />
          <div class v-if="pwdTypeA">
            <input
              class="paswd_ipt"
              type="password"
              maxlength="8"
              v-model="ruleForm.passwordA"
              :onkeyup="ruleForm.passwordA = ruleForm.passwordA.replace(/\s+/g,'')"
              placeholder="请再次输入不能小于6位的密码"
              ref="input3"
              @blur="verify()"
            />
          </div>
          <div class v-else>
            <input
              class="paswd_ipt"
              type="text"
              maxlength="8"
              v-model="ruleForm.passwordA"
              :onkeyup="ruleForm.passwordA = ruleForm.passwordA.replace(/\s+/g,'')"
              placeholder="请再次输入不能小于6位的密码"
              ref="input3"
              @blur="verify()"
            />
          </div>
          <img :src="seenA ? seenImg : unseenImgA" @click="changeTypeA()" class="paswd_boxA_imgB" />
        </div>

        <!-- 验证码 -->
        <div class="forget_box_auth_code">
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.auth_code"
              :onkeyup="ruleForm.auth_code = ruleForm.auth_code.replace(/\s+/g,'')"
              ref="input5"
              maxlength="6"
              placeholder="请输入验证码"
              clearable
              prefix-icon="el-icon-message"
              autocomplete="on"
              class="auth_code_ipt"
              type="text fl"
            ></el-input>
          </el-form-item>

          <!-- 发送验证码btn -->
          <div class="auth_code_btn">
            <el-button
              class="auth_code_btn_text"
              type="primary"
              round
              @click="countDown"
            >{{ content }}</el-button>
          </div>
        </div>

        <el-form-item>
          <el-button class="register" type="primary" @click="forget()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 未注册提示弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="65%">
      <span>该手机号还未注册过！</span>
      <span class="loginText" @click="login()">立即注册</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "login",
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      ruleForm: {
        username: "",
        password: "",
        passwordA: "",
        auth_code: ""
      },
      seen: "",
      seenA: "",
      pwdType: true, //此时文本框隐藏，显示密码框
      pwdTypeA: true, //此时文本框隐藏，显示密码框
      unseenImg: "./static/eyes.png", //看不见1
      seenImg: "./static/eye.png", //看得见密码1
      unseenImgA: "./static/eyes.png", //看不见2
      seenImgA: "./static/eye.png", //看得见密码2
      iShow: false, //登录缓冲图标

      content: "获取验证码",
      totalTime: 60,
      canClick: true, //添加canClick
      dialogVisible: false //已注册弹框
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //返回login页面
    fanhui() {
      let _this = this;
      _this.$router.replace("/");
    },

    //密码的显示隐藏1
    changeType() {
      this.seen = !this.seen; //小眼睛的变化
      this.pwdType = !this.pwdType; //跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
    },

    //密码的显示隐藏2
    changeTypeA() {
      this.seenA = !this.seenA; //小眼睛的变化
      this.pwdTypeA = !this.pwdTypeA; //跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
    },

    // 提交事件
    forget() {
      let _this = this;
      let padOne = _this.ruleForm.password;
      let padTwo = _this.ruleForm.passwordA;
      //判断所有不能为空
      if (
        _this.ruleForm.username === "" &&
        _this.ruleForm.password === "" &&
        _this.ruleForm.passwordA === "" &&
        _this.ruleForm.auth_code === ""
      ) {
        this.$message({
          message: "必填项不能为空",
          type: "warning",
          duration: 1000
        });
      } else if (
        !/^[0-9A-Za-z]{6,15}$/.test(this.ruleForm.password) &&
        !/^[0-9A-Za-z]{6,15}$/.test(this.ruleForm.passwordA)
      ) {
        //判断用户是否输入正确格式
        this.$message({
          message: "请输入正确格式的密码",
          type: "warning",
          duration: 1000
        });
        return false;
      } else if (padOne !== padTwo) {
        //判断用户两次输入的密码是否正确
        this.$message({
          message: "两次输入的密码不一致",
          type: "warning",
          duration: 1000
        });
      } else {
        let postData = _this.$qs.parse({
          mobile: _this.ruleForm.username, //手机号
          password: _this.ruleForm.password, //第一个密码
          password2: _this.ruleForm.passwordA, //第二个密码
          code: _this.ruleForm.auth_code, //验证码
          ret: "land" //注册
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/reset_password",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            if (res.data === 1) {
              this.$message({
                message: "验证码不正确",
                type: "warning",
                duration: 1000
              });
            } else if (res.data === 2) {
              this.$message({
                message: "两次密码不一致",
                type: "error",
                duration: 1000
              });
            } else if (res.data === 3) {
              this.$message({
                message: "手机号码不正确",
                type: "error",
                duration: 1000
              });
            } else if (res.data === 4) {
              this.$message({
                message: "用户不存在，请先注册",
                type: "error",
                duration: 1000
              });
              _this.dialogVisible = true;
            } else if (res.data === 0) {
              this.$message({
                message: "重置密码成功",
                type: "success",
                duration: 1000
              });
              _this.$router.replace("/");
            }
          })
          .catch(error => {
            this.$message({
              message: "请求失败",
              type: "error",
              duration: 1000
            });
          });
      }
    },

    //短信验证
    countDown() {
      //获取验证码
      if (!this.canClick) return;
      if (!this.ruleForm.username) {
        this.$message({
          message: "请输入手机号",
          type: "warning",
          duration: 1000
        });
        return false;
      }
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.ruleForm.username)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "warning",
          duration: 1000
        });
        return false;
      }

      let postData = this.$qs.parse({
        mobile: this.ruleForm.username,
        ret: "see",
        password: "",
        password2: "",
        code: ""
      });

      this.$axios({
        method: "post",
        url: "bigservers/reset_password",
        data: postData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
        .then(res => {
          if (res.data !== null) {
            this.canClick = false;
            this.content = this.totalTime + "s后重新发送";
            let timer = window.setInterval(() => {
              this.totalTime--;
              this.content = this.totalTime + "s后重新发送";
              if (this.totalTime < 0) {
                window.clearInterval(timer);
                this.content = "重新发送验证码";
                this.totalTime = 60;
                this.canClick = true; //这里重新开启
              }
            }, 1000);
            //判断
            if (res.data === 1) {
              this.$message({
                message: "该手机号已经注册过！",
                type: "warning",
                duration: 1000
              });
            } else if (res.data === 3) {
              this.$message({
                message: "手机号码有误",
                type: "warning",
                duration: 1000
              });
            } else if (res.data === 2) {
              this.$message({
                message: "验证码发送失败",
                type: "warning",
                duration: 1000
              });
            } else if (res.data === 0) {
              this.$message({
                message: "验证码发送成功",
                type: "success",
                duration: 1000
              });
            }
          } else {
            // alert(res.data);
          }
        })
        .catch(error => {});
    },

    //已注册弹框点击事件
    login() {
      let _this = this;
      _this.$router.push("/enroll");
    },

    //验证密码是否一致
    verify() {
      var _this = this;
      var paw = _this.ruleForm.password; //第一次密码
      var pawA = _this.ruleForm.passwordA; //第二次密码
      if (paw !== pawA) {
        this.$message({
          message: "第二次输入的密码不一致，请重试",
          type: "warning"
        });
        _this.ruleForm.passwordA = "";
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;

    _this.get_boderHeight();
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/forget.scss";
</style>