<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.NormalLogin.account')" @keyup.enter.native="onSubmitSetAccount">
        <i slot="prefix" class="el-input__icon el-icon-self-character"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="pwd" style="margin-bottom: 4px;">
      <el-input v-model="setAccount.pwd" type="password" :placeholder="$t('LoginModule.NormalLogin.password')" @keyup.enter.native="onSubmitSetAccount">
        <i slot="prefix" class="el-input__icon el-icon-self-mima"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="isRemember" style="margin-bottom: 0px;">
      <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.NormalLogin.submitbtn')}}</el-button>
    </el-form-item>
    <slot name="text"></slot>
  </el-form>
</template>

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

export default {
  name: 'NormalLogin',
  componentName: 'NormalLogin',
  props: {
    attr: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    },
    query: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      // rememberMe:
      setAccount: {},
      accountRules: {
        user: [
          { required: true, message: this.$t('LoginModule.NormalLogin.inputAccount'), trigger: 'blur' }
          // { pattern: /^(1[3-9]\d{9}|[\w\.]+@\w+(\.\w+)+)$/, message: '请输入正确格式的手机号/邮箱', trigger: 'change' } // eslint-disable-line
        ],
        pwd: [
          { required: true, message: this.$t('LoginModule.NormalLogin.inputPassword'), trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    // Login.clearCookies({}).then(res => res)
  },
  methods: {
    onSubmitSetAccount () {
      this.$refs.setAccountform.validate((valid) => {
        if (valid) {
          Login.userLogin({
            account: this.setAccount.user,
            password: this.setAccount.pwd,
            type: 1,
            service: window.location.origin,
            RememberMe: this.setAccount.isRemember ? 'true' : 'false'
          }).then(res => {
            if (!res) { return }
            if (res.url) {
              /* 查询上次跳转信息，并跳转回去 */
              if (this.query.rd) {
                window.location.href = res.url + decodeURIComponent(this.query.rd)
              } else {
                window.location.href = res.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')
                    })
                  })
                }
              })
            }
            /* 重置账号、密码 */
            // this.$refs['setAccountform'].resetFields()
          }).catch(e => {
            this.$message({
              type: 'error',
              message: e.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>
