<template>
  <div class="row">
    <div class="hidden-xs-only col-md-5 col-lg-6 col-xl-6">
      <img src="../img/login-left-bg.png" alt="左侧-sofia logo">
    </div>
    <div class="col-12 col-md-7 col-lg-5 col-xl-4">
      <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="手机/邮箱" @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">
          <el-input v-model="setAccount.pwd" type="password" placeholder="密码" @keyup.enter.native="onSubmitSetAccount">
            <i slot="prefix" class="el-input__icon el-icon-self-mima"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
        </el-form-item>
        <div class="text">
          <span class="code-login">
            <template v-if="query.rd">
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/code?rd=' + query.rd }">验证码登录</router-link>
            </template>
            <template v-else>
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'codeLogin' }">验证码登录</router-link>
            </template>
          </span>
          <span class="forget-pwd">
            <template v-if="query.rd">
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/forget?rd=' + query.rd }">忘记密码</router-link>
            </template>
            <template v-else>
              <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'forgetPwd' }">忘记密码</router-link>
            </template>
          </span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { request } from '@actions'

export default {
  props: {
    params: { type: Object, required: false, default: {} },
    query: { type: Object, required: false, default: {} }
  },
  data () {
    return {
      setAccount: {},
      accountRules: {
        'user': [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^(1[3-9]\d{9}|[\w\.]+@\w+(\.\w+)+)$/, message: '请输入正确格式的手机号/邮箱', trigger: 'change' } // eslint-disable-line
        ],
        'pwd': [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmitSetAccount () {
      this.$refs['setAccountform'].validate((valid) => {
        if (valid) {
          request({
            component: this,
            actionName: 'loginAction',
            functionName: 'userLogin',
            data: {
              account: this.setAccount.user,
              password: this.$md5('uokoaduw' + this.setAccount.pwd.split('').reverse().join('') + 'auhgniq')
            },
            thenCallback: res => {
              /* 查询上次跳转信息，并跳转回去 */
              if (this.query.rd) {
                this.$router.push({ path: decodeURIComponent(this.query.rd) })
              } else {
                this.$router.push({ path: '/app/my-learn/course' })
              }
              /* 重置账号、密码 */
              // this.$refs['setAccountform'].resetFields()
            },
            catchCallback: () => {},
            finallyCallback: () => {}
          })
        } else {
          this.$message.error('请根据输入框提示，检查输入项。')
          return false
        }
      })
    }
  }
}
</script>
