<template>
  <div class="forget-password">
    <!-- <img class="bg" src="@/assets/img/bg.jpg" alt="" /> -->
    <div class="forget-main">
      <div class="my-card">
        <div class="title-container">
          <h3 class="title">设置新登录密码</h3>
        </div>
        <div style="margin: 8px 0 35px 0">
          <el-steps
            :active="step"
            simple
            process-status="finish"
            finish-status="success"
          >
            <!-- @click.native="modifyPostLevel(index)" -->
            <el-step
              v-for="(item, index) in stepList"
              :key="index"
              :title="item"
            />
          </el-steps>
        </div>
        <div v-if="step === 0">
          <el-form
            ref="loginFormX"
            :model="loginFormX"
            :rules="loginRulesX"
            class="login-form"
            autocomplete="on"
            label-position="left"
            label-width="95px"
          >
            <!-- <el-form-item prop="username" label="账号：">
              <el-input
                ref="username"
                v-model="loginFormX.username"
                placeholder="账号"
                name="username"
                type="text"
                tabindex="1"
                maxlength="50"
                autocomplete="on"
              />
            </el-form-item> -->
            <el-form-item prop="mobile" label="手机号：">
              <el-input
                ref="mobile"
                v-model="loginFormX.mobile"
                placeholder="手机号"
                name="mobile"
                type="text"
                tabindex="1"
                maxlength="11"
                autocomplete="on"
              />
            </el-form-item>
            <el-form-item prop="code" label="验证码：" class="code-sign">
              <ul class="code-main">
                <li>
                  <el-input
                    ref="code"
                    v-model="loginFormX.code"
                    placeholder="验证码"
                    name="code"
                    type="text"
                    tabindex="1"
                    maxlength="50"
                    autocomplete="on"
                  />
                </li>
                <li>
                  <send-verification-code
                    :mobile="loginFormX.mobile"
                    @phoneErr="phoneErr"
                  />
                </li>
              </ul>
            </el-form-item>

            <el-button
              type="primary"
              style="width: 100%; margin-top: 10px"
              @click.native.prevent="handleLoginX"
            >下一步</el-button>
          </el-form>
        </div>
        <div v-else-if="step === 1">
          <el-form
            ref="loginFormY"
            :model="loginFormY"
            :rules="loginRulesY"
            class="login-form"
            autocomplete="on"
            label-position="left"
            label-width="100px"
          >
            <el-form-item prop="newPassword" label="新密码：">
              <el-input
                ref="newPassword"
                v-model="loginFormY.newPassword"
                placeholder="6-16位数字字母组合"
                name="newPassword"
                type="password"
                tabindex="1"
                maxlength="16"
                autocomplete="on"
              />
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码：">
              <el-input
                ref="confirmPassword"
                v-model="loginFormY.confirmPassword"
                placeholder="6-16位数字字母组合"
                name="confirmPassword"
                type="password"
                tabindex="1"
                maxlength="16"
                autocomplete="on"
              />
            </el-form-item>
            <el-button-group style="margin-top: 10px">
              <el-button
                type="primary"
                style="width: 140px"
                :disabled="loading"
                icon="el-icon-arrow-left"
                @click.native.prevent="step = 0"
              >上一步</el-button>
              <el-button
                type="primary"
                :loading="loading"
                style="width: 140px"
                @click.native.prevent="handleLoginY"
              >下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
            </el-button-group>
          </el-form>
        </div>
        <div v-else class="success-card">
          <div class="success-icon">
            <i class="el-icon-success" />
          </div>
          <div class="teps-title">恭喜你，新密码设置成功！</div>
          <div class="teps-time">
            <span>{{ num }}</span>秒后自动返回
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  isMobile,
  isnumber,
  isAlphanumeric,
  validAlphabets
} from '@/utils/validate'
import asyncRequest from '@/apis/service/user/index'
import resToken from '@/mixins/resToken'
export default {
  name: 'Login',
  mixins: [resToken],
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入账号'))
    //   } else {
    //     callback()
    //   }
    // }
    const validatemobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空！'))
      } else {
        if (!isMobile(value)) {
          callback(new Error('手机号不正确！'))
        } else {
          callback()
        }
      }
    }
    const validatecode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('验证码不能为空！'))
      } else {
        if (!isnumber(value)) {
          callback(new Error('验证码应为6位数字！'))
        } else if (value.length !== 6) {
          callback(new Error('验证码应为6位数字！'))
        } else {
          callback()
        }
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('新密码不能为空！'))
      } else {
        if (!isAlphanumeric(value)) {
          callback(new Error('新密码为6-16位数字字母组合！'))
        } else if (value.length < 6 || value.length > 16) {
          callback(new Error('新密码为6-16位数字字母组合！'))
        } else if (isnumber(value)) {
          callback(new Error('新密码不能为纯数字！'))
        } else if (validAlphabets(value)) {
          callback(new Error('新密码不能为纯字母！'))
        } else {
          callback()
        }
      }
    }
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空！'))
      } else {
        if (this.loginFormY.newPassword !== value) {
          callback(new Error('确认密码与新密码不一致！'))
        } else {
          callback()
        }
      }
    }
    return {
      stepList: ['验证身份', '重设密码', '设置成功'],
      timer: null,
      num: 3,
      step: 0,
      loginFormX: {
        // username: '',
        mobile: '',
        code: ''
      },
      loginRulesX: {
        // username: [
        //   { required: true, trigger: 'blur', validator: validateUsername }
        // ],
        mobile: [
          { required: true, trigger: 'blur', validator: validatemobile }
        ],
        code: [{ required: true, trigger: 'blur', validator: validatecode }]
      },
      loginFormY: {
        newPassword: '',
        confirmPassword: ''
      },
      loginRulesY: {
        newPassword: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        confirmPassword: [
          {
            required: true,
            trigger: 'blur',
            validator: validateConfirmPassword
          }
        ]
      },
      codeType: 'code',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },

  mounted() {
    if (this.loginFormX.mobile === '') {
      this.$refs.mobile.focus()
    }
    if (this.loginFormX.code === '') {
      this.$refs.code.focus()
    }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    modifyPostLevel(val) {
      this.step = val
    },
    phoneErr(e) {
      if (!e) {
        this.$refs.loginFormX.validateField('mobile')
      }
    },
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
    },

    handleLoginX() {
      this.$refs.loginFormX.validate((valid) => {
        if (valid) {
          this.step++
        } else {
          return false
        }
      })
    },
    handleLoginY() {
      this.$refs.loginFormY.validate((valid) => {
        if (valid) {
          if (!this.loading) {
            this.loading = true
            const model = {
              // username: this.loginFormX.username,
              mobile: this.loginFormX.mobile,
              code: this.loginFormX.code,
              password: this.loginFormY.newPassword
            }
            asyncRequest.resetpwd(model).then(async(res) => {
              this.loading = false
              if (res && res.code === 1) {
                this.step++
                this.setTime()
              } else{
                this.$message.warning(res.msg)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    setTime() {
      this.timer = setInterval(() => {
        if (this.num !== 0) {
          this.num--
        } else {
          if (this.timer) {
            clearInterval(this.timer)
            this.num = 3
            this.gotoLogin()
          }
        }
      }, 1000)
    },

    gotoLogin() {
      //  this.$router.
      //  push(`/login`);
      window.vm.$router.replace(`/login`)
      // push("/login ");
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #000;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .forget-password .el-input input {
    color: $cursor;
  }
}
</style>
<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.forget-password {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background-image: url("~@/assets/sheji/loginbg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: #ecf5ff;
  background-size: cover;
  .bg {
    width: 100%;
    height: 100%;
  }
  .forget-main {
    width: 100%;
    height: 100%;
    text-align: center;
    .my-card {
      width: 550px;
      height: 520px;
      border-radius: 20px;
      box-shadow: 0 0 6px #d2d2d2;
      padding: 80px 30px 50px 30px;
      margin: 18vh auto 0 auto;
      // border-radius: 5px;
      background: #fff;
      
    }
  }
  .success-card {
    i {
      color: #13ce66;
      font-size: 90px;
      margin: -14px 0 20px 0;
    }
    .teps-title {
      height: 50px;
      line-height: 25px;
    }
    .teps-time {
      span {
        padding: 0 10px;
        color: #e4393c;
      }
      color: #999;
    }
  }
  .login-form {
    position: relative;
    width: 380px;
    max-width: 100%;
    padding: 0 35px 35px 35px;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 23px;
      color: #565656;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: normal;
      // font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
}
</style>
