<template>
<div class="content-s">
  <el-steps :active="stepActive" align-center>
    <el-step :title="$t('LoginModule.ForgetLogin.step1')"></el-step>
    <el-step :title="$t('LoginModule.ForgetLogin.step2')"></el-step>
    <el-step :title="$t('LoginModule.ForgetLogin.step3')"></el-step>
  </el-steps>
  <div v-if="stepActive === 1" class="step1">
    <el-form ref="form1" :model="accountSet" :rules="accountRules" @submit.native.prevent>
      <el-row>
        <el-col :xs="24" :sm="5" :md="6" :lg="6" :xl="8"><el-form-item></el-form-item></el-col>
        <el-col :xs="24" :sm="9" :md="8" :lg="8" :xl="5">
          <el-form-item prop="account">
            <el-input v-model="accountSet.account" type="text" :placeholder="$t('LoginModule.ForgetLogin.inputStr')" @keyup.enter.native="onSubmitForm1"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="5" :md="4" :lg="4" :xl="3">
          <el-form-item>
            <el-button style="width: 100%;" type="primary" @click="onSubmitForm1">{{$t('LoginModule.ForgetLogin.sendCode')}}</el-button>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="5" :md="6" :lg="6" :xl="8"><el-form-item></el-form-item></el-col>
      </el-row>
    </el-form>
    <slot name="go-back"></slot>
  </div>
  <div v-if="stepActive === 2" class="step2">
    <div class="txt-title">
      {{$t('LoginModule.ForgetLogin.codeStr')}}{{accountSet.account}}
    </div>
    <el-form ref="form2" :model="accountSet" :rules="accountRules" @submit.native.prevent>
      <el-row>
        <el-col :xs="24" :sm="1" :md="2" :lg="4" :xl="4"><el-form-item></el-form-item></el-col>
        <el-col :xs="24" :sm="16" :md="14" :lg="11" :xl="11">
          <el-form-item label-width="120px" 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-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="5" :xl="5">
          <el-form-item>
            <el-button style="width: 100%;" type="primary" :disabled="isSendCode" @click="sendCode">{{sendBtnText}}</el-button>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="1" :md="2" :lg="4" :xl="4"><el-form-item></el-form-item></el-col>
      </el-row>
    </el-form>
    <div class="operate">
      <el-row>
        <el-col :span="12">
          <el-button @click="goPrevStep">{{$t('LoginModule.ForgetLogin.prev')}}</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button @click="onSubmitForm2">{{$t('LoginModule.ForgetLogin.next')}}</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
  <div v-if="stepActive === 3" class="step3">
    <el-form ref="form3" :model="accountSet" :rules="accountRules" label-position="left">
      <el-row>
        <el-col :xs="24" :sm="3" :md="5" :lg="6" :xl="6"><el-form-item></el-form-item></el-col>
        <el-col :xs="24" :sm="18" :md="14" :lg="12" :xl="12">
          <el-form-item label-width="120px" 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 label-width="120px" 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="onSubmitForm3">{{$t('LoginModule.ForgetLogin.finish')}}</el-button>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="3" :md="5" :lg="6" :xl="6"><el-form-item></el-form-item></el-col>
      </el-row>
    </el-form>
  </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 {
      stepActive: 1,
      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: {
    /* 上一步 */
    goPrevStep () {
      this.stepActive -= 1
      /* 清空 第一步 填写内容 */
      this.accountSet.account = ''
      /* 清空倒计时 */
      this.clearTime()
    },
    /* 第一步 提交 */
    onSubmitForm1 () {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          /* 跳到第二步 */
          this.stepActive = 2
          /* 跳到第二步 并 发送验证码 */
          this.sendCode()
        } else {
          this.$message.error(this.$t('LoginModule.ForgetLogin.checkRightStr'))
          return false
        }
      })
    },
    /* 发送验证码 */
    sendCode () {
      if (!this.isSendCode) {
        Login.sendResetPwdCode({
          contact: this.accountSet.account,
          source_type: 3
        }).then(res => {
          if (res.status === 200) {
            /* 发送验证码不管是否成功，都开始倒计时 */
            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)
    },
    /* 第二步 提交 */
    onSubmitForm2 () {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          Login.validateCode({
            contact: this.accountSet.account,
            code: this.accountSet.code
          }).then(data => {
            if (data.status === 200) {
              /* 跳到第三步 */
              this.stepActive = 3
            } else {
              return new Error(JSON.stringify(data))
            }
          })
        } else {
          this.$message.error(this.$t('LoginModule.Others.formCheckStr'))
          return false
        }
      })
    },
    /* 第三步 提交 */
    onSubmitForm3 () {
      this.$refs.form3.validate((valid) => {
        if (valid) {
          Login.resetPwd({
            contact: this.accountSet.account,
            code: this.accountSet.code,
            new_password: this.accountSet.repwd
          }).then(data => {
            if (data.status === 200) {
              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: 55%;
  padding: 40px 0;
  width: 80%;
  max-width: 1200px;
  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;  width: 80%; margin: 20px auto 0 auto; }
</style>
