<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">
            <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'codeLogin' }">验证码登录</router-link>
          </span>
          <span class="forget-pwd">
            <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'forgetPwd' }">忘记密码</router-link>
          </span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        setAccount: {},
        accountRules: {
          'user': [
            { required: true, message: '请输入账号', trigger: 'change' },
            { pattern: /^(1[3-9]\d{9}|\w+@\w+(\.\w+)+)$/, message: '请输入正确格式的手机号/邮箱', trigger: 'change' }
          ],
          'pwd': [
            { required: true, message: '请输入密码', trigger: 'change' }
          ]
        }
      }
    },
    beforeMount () {
    },
    methods: {
      onSubmitSetAccount () {
        this.$refs['setAccountform'].validate((valid) => {
          if (valid) {
            if (this.setAccount.user === 'admin@qq.com' && this.setAccount.pwd === '123456') {
              /* 跳转 */
              this.$router.push({ path: '/app/my-learn/course' })
            } else {
              this.$message.error('用户名或密码错误')
            }
            /* 重置密码 */
            this.$refs['setAccountform'].resetFields()
          } else {
            this.$message.error('请检查输入项，确认无误后，重新提交')
            return false
          }
        })
      }
    }
  }
</script>
