/*忘记密码*/
<template>
  <div class="container">
    <div class="content">
      <div class="steps">
        <p>
          <span :class="[active === 0 ? 'on' : '']">手机/邮箱验证</span>
          &gt;
          <span :class="[active === 1 ? 'on' : '']">设置新密码</span>
          &gt;
          <span :class="[active === 2 ? 'on' : '']">密码设置成功</span>
        </p>
      </div>
      <h3 v-if="active !== 2" class="title">找回密码</h3>
      <el-form
        v-show="active === 0"
        ref="emailForm"
        class="forget-form"
        :model="emailForm"
        :rules="emailRules"
        label-position="left"
      >
        <el-form-item prop="email">
          <el-input
            ref="email"
            v-model="emailForm.email"
            type="text"
            size="small"
            name="email"
            placeholder="请输入手机号码或邮箱地址"
          >
            <span slot="prefix" class="solt">手机/邮箱</span>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            ref="code"
            v-model="emailForm.code"
            type="text"
            size="small"
            style="width: 220px"
            name="code"
            placeholder="请输入验证码"
          >
            <span slot="prefix" class="solt">验证码</span>
          </el-input>
          <el-button
            class="code"
            type="danger"
            size="small"
            :disabled="countDown > 0"
            plain
            @click.native.prevent="getCode"
            >{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</el-button
          >
        </el-form-item>
        <el-button
          type="danger"
          size="small"
          class="next-btn"
          @click.native.prevent="Next"
          >下一步</el-button
        >
      </el-form>

      <el-form
        v-show="active === 1"
        ref="setForm"
        class="forget-form"
        :model="setForm"
        :rules="setRules"
        label-position="left"
      >
        <el-form-item prop="pwd">
          <el-input
            ref="pwd"
            v-model="setForm.pwd"
            :type="setForm.pwdType"
            size="small"
            name="pwd"
            placeholder="请输设置新密码"
          >
            <span slot="prefix" class="solt">新密码</span>
            <svg-icon
              slot="suffix"
              :icon-class="setForm.pwdType === 'password' ? 'eye' : 'eye-open'"
              @click="showPwd"
            />
          </el-input>
        </el-form-item>
        <el-form-item prop="spwd">
          <el-input
            ref="spwd"
            v-model="setForm.spwd"
            :type="setForm.spwdType"
            size="small"
            name="spwd"
            placeholder="请确认新密码"
          >
            <span slot="prefix" class="solt">确认密码</span>
            <svg-icon
              slot="suffix"
              :icon-class="setForm.spwdType === 'password' ? 'eye' : 'eye-open'"
              @click="showSpwd"
            />
          </el-input>
        </el-form-item>
        <el-button
          type="danger"
          size="small"
          class="next-btn"
          @click.native.prevent="Next"
          >下一步</el-button
        >
      </el-form>

      <div v-show="active !== 2" class="link">
        已找回密码？
        <router-link class="link-item" to="/login">立即登录</router-link>
      </div>

      <div v-show="active === 2" class="success">
        <i class="el-icon-circle-check" />
        <p>恭喜您，成功找回密码！</p>
        <router-link to="/login">返回登录页面</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { validEmail, validCode, validPwd,validMobile } from '@/utils/validate'
import { request, enPassword } from '@/utils/request'
export default {
  name: 'Forget',
  data() {
    const validateEmail = (rule, value, callback) => {
      if (value) {
        if (!validEmail(value)&&!validMobile(value)) {
          callback(new Error('请输入正确的手机号码或邮箱地址'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入手机号码或邮箱地址'))
      }
    }
    const validateCode = (rule, value, callback) => {
      if (value) {
        if (!validCode(value)) {
          callback(new Error('验证码为6位数字'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入验证码'))
      }
    }
    const validatePwd = (rule, value, callback) => {
      if (value) {
        if (!validPwd(value)) {
          callback(new Error('6~18位，只能包含字母、数字和下划线'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入密码'))
      }
    }
    const validateSpwd = (rule, value, callback) => {
      if (value) {
        if (value !== this.setForm.pwd) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请再次输入密码'))
      }
    }
    return {
      active: 0,
      countDown: '00',
      emailForm: {
        email: '',
        code: '',
      },
      emailRules: {
        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }],
      },
      setForm: {
        pwd: '',
        spwd: '',
        pwdType: 'password',
        spwdType: 'password',
      },
      setRules: {
        pwd: [{ required: true, trigger: 'blur', validator: validatePwd }],
        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }],
      },
    }
  },
  computed: {},
  methods: {
    // 切换显示密码
    showPwd() {
      this.setForm.pwdType =
        this.setForm.pwdType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.pwd.focus()
      })
    },
    // 切换显示二次密码
    showSpwd() {
      this.setForm.spwdType =
        this.setForm.spwdType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.spwd.focus()
      })
    },
    // 倒计时
    theLast() {
      this.countDown = 60
      const timer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--
          this.countDown < 10 && (this.countDown = '0' + this.countDown)
        } else {
          clearInterval(timer)
        }
      }, 1000)
    },
    // 获取验证码
    getCode() {
      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
      if (!this.emailForm.email) return this.$message.error('请输入手机号码或邮箱地址!')
      if (!validEmail(this.emailForm.email)&&!validMobile(this.emailForm.email))
        return this.$message.error('请输入正确的手机号码或邮箱地址!')
        let channel=validEmail(this.emailForm.email)?'2':'1'
      const params = {
        transCode: 'A00001',
        mailOrPhone: this.emailForm.email,
        type: '2',
        channel:channel,
      }
      request(params)
        .then((res) => {
          channel==='2'
          ?this.$message.success(
            '验证码已发送至邮箱：' + this.emailForm.email + ',请注意查收！'
          )
          :this.$message.success(
            '验证码已发送至手机号码：' + this.emailForm.email + ',请注意查收！'
          )
          this.theLast()
        })
        .catch((err) => {
          this.$message.error(err.returnMsg)
        })
    },
    // 下一步
    Next() {
      if (this.active === 0) {
        this.$refs.emailForm.validate((valid) => {
          if (valid) {
            this.active = 1
          } else {
            return false
          }
        })
      } else if (this.active === 1) {
        this.$refs.setForm.validate((valid) => {
          if (valid) {
            const params = {
              transCode: 'B00026',
              newPassword: enPassword(this.setForm.pwd),
              mail: this.emailForm.email,
              verificationCode: this.emailForm.code,
            }
            request(params)
              .then((res) => {
                this.$message.success('恭喜您，成功找回密码！')
                this.active = 2
              })
              .catch((err) => {})
          } else {
            return false
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.container {
  @include w_h(100%, 100%);
  padding: 90px;
  background: $color_f2;
  .content {
    margin: 0 auto;
    padding-bottom: 50px;
    @include w_h(430px);
    min-height: 405px;
    background: $color_f;
    box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
    .steps {
      @include w_h(100%, 34px);
      font-size: 12px;
      line-height: 34px;
      text-align: center;
      color: #78a4db;
      background: #004498;
      .on {
        color: $color_f;
      }
    }
    .title {
      margin: 30px auto;
      font-size: 20px;
      text-align: center;
      color: $color_3;
    }
    .forget-form {
      padding: 0 50px 30px;
      @include w_h(100%);
      background: $color_f;
      .solt {
        padding: 0 6px;
        font-size: 12px;
        color: $color_6;
      }
      .code {
        @include position(absolute, 4px, auto, auto, 0);
        @include w_h(100px);
        font-size: 12px;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
      }
      .agree {
        text-align: left;
        font-size: 12px;
        a {
          color: #409eff;
        }
      }
      .next-btn {
        margin: 30px auto 10px;
        @include w_h();
      }
    }
    .link {
      font-size: 12px;
      text-align: center;
      color: $color_9;
      .link-item {
        color: $color_on;
      }
    }
    .success {
      font-size: 14px;
      text-align: center;
      i {
        margin-top: 50px;
        font-size: 60px;
        color: #41b300;
      }
      p {
        margin: 20px auto;
        font-size: 20px;
        font-weight: 700;
        color: $color_3;
      }
      a {
        font-size: 14px;
        color: $color_9;
      }
      a:hover {
        color: $color_on;
      }
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .forget-form .el-input input {
    font-size: 12px;
    color: $color_9;
  }
}
.forget-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
    &--prefix .el-input__inner {
      color: $color_6;
      padding-left: 65px;
    }
  }
}
</style>>

