<template>
  <el-form
    ref="loginForm"
    class="login-form"
    status-icon
    :rules="loginRules"
    :model="loginForm"
    label-width="0"
  >
    <el-form-item prop="phone">
      <el-input
        v-model="loginForm.phone"
        size="small"
        auto-complete="off"
        :placeholder="$t('ec.login.phone')"
        @keyup.enter.native="handleLogin"
      >
        <i
          slot="prefix"
          class="el-icon-mobile-phone"
          style="margin-top:8px;"
        />
      </el-input>
    </el-form-item>
    <el-form-item prop="smsCode">
      <el-input
        v-model="loginForm.smsCode"
        size="small"
        auto-complete="off"
        :placeholder="$t('ec.login.code')"
        @keyup.enter.native="handleLogin"
      >
        <i
          slot="prefix"
          class="el-icon-chat-line-square"
          style="margin-top:2px;"
        />
        <template slot="append">
          <span
            class="msg-text"
            :class="[{display:msgKey}]"
            @click="handleSend"
          >{{ msgText }}</span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        :style="`background:${defaultTheme}`"
        type="primary"
        size="small"
        class="login-submit"
        @click.native.prevent="handleLogin"
      >
        <!--{{ $t('ec.login.submit') }}-->
        {{ $t('ec.login.logIn') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import { sendPhoneCode } from 'ecip-web/api/user'
import config from '@/settings'

export default {
  name: 'CodeLogin',
  data() {
    const validateCode = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error(this.$t('ec.login.codeError')))
      } else {
        callback()
      }
    }
    return {
      msgText: '',
      msgTime: '',
      msgKey: false,
      loginForm: {
        phone: '',
        smsCode: ''
      },
      loginRules: {
        phone: [{ required: true, validator: this.$validator.mobilePhoneNumber, trigger: 'blur' }],
        smsCode: [{ required: true, trigger: 'blur', validator: validateCode }]
      }
    }
  },
  created() {
    this.msgText = this.config.MSGINIT
    this.msgTime = this.config.MSGTIME
  },
  mounted() {},
  computed: {
    ...mapGetters([]),
    config() {
      return {
        // MSGINIT: this.$t('ec.login.msgText'),
        MSGINIT: this.$t('ec.login.sendCode'),
        // MSGSCUCCESS: this.$t('ec.login.msgSuccess'),
        MSGSCUCCESS: this.$t('ec.login.resendCodeAfter'),
        MSGTIME: 60
      }
    }
  },
  props: [],
  methods: {
    async handleSend() {
      if (this.msgKey) return
      await sendPhoneCode({ phone: this.loginForm.phone })
      this.msgText = this.msgTime + this.config.MSGSCUCCESS
      this.msgKey = true
      const time = setInterval(() => {
        this.msgTime--
        this.msgText = this.msgTime + this.config.MSGSCUCCESS
        if (this.msgTime === 0) {
          this.msgTime = this.config.MSGTIME
          this.msgText = this.config.MSGINIT
          this.msgKey = false
          clearInterval(time)
        }
      }, 1000)
    },
    handleLogin() {
      // this.$message.info('暂不支持手机登录')
      this.$refs.loginForm.validate(valid => {
        this.loading = true
        const loading = this.$loading({
          lock: true,
          text: this.$t('ec.login.wait'),
          spinner: 'el-icon-loading'
        })
        const loginForm = Object.assign(
          { enableTenant: config.enableTenant, username: this.loginForm.phone, type: 'sms' },
          this.loginForm
        )
        if (valid) {
          this.$store.dispatch('user/login', loginForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || '/',
                query: this.otherQuery
              })
              this.loading = false
              loading.close()
            })
            .catch(async() => {
              this.loginForm.smsCode = ''
              this.loading = false
              loading.close()
            })
        } else {
          console.log('error submit!!')
          loading.close()
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.msg-text {
  display: block;
  width: 100px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.msg-text.display {
  color: #ccc;
}
</style>
