<template>
  <div class="container">
    <div class="register-main">
      <div class="header-title">
        <span class="left-text">忘记密码</span>
      </div>
      <el-row :gutter="10" class="register-body">
        <el-col
          :xs="24"
          :sm="12"
          :md="12"
          :lg="12"
          class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
        >
          <el-form ref="account" :model="account" :rules="rules" label-width="100px">
            <el-form-item prop="email" label="邮箱：">
              <el-input
                type="text"
                v-model="account.email"
                auto-complete="off"
                :autofocus="true"
                placeholder="请输入注册邮箱"
                @change="time=0"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" label="新密码：">
              <el-input
                type="text"
                v-model="account.password"
                auto-complete="off"
                :autofocus="true"
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="code" label="验证码：">
              <el-input
                type="text"
                style="width:48%;"
                v-model="account.code"
                auto-complete="off"
                :autofocus="true"
                placeholder="请输入验证码"
              ></el-input>
              <el-button
                type="primary"
                plain
                :disabled="disabled"
                style="width:50%;"
                @click.native.prevent="sendcode"
                :loading="loading"
              >{{btntxt}}</el-button>
            </el-form-item>
            <el-form-item style="margin-bottom:0; width:100%;">
              <el-button
                type="primary"
                style="width:100%;"
                @click.native.prevent="handleModify"
                :loading="loading"
              >确定</el-button>
            </el-form-item>
            <el-form-item class="extra-text">
              <router-link :to="{path: '/login'}" class="login-text" title="立即登录">返回登录</router-link>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { ajax as request } from "@/request.js";
import md5 from "js-md5";
export default {
  data() {
    var validpassword = (rule, value, callback) => {
      let reg = /[0-9a-zA-Z]{6,18}/;
      if (!reg.test(value)) {
        callback(new Error("密码必须是由6-18位数字和字母组合"));
      } else {
        callback();
      }
    };
    var validemail = (rule, value, callback) => {
      var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if (!regEmail.test(value)) {
        callback(new Error("邮箱格式不正确"));
      } else {
        callback();
      }
    };
    return {
      disabled: false,
      loading: false,
      time: 0,
      btntxt: "获取验证码",
      account: {
        password: "",
        phone: "",
        email: "",
        code: ""
      },
      rules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { validator: validpassword, trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入注册手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入注册邮箱", trigger: "blur" },
          { validator: validemail, trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  methods: {
    sendcode() {
      this.time = 60;
      this.disabled = true;
      this.timer();
      //向后台发送邮箱地址 接收返回值
      let that = this;
      request({
        url: "/user/password_recover/authentication",
        method: "post",
        params: {
          email: that.account.email
        }
      }).then(function(response) {
        if (response.data.success == true) {
          that.$notify.success({
            title: "提示",
            message: "验证码已发送！"
          });
        }
      });
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
    handleModify() {
      this.$refs.account.validate(valid => {
        if (valid) {
          //判断验证码是否正确 发送用户名、新旧密码、手机号给后台
          let that = this;
          request({
            url: " /user/password_recover/action",
            method: "post",
            params: {
              email: that.account.email,
              newPassword: md5(md5(that.account.password)),
              code: that.account.code
            }
          }).then(function(response) {
            //获取数据存入config
            if (response.data.success == true) {
              that.$notify.success({
                title: "提示",
                message: "修改成功！"
              });
              that.$router.push({ path: "/login" });
            } else {
              that.$notify.error({
                title: "提示",
                message: response.data.message
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#app {
  margin-top: 0 !important;
}
.container {
  position: fixed;
  height: 100%;
  width: 100%; 
  background: url(../../assets/images/background.jpg) no-repeat; 
  background-size:100% 100%; 
  background-attachment:fixed
}
.register-main {
  margin: 180px auto;
  padding: 18px;
  max-width: 736px;
  min-width: 280px;

  background: #F7F8F1;
  box-shadow: 0 2px 40px 0 rgba(157,187,231,0.50);
  border-radius: 4px;
  border-radius: 4px;

  background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
  background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#ace),
    to(#00c1de)
  ); /*谷歌*/
  background: -webkit-linear-gradient(
    top,
    #ace,
    #00c1de
  ); /*Safari5.1 Chrome 10+*/
  background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
}

.header-title {
  position: relative;
  padding: 15px 10px 15px;
  border-bottom: 5px solid #264672;

  .left-text {
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #264672;
  }
}
.el-form-item__label {
    color: #264672 !important;
}
.el-input__inner {
  &::placeholder {
    font-family: PingFangSC-Regular;
  }
}

.register-body {
  padding: 40px 3%;
}
.extra-text {
  position: relative;
  margin-bottom: 0;
  padding-left: 2px;
}

.login-text {
  position: absolute;
  top: 4px;
  right: 2px;
  font-size: 12px;
  color: #aaa;
}

@media all and (max-width: 768px) {
  .register-main {
    margin: 0 auto 24px;
  }
}
</style>
