<template>
  <el-form ref="setAccountform" :model="setAccount" :rules="accountRules">
    <el-form-item prop="user">
      <el-input class="self-input" v-model="setAccount.user" type="text" :placeholder="$t('LoginModule.CodeLogin.iphone')" @keyup.enter.native="onSubmitSetAccount">
      </el-input>
    </el-form-item>
    <el-form-item prop="pwd" style="margin-bottom: 4px;">
      <el-input v-model="setAccount.pwd" :disabled="isSendDisable" type="text" :placeholder="$t('LoginModule.CodeLogin.code')" @keyup.enter.native="onSubmitSetAccount">
        <el-button slot="suffix" size="mini" :disabled="isSendDisable || isSendCode" @click="sendCode">{{sendBtnText}}</el-button>
      </el-input>
    </el-form-item>
    <el-form-item prop="isRemember" style="margin-bottom: 0px; text-align: left;">
      <el-checkbox v-model="setAccount.isRemember" :label="$t('LoginModule.NormalLogin.isRemember')" name="type"></el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">{{$t('LoginModule.CodeLogin.submitbtn')}}</el-button>
    </el-form-item>
    <slot name="text"></slot>
  </el-form>
</template>

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

export default {
  name: 'CodeLogin',
  componentName: 'CodeLogin',
  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}$/.test(value)) {
        this.isSendDisable = false
        callback()
      } else {
        this.isSendDisable = true
        callback(new Error(this.$t('LoginModule.CodeLogin.rightIphoneStr')))
      }
    }
    return {
      isSendDisable: true, // 是否可以发送
      isSendCode: false, // 是否已发送验证码
      timeInterval: null, // 定时器，倒计时
      sendBtnText: this.$t('LoginModule.CodeLogin.sendCode'), // 按钮 文字
      setAccount: {},
      accountRules: {
        user: [
          { required: true, message: this.$t('LoginModule.CodeLogin.inputIphone'), trigger: 'blur' },
          { validator: checkAccount, trigger: 'change' }
        ],
        pwd: [
          { required: true, message: this.$t('LoginModule.CodeLogin.inputCode'), trigger: 'blur' }
        ]
      }
    }
  },
  beforeDestroy () { /* 清空倒计时 */ this.clearTime() },
  methods: {
    /* 发送验证码 */
    sendCode () {
      if (!this.isSendCode) {
        // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
        Login.sendCode({
          /* 老版发送验证码 */
          mobile: this.setAccount.user,
          /* 新版发送验证码 */
          account: this.setAccount.user
        }).then(res => {
          /* 发送验证码不管是否成功，都开始倒计时 */
          let time = 60
          this.isSendCode = true
          this.sendBtnText = '60' + this.$t('LoginModule.CodeLogin.afterMiniutes')
          this.timeInterval = setInterval(() => {
            if (time-- > 0) {
              this.sendBtnText = time + this.$t('LoginModule.CodeLogin.afterMiniutes')
            } else {
              this.isSendCode = false
              this.sendBtnText = this.$t('LoginModule.CodeLogin.sendCode')
              clearInterval(this.timeInterval)
            }
          }, 1000)
        }).catch(error => {
          this.$message.error(error.message)
        })
      }
    },
    /* 清空倒计时 */
    clearTime () {
      this.isSendCode = true
      this.sendBtnText = this.$t('LoginModule.CodeLogin.sendCode')
      clearInterval(this.timeInterval)
    },
    onSubmitSetAccount () {
      this.$refs.setAccountform.validate((valid) => {
        if (valid) {
          Login.codeLogin({
            /* 老版 */
            mobile: this.setAccount.user,
            code: this.setAccount.pwd,
            /* 新版 */
            account: this.setAccount.user,
            password: this.setAccount.pwd,
            type: 2,
            RememberMe: this.setAccount.isRemember ? 'true' : 'false',
            service: window.location.origin
          }).then(data => {
            if (!data) { return }
            if (data.url) {
              /* 查询上次跳转信息，并跳转回去 */
              if (this.query.rd) {
                window.location.href = data.url + decodeURIComponent(this.query.rd)
              } else {
                window.location.href = data.url
              }
            } else {
              this.$alert(this.$t('LoginModule.Others.noSysRole'), this.$t('LoginModule.Others.tip'), {
                confirmButtonText: this.$t('LoginModule.Others.right'),
                callback: action => {
                  Login.outLogin().then(res => {
                    this.$message({
                      type: 'info',
                      message: this.$t('LoginModule.Others.outloginStr')
                    })
                  })
                }
              })
            }
          }).catch(error => {
            this.$message.error(error.message)
          })
        } else {
          this.$message.error(this.$t('LoginModule.Others.formCheckStr'))
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-btn { margin-top: 0; width: 100%; }
</style>
