<style>
  .Forgetpassword .resHeader {
    width: 100%;
    height: 190px;
    background-image: url("../assets/img/fpassword.png");
  }

  .Forgetpassword .resHeader .title {
    height: 50px;
    font-size: 26px;
    width: 274px;
    margin: 0 auto 5px;
    display: flex;
    flex-wrap: nowrap;
  }

  .Forgetpassword .resHeader .title div {
    padding: 0 10px;
    width: 125px;
  }

  .Forgetpassword .resHeader .title {
    font-size: 26px;
    color: #333;
    padding-top: 75px;
    text-align: center;
  }

  .Forgetpassword .regisLogo {
    float: right;
    height: 50px;
  }

  .Forgetpassword .regisLine {
    height: 25px;
    width: 1px !important;
    background: rgb(68, 68, 68);
    padding: 0px !important;
    margin: 21px 0 0 10px;
  }

  .Forgetpassword .regisWelcome {
    padding: 0 !important;
    margin: 14px 0 0 10px;
  }

  .Forgetpassword .login {
    color: #409EFF;
    cursor: pointer;
  }

  .Forgetpassword .regisLogin {
    color: rgb(125, 125, 125);
    text-align: center;
    margin-top: 15px;
  }

  .Forgetpassword .regisMain {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    flex: 1;
  }

  .Forgetpassword .box-card {
    width: 700px;
    margin: 40px auto 0;
  }

  .Forgetpassword .box-card .el-input .el-input__inner {
    height: 45px;
    border-radius: 22.5px;
  }

  .Forgetpassword .box-card .el-form-item__content {
    width: 420px;
  }

  .Forgetpassword .NextStep {
    width: 300px;
    text-align: left;
    margin: 40px auto 20px;
  }

  .Forgetpassword .box-card .code .el-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .Forgetpassword .box-card .code .el-input-group__append {
    background-color: #007BFF;
    color: #fff;
    border-top-right-radius: 22.5px;
    border-bottom-right-radius: 22.5px;
    border: 1px solid #007BFF;
  }

  .Forgetpassword .el-footer {
    color: #ACACAC;
    text-align: center;
    line-height: 60px;
    background-color: #F6F6F6;
    font-size: 14px;
  }

  .Forgetpassword .forgetBtn {
    font-size: 16px;
    width: 120px;
    height: 45px;
    border-radius: 23px;
  }

</style>
<template>
  <div class="Forgetpassword">
    <div class="resHeader">
      <div class="title">
        <div>
          <img src="../assets/img/logo.png" alt="" class="regisLogo" />
        </div>
        <div class="regisLine"></div>
        <div class="regisWelcome">重置密码</div>
      </div>
      <div class="regisLogin" style="">
        已有账号？<span class="login" @click="goLogin">登录</span>
      </div>
    </div>
    <div class="regisMain" :style="{minHeight: Height+'px'}">
      <div class="box-card">
        <el-form :model="msg" :rules="rules" ref="msg" label-width="130px" style="padding:0 50px;">
          <el-form-item label="手机号" prop="MobilePhone">
            <el-input type="text" v-model="msg.MobilePhone" maxlength="20" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="短信验证码" prop="ValidataCode" class="code" style="display:none;">
            <el-input v-model="msg.ValidataCode" maxlength="6" type="text">
              <template slot="append">获取短信验证码</template>
            </el-input>
          </el-form-item>
          <el-form-item label="设置密码" prop="Password">
            <el-input type="password" v-model="msg.Password" maxlength="20" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="确认密码" prop="Password2">
            <el-input type="password" v-model="msg.Password2" maxlength="20" placeholder="请再次输入密码" />
          </el-form-item>
        </el-form>
        <div class="NextStep">
          <button class="el-button el-button--primary forgetBtn" @click="submitForm('msg')">提交</button>
        </div>
      </div>
    </div>
    <div class="el-footer el-footer" style="height: 60px;">
      <a target="_blank" style="text-decoration: none;">由微途科技提供技术支持</a>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      let validataPwd = (rule, value, callback) => {
        if (this.msg.Password == '') {
          return callback(new Error('请输入密码'));
        }
        if (this.msg.Password.trim().length < 6 || this.msg.Password.trim().length > 15) {
          return callback(new Error('密码应在6至15位之间'));
        } else {
          callback();
        }
      }
      let validataPwd2 = (rule, value, callback) => {
        if (this.msg.Password2 == '') {
          return callback(new Error('请再次输入密码'));
        }
        if (this.msg.Password2.trim().length < 6 || this.msg.Password2.trim().length > 15) {
          return callback(new Error('密码应在6至15位之间'));
        }
        if (this.msg.Password != this.msg.Password2) {
          return callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      return {
        Height: 0,
        msg: {
          MobilePhone: '',
          ValidataCode: '',
          Password: '',
          Password2: ''
        },
        rules: {
          MobilePhone: [{
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          }],
          // ValidataCode: [
          //     { required: true, message: "手机验证码不能为空", trigger: "blur" }
          // ],
          Password: [{
            validator: validataPwd,
            trigger: "blur",
            required: true
          }],
          Password2: [{
            validator: validataPwd2,
            trigger: "blur",
            required: true
          }]
        },
      };
    },
    created() {

    },
    methods: {
      submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.resetInfo();
          } else {
            return false;
          }
        });
      },
      //提交重置
      resetInfo() {
        this.apipost("/api/Tenant/UpdateTenantPwd", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.Success("修改密码成功!");
            this.goLogin();

          } else {
            this.Info(res.data.message);
          }
        })
      },
      //跳转登录
      goLogin() {
        this.$router.push({
          name: 'login',
          query: {
            blank: "y"
          }
        });
      },

    },
    mounted() {
      this.Height = document.documentElement.clientHeight - 250;
      //监听浏览器窗口变化　
      window.onresize = () => {
        this.Height = document.documentElement.clientHeight - 250
      }
    }
  };

</script>
