<!--
  @description: 找回密码x页面
  @author: sunxinman
  @routerPath: /RetrievePassword
  @date:  2019/12/04-23:33
-->
<template>
  <div>
    <headerBar />
    <div class="RetrievePassword">
      <div
        style="font-size:16px;font-weight:bold;text-align: center;margin-bottom:16px;"
      >
        找回密码
        <!-- <p
          style="margin-top:10px;margin-bottom:16px;;color:#999;font-size:14px;"
        >
          提示：申请人如实填写申请信息，带“
          <span style="color:red;">*</span>”为必填内容
        </p> -->
      </div>
      <div class="RetrievePassword-content">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 登录名 -->
          <el-form-item label="登录名" prop="userName">
            <gx-input v-model="ruleForm.userName" gx-placeholder="userName" />
          </el-form-item>
          <!-- 验证方式 -->
          <!-- <el-form-item label="验证方式" prop="type">
            <el-radio-group v-model="hasCheck">
              <el-radio label="00">已验证手机</el-radio>
              <el-radio label="01">已验证邮箱</el-radio>
            </el-radio-group>
          </el-form-item>-->
          <!-- 手机号验证 -->
          <template v-if="hasCheck==='00'">
            <el-form-item label="手机号码" prop="phoneNumber">
              <gx-input
                v-model.trim="ruleForm.phoneNumber"
                gx-maxlength="varchar20"
                gx-placeholder="iphone"
              />
            </el-form-item>
            <!-- 短信验证码 -->
            <el-form-item label="短信验证码" prop="code">
              <el-input v-model="ruleForm.code" placeholder="请输入短信验证码" style="width:calc(100% - 156px)" />
              <el-button :disabled="EmailOrPhone" :loading="isGetCode" type="primary" class="fr" @click="getCode">
                {{ !isGetCode ? "获取短信验证码" : count + "s后重新获取" }}
              </el-button>
            </el-form-item>
          </template>
          <!-- 电子邮箱验证 -->
          <template v-if="hasCheck==='01'">
            <el-form-item label="电子邮箱" prop="email">
              <gx-input
                v-model.trim="ruleForm.email"
                gx-maxlength="varchar100"
                gx-placeholder="email"
              />
            </el-form-item>
            <!-- 邮箱验证码 -->
            <el-form-item label="邮箱验证码" prop="code">
              <el-input v-model="ruleForm.code" placeholder="请输入邮箱验证码" style="width:calc(100% - 116px)" />
              <el-button :disabled="EmailOrPhone" :loading="isGetCode" type="primary" @click="getCode">
                {{ !isGetCode ? "获取邮箱验证码" : count + "s后重新获取" }}
              </el-button>
            </el-form-item>
          </template>
          <!-- 设置新密码 -->
          <el-form-item prop="password" label="设置新密码">
            <gx-input
              v-model="ruleForm.password"
              type="password"
              gx-placeholder="passWord"
            />
          </el-form-item>
          <!-- 确认新密码 -->
          <el-form-item prop="repeatPassword" label="确认新密码">
            <gx-input
              v-model="ruleForm.repeatPassword"
              type="password"
              gx-placeholder="repeatPassword"
            />
          </el-form-item>
          <!-- 按钮-->
          <div class="no_wrap">
            <el-button v-loading="loading" @click="prevStep">
              返  回
            </el-button>
            <el-button
              v-loading="loading"
              type="primary"
              @click="changePass('ruleForm')"
            >
              确认修改
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
/* api */
import { sendAliyunRetrieveCipherCode, retrieveCipherCodeByPhoneCode } from '@/api/common/user.js'
/* 公用方法 */
import { characters1_50, passWord, phone, email, phoneRandCode, characters1_50_Regular, regphone } from '@/assets/js/validate'
import website from '@/assets/js/config/website' // 获取Encrypt公钥
/* 组件 */
import headerBar from '@/components/layout/components/headerBar'
export default {
  name: 'Password',
  components: {
    headerBar
  },
  data() {
    return {
      loading: false, // 按钮Loading
      hasCheck: '00', // 验证方式 00 手机 01 邮箱
      ruleForm: {
        type: '00', // 验证方式 00 手机 01 邮箱
        userName: '', // 用户名
        phoneNumber: '', // 手机号
        email: '', // 邮箱
        password: '', // 新密码
        repeatPassword: '', // 确认新密码
        code: ''// 手机验证码/邮箱验证码
      },
      rules: {
        userName: [{ required: true, validator: characters1_50, trigger: 'blur' }], // 登录名
        password: [{ required: true, validator: passWord, trigger: 'blur' }], // 密码
        repeatPassword: [{ required: true, validator: this.rePwd, trigger: 'blur' }], // 确认新密码
        phoneNumber: [{ required: true, validator: phone, trigger: 'blur' }], // 手机号
        email: [{ validator: email, trigger: 'blur' },
          { required: true, validator: this.Email, trigger: 'blur' }
        ], // 邮箱
        code: [{ required: true, validator: phoneRandCode, trigger: 'blur' }]// 手机验证码/邮箱验证码
      },
      isGetCode: false, // 是否已点击获取验证码
      EmailOrPhone: true, // 手机号/邮箱是否输入正确-按钮展示
      count: 60, // 验证码发送倒计时60s
      timeOut: '' // 倒计时-定时器
    }
  },
  watch: {
    // 验证方式
    hasCheck(val) {
      // 清空已输入的
      this.ruleForm.code = ''// 手机号
      this.ruleForm.phoneNumber = ''// 手机号
      this.ruleForm.email = ''// 邮箱
      this.EmailOrPhone = true
      this.isGetCode = false
      this.count = 60
    },
    'ruleForm.userName'() {
      // 获取验证码按钮状态
      this.getCodeState()
    },
    'ruleForm.phoneNumber'() {
      // 获取验证码按钮状态
      this.getCodeState()
    }
  },

  methods: {
    // 获取验证码按钮状态
    getCodeState() {
      if (characters1_50_Regular.test(this.ruleForm.userName) && regphone.test(this.ruleForm.phoneNumber)) {
        this.EmailOrPhone = false
      } else {
        this.EmailOrPhone = true
      }
    },
    // 返回
    prevStep() {
      this.$router.push('/login')
    },
    // 获取短信验证码
    getCode() {
      this.isGetCode = true
      this.timeOut = setInterval(() => {
        this.count--
        if (this.count === 0) {
          // 清楚验证码的倒计时
          this.clearGetCodeInterval()
        }
      }, 1000)
      // 调用获取验证码接口，无论是否成功，把此变量置为false
      const data = {
        userName: this.ruleForm.userName,
        phoneNumber: this.ruleForm.phoneNumber
      }
      sendAliyunRetrieveCipherCode(data).then((res) => { //
        this.$message({
          type: 'success',
          message: '获取成功'
        })
      }).catch(() => {
        // 清楚验证码的倒计时
        this.clearGetCodeInterval()
        this.ruleForm.code = '' // 清空验证码
      })
    },
    // 清楚验证码的倒计时
    clearGetCodeInterval() {
      clearInterval(this.timeOut)
      this.timeOut = ''
      this.count = 60
      this.isGetCode = false
    },
    // 确认修改
    changePass(formName) {
      // 设置公钥
      this.$Encrypt.setPublicKey(website.publicKey)
      this.$refs[formName].validate((valid) => {
        if (valid) {
        // 调用用户密码修改接口
          const data = {
            userName: this.ruleForm.userName, // 用户名
            phoneNumber: this.ruleForm.phoneNumber, // 手机号
            cipher: this.$Encrypt.encryptLong(this.ruleForm.password), // 新密码-加密
            // cipher: this.$Base64.encode(this.ruleForm.password), // 新密码-加密保存给后端
            code: this.ruleForm.code// 手机验证码/邮箱验证码
          }
          retrieveCipherCodeByPhoneCode(data).then((res) => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$router.push('/login')
          }).catch(() => {
            // 清楚验证码的倒计时
            this.clearGetCodeInterval()
            this.ruleForm.code = '' // 清空验证码
          })
        }
      })
    },
    /* -------------------校验正则------------------- */
    // 邮箱输入是否正确
    email(rule, value, callback) {
      callback()
      this.EmailOrPhone = false // 手机号/邮箱是否输入正确-按钮展示
    },
    // 确认新密码
    rePwd(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import url("~@/assets/style/common/public.less");
.colorOrange {
  color: @hyacinthine;
}
.RetrievePassword {
  margin-top: calc((100vh - 50px - 55px - 600px) / 2);
  .RetrievePassword-content {
    margin: 0 auto;
    width: 900px;
    border: 1px solid @border-gray;
    padding: 26px 0px 10px;
    box-sizing: border-box;
    .demo-ruleForm {
      width: 45%;
      margin: 0 auto;
    }
  }
}
.no_wrap {
  white-space: nowrap;
  width: 100%;
  text-align: center;
  margin-top: 32px;
}
</style>
