<template>
  <div class="loginpage">
    <div class="login-wrap">
      <div class="ms-login-box">
        <div class="ms-login" v-if="login_status == 0">
          <div class="ms-title">
            <img src="../assets/img/logo.png" alt="">
          </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="0px"
            class="ms-content"
          >
            <el-form-item prop="username" class="input-bt">
              <el-input size="large" v-model="ruleForm.username" placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item prop="password" class="padsswordBox" v-show="!isYes">
              <el-input
                size="large"
                type="password"
                placeholder="密码"
                v-model="ruleForm.password"
                @keyup.enter.native="submitForm('ruleForm')"
              ></el-input>
              <span class="statusImg" @click="isYes=!isYes">
                <img src="@/assets/img/no.png" alt />
              </span>
            </el-form-item>
            <el-form-item prop="password" class="padsswordBox" v-show="isYes">
              <el-input
                size="large"
                type="text"
                placeholder="密码"
                v-model="ruleForm.password"
                @keyup.enter.native="submitForm('ruleForm')"
              >
              </el-input>
              <span class="statusImg" @click="isYes=!isYes">
                <img src="@/assets/img/yes.png" alt />
              </span>
            </el-form-item>
            <div class="login-btn">
              <el-button size="large" type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </div>
            <div class="remember">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
            <p class="login-tips" @click="changePage(1)">忘记密码</p>
          </el-form>
        </div>

        <div class="ms-login" v-else-if="login_status == 1">
          <div class="ms-title">找回密码</div>
          <el-form
            :model="ruleForm2"
            :rules="rules"
            ref="ruleForm2"
            label-width="0px"
            class="ms-content"
          >
            <el-form-item prop="username" class="input-bt">
              <el-input
                size="large"
                v-model="ruleForm2.username"
                placeholder="请输入用户账号"
                @blur="getPhone(ruleForm2.username)"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="phone" class="input-bt">
              <el-input
                size="large"
                placeholder="已绑定的手机号"
                v-model="ruleForm2.phone"
                :disabled="true"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input
                size="large"
                type="nember"
                placeholder="请输入验证码"
                v-model="ruleForm2.code"
                @keyup.enter.native="findPassword('ruleForm2')"
              >
                <span
                  slot="append"
                  v-show="showCount"
                  class="v_code"
                  @click="getCode(ruleForm2.username,ruleForm2.phone)"
                >获取验证码</span>
                <span slot="append" v-show="!showCount" class="v_code">{{count}} s</span>
              </el-input>
            </el-form-item>
            <div class="login-btn">
              <el-button type="primary" size="large" @click="findPassword('ruleForm2')">确认</el-button>
            </div>
            <p class="login-tips" @click="changePage(0)">返回登录</p>
          </el-form>
        </div>
        <div class="ms-login" v-else>
          <div class="ms-title">新密码</div>
          <el-form
            :model="ruleForm3"
            :rules="rules"
            ref="ruleForm3"
            label-width="0px"
            class="ms-content"
          >
            <el-form-item>
              <span v-model="ruleForm3.username" class="account_name">账号：{{ruleForm3.username}}</span>
            </el-form-item>
            <el-form-item prop="newPassword" class="padsswordBox" v-show="!isYesnews">
              <el-input
                size="large"
                type="password"
                v-model="ruleForm3.newPassword"
                placeholder="请输入新密码"
              >
              </el-input>
              <span class="statusImg" @click="isYesnews=!isYesnews">
                <img src="@/assets/img/no.png" alt />
              </span>
            </el-form-item>
            <el-form-item prop="newPassword" class="padsswordBox" v-show="isYesnews">
              <el-input
                size="large"
                type="text"
                v-model="ruleForm3.newPassword"
                placeholder="请输入新密码"
              >
              </el-input>
              <span class="statusImg" @click="isYesnews=!isYesnews">
                <img src="@/assets/img/yes.png" alt />
              </span>
            </el-form-item>
            <el-form-item prop="okPassword" class="padsswordBox" v-show="!isYescomfirm">
              <el-input
                size="large"
                type="password"
                placeholder="再次输入新密码"
                v-model="ruleForm3.okPassword"
                @keyup.enter.native="setPassword('ruleForm3')"
              >
              </el-input>
              <span class="statusImg" @click="isYescomfirm=!isYescomfirm">
                <img src="@/assets/img/no.png" alt />
              </span>
            </el-form-item>
            <el-form-item prop="okPassword" class="padsswordBox" v-show="isYescomfirm">
              <el-input
                size="large"
                type="text"
                placeholder="再次输入新密码"
                v-model="ruleForm3.okPassword"
                @keyup.enter.native="setPassword('ruleForm3')"
              >
              </el-input>
              <span class="statusImg" @click="isYescomfirm=!isYescomfirm">
                <img src="@/assets/img/yes.png" alt />
              </span>
            </el-form-item>
            <div class="login-btn">
              <el-button size="large" type="primary" @click="setPassword('ruleForm3')">确认</el-button>
            </div>
            <p class="login-tips" @click="changePage(0)">返回登录</p>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const TIME_COUNT = 60; //更改倒计时时间
export default {
  name: "login",
  data() {
    return {
      checked: true,
      isYes: false,
      isYesnews: false,
      isYescomfirm: false,
      showCount: true, // 初始启用按钮
      count: "", // 初始化次数
      timer: null,
      login_status: 0,
      ruleForm: {
        username: "",
        password: ""
      },
      ruleForm2: {
        username: "",
        phone: "",
        code: ""
      },
      ruleForm3: {
        username: "",
        code: "",
        newPassword: "",
        okPassword: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        //                  phone: [
        //                      { required: true, message: '请输入手机号码', trigger: 'blur' },
        //                      { pattern: /^[1]([3-9])[0-9]{9}$/,message: '请输入正确的手机号码',trigger: 'blur'}
        //                  ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        newPassword: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        okPassword: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  created(){
      var oMeta = document.createElement('meta');
      oMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=0';
      oMeta.name = 'viewport';
      document.getElementsByTagName('head')[0].appendChild(oMeta);
  },
  beforeDestroy(){
    var array = document.getElementsByName("viewport");
    for (var i=array.length-1;i>=0;i--) {
        array[i].remove()
    }
    location.replace(location.href);
  },
  components: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .post("/account/login", {
              username: this.ruleForm.username,
              password: this.ruleForm.password
            })
            .then(res => {
              if (res.data.code == 200) {
                var data = res.data.data;
                this.$axios.defaults.headers.common["Authorization"] =
                  data.token;
                localStorage.setItem("info", JSON.stringify(data));
                localStorage.setItem("firstTan", false);
                this.$router.push("/");
              } else {
                this.$message.error(res.data.message);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //
    setPassword(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm3.newPassword != this.ruleForm3.okPassword) {
            this.$message.error("新密码与再次输入的新密码不一致");
            return;
          }
          this.$axios
            .post("/account/resetPwd/forget", {
              account: this.ruleForm3.username,
              code: this.ruleForm3.code,
              newPwd: this.ruleForm3.newPassword,
              reNewPwd: this.ruleForm3.okPassword
            })
            .then(res => {
              if (res.data.code == 200) {
                this.$alert("修改成功, 去登录", "提示", {
                  type: "success"
                })
                  .then(() => {
                    this.login_status = 0;
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消"
                    });
                  });
              } else {
                this.$message.error(res.data.message);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    findPassword(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .post("/account/resetPwd/verify", {
              account: this.ruleForm2.username,
              code: this.ruleForm2.code
            })
            .then(res => {
              if (res.data.code == 200) {
                this.login_status = 2;

                this.ruleForm3.username = res.data.data.account;
                this.ruleForm3.code = res.data.data.code;
              } else {
                this.$message.error(res.data.message);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changePage(status) {
      this.login_status = status;
    },
    getPhone(account) {
      this.$axios
        .post("/account/phone", {
          account: account
        })
        .then(res => {
          if (res.data.code == 200) {
            this.ruleForm2.phone = res.data.data.phone;
          }
        });
    },
    send() {
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.showCount = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.showCount = true;
            clearInterval(this.timer); // 清除定时器
            this.timer = null;
          }
        }, 1000);
      }
    },
    getCode(account, phone) {
      if (account && phone) {
        this.$axios
          .post("/account/resetPwd/verifyCode", {
            account: account
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message.success("发送成功");
              this.send();
            }
          });
      } else {
        this.$message.error("用户账号不正确或账号无绑定手机号");
      }
    },
    gopages() {
      this.$router.push({
        path: "/exshort"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.exshortbtn {
  position: fixed;
  left: 78%;
  bottom: 16vh;
  width: 110px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 4px;
  background-color: #fab674;
  .alink {
    display: block;
    color: #666;
  }
}
/deep/ .el-footer {
  padding: 0;
  background-color: #fff;
}

.padsswordBox {
  position: relative;
  .statusImg {
    position: absolute;
    top: 4px;
    right: 10px;
    display: block;
    cursor: pointer;
  }
}
.account_name {
  color: #14a4ff;
}
.v_code {
  color: #14a4ff;
  cursor: pointer;
}
.loginpage {
}

.login-wrap {
}
.ms-title {
    width: 100%;
    text-align: center;
    padding: 12vw 0;
}
.ms-login-box {
}
.ms-login {
 .input-bt{
   margin-bottom: 16px;
 }
}
.ms-content {
  padding: 0 3vw;
}
.login-btn {
  text-align: center;
}
.login-btn button {
    width: 100%;
    height: 12vw;
    margin-bottom: 5vw;
}
.remember {
  display: inline-block;
  .el-checkbox__label {
    color: #666;
  }
}
.login-tips {
  font-size: 14px;
  line-height: 19px;
  color: #666;
  float: right;
  margin-bottom: 40px;
  cursor: pointer;
}

#app {
  overflow: initial !important;
}
</style>
