<template>
<div class="content-s">
  <div class="step3">
    <el-form ref="form3" label-width="100px" :model="accountSet" :rules="accountRules" label-position="top">
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :xs="24" :md="10">
          <el-form-item prop="account" :label="$t('LoginModule.NormalLogin.account')">
            <el-input v-model="accountSet.account" type="text" :placeholder="$t('LoginModule.ForgetLogin.inputStr')"></el-input>
          </el-form-item>
          <el-form-item prop="code" :label="(accountSet.type ? $t('LoginModule.ForgetLogin.mailCode') : $t('LoginModule.ForgetLogin.iphoneCode'))">
            <el-input v-model="accountSet.code" type="text" :placeholder="$t('LoginModule.ForgetLogin.input4Code')">
              <el-button slot="append" type="primary" @click="sendCode">{{sendBtnText}}</el-button>
            </el-input>
          </el-form-item>
          <el-form-item  prop="newpwd" :label="$t('LoginModule.ForgetLogin.newPwd')">
            <el-input v-model="accountSet.newpwd" type="password" :placeholder="$t('LoginModule.ForgetLogin.placeholder')"></el-input>
          </el-form-item>
          <el-form-item prop="repwd" :label="$t('LoginModule.ForgetLogin.repeatNewPwd')">
            <el-input v-model="accountSet.repwd" type="password" :placeholder="$t('LoginModule.ForgetLogin.repeatPlaceholder')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;" type="primary" @click="onSubmitForm">{{$t('LoginModule.ForgetLogin.finish')}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <slot name="go-back"></slot>
  </div>
  <el-dialog
    title=""
    :visible.sync="centerDialogVisible"
    width="30%"
    center append-to-body>
    <i class="el-icon-success" style="display: block; font-size: 0.6rem; text-align: center; color: #67c23a;"></i>
    <span style="display: block; margin-top: 0.2rem; text-align: center;">{{$t('LoginModule.ForgetLogin.tipStr')}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="goLogin">{{$t('LoginModule.ForgetLogin.goLogin')}}</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import Login from '../action'

export default {
  name: 'ForgetLogin',
  componentName: 'ForgetLogin',
  props: {
    attr: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    },
    query: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    }
  },
  data () {
    /* 检查账号格式 */
    const checkAccount = (rule, value, callback) => {
      if (!/^(1[3-9]\d{9}|[\w\.]+@\w+(\.\w+)+)$/.test(value)) { // eslint-disable-line
        callback(new Error(this.$t('LoginModule.ForgetLogin.rightStr')))
      } else {
        /* 手机格式 */
        if (/^(1[3-9]\d{9}$)/.test(value)) {
          this.accountSet.type = 0
        }
        /* 邮箱格式 */
        if (/^([\w\.]+@\w+(\.\w+)+)/.test(value)) { // eslint-disable-line
          this.accountSet.type = 1
        }
        callback()
      }
    }
    /* 检查密码 */
    const checkPwd = (rule, value, callback) => {
      if (value === this.accountSet.newpwd) {
        callback()
      } else {
        callback(new Error(this.$t('LoginModule.ForgetLogin.checkPwd')))
      }
    }
    return {
      isSendCode: false, // 是否已发送验证码
      timeInterval: null, // 定时器，倒计时
      sendBtnText: this.$t('LoginModule.ForgetLogin.sendCode'), // 按钮 文字
      accountSet: {
        type: 0, // 0：表示手机格式，1：表示邮箱格式
        account: '',
        code: ''
      },
      accountRules: {
        account: [
          { required: true, message: this.$t('LoginModule.ForgetLogin.inputStr'), trigger: 'blur' },
          { validator: checkAccount, trigger: 'change' }
        ],
        code: [
          { required: true, message: this.$t('LoginModule.ForgetLogin.input4Code'), trigger: 'blur' },
          { pattern: /^(\d{4})$/, message: this.$t('LoginModule.ForgetLogin.input4Code'), trigger: 'change' }
        ],
        newpwd: [
          { required: true, message: this.$t('LoginModule.ForgetLogin.newPwd'), trigger: 'blur' },
          { pattern: /^.*[^\d]+.*$/, message: this.$t('LoginModule.ForgetLogin.placeholder'), trigger: 'blur' }
        ],
        repwd: [
          { required: true, message: this.$t('LoginModule.ForgetLogin.repeatPlaceholder'), trigger: 'blur' },
          { validator: checkPwd, trigger: 'change' }
        ]
      },
      centerDialogVisible: false // 修改密码成功弹框
    }
  },
  beforeDestroy () { /* 清空倒计时 */ this.clearTime() },
  methods: {
    /* 发送验证码 */
    sendCode () {
      if (!this.isSendCode) {
        Login.sendResetPwdCode({ account: this.accountSet.account }).then(res => {
          if (res.code === 0) {
            /* 发送验证码不管是否成功，都开始倒计时 */
            let time = 60
            this.isSendCode = true
            this.sendBtnText = '60' + this.$t('LoginModule.ForgetLogin.afterMiniutes')
            this.timeInterval = setInterval(() => {
              if (time-- > 0) {
                this.sendBtnText = time + this.$t('LoginModule.ForgetLogin.afterMiniutes')
              } else {
                this.isSendCode = false
                this.sendBtnText = this.$t('LoginModule.ForgetLogin.sendCode')
                clearInterval(this.timeInterval)
              }
            }, 1000)
            this.$message({
              type: 'success',
              message: this.$t('LoginModule.ForgetLogin.codeSuccess'),
              duration: 10000
            })
          } else {
            return new Error(JSON.stringify(res))
          }
        })
      }
    },
    /* 清空倒计时 */
    clearTime () {
      this.isSendCode = false
      this.sendBtnText = this.$t('LoginModule.ForgetLogin.sendCode')
      clearInterval(this.timeInterval)
    },
    /* 第三步 提交 */
    onSubmitForm () {
      this.$refs.form3.validate((valid) => {
        if (valid) {
          Login.resetPwd({
            account: this.accountSet.account,
            code: this.accountSet.code,
            password: this.accountSet.newpwd,
            passwordR: this.accountSet.repwd
          }).then(data => {
            if (data.code === 0) {
              this.centerDialogVisible = true
            } else {
              return new Error(JSON.stringify(data))
            }
          })
        } else {
          this.$message.error(this.$t('LoginModule.Others.formCheckStr'))
          return false
        }
      })
    },
    /**
     * 关闭弹框时，跳转 登录页
     */
    goLogin () {
      this.centerDialogVisible = false
      /* 跳转到 登录 */
      this.$router.push({ path: '/login/index' })
    }
  }
}
</script>
<style lang="scss" scoped>
.content-s {
  position: absolute;
  left: 50%;
  top: 22%;
  padding: 20px 0;
  width: calc(100% - 20px);
  max-width: 1000px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  background: #fff;
}
/* forget 登录 */
.step1 { font-size: 16px; width: 90%; margin: 20px auto 0 auto; }
.step2 { font-size: 16px; width: 71%; margin: 20px auto 0 auto; }
.step2 .txt-title { margin-bottom: 0.3rem; color: #999; text-align: center; }
.step2 .operate { margin-top: 0.2rem; }
.step3 { font-size: 16px;  margin: 10px 20px 0; text-align: left;}
::v-deep .el-form-item__label{ line-height:1; }
</style>
