<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="手机号/邮箱"
        @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="密码" @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; text-align: left">
      <el-checkbox v-model="setAccount.isRemember" label="记住我" name="type"></el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="login-btn" @click="onSubmitSetAccount">登录</el-button>
      <el-button type="primary" class="login-btn" @click="regedit">注册</el-button>
    </el-form-item>
    <slot name="text"></slot>
  </el-form>
</template>

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

export default {
  name: 'NormalLogin',
  componentName: 'NormalLogin',
  props: {
    attr: {
      type: Object,
      required: false,
      default() {
        return {}
      }
    },
    query: {
      type: Object,
      required: false,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      setAccount: {},
      accountRules: {
        user: [
          {
            required: true,
            message: '请输入手机号/邮箱',
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    onSubmitSetAccount() {
      this.$refs.setAccountform.validate(valid => {
        if (valid) {
          Login.userLogin({
            password: this.setAccount.pwd,
            account: this.setAccount.user,
            RememberMe: this.setAccount.isRemember ? '1' : '2',
            service: 'https://cu.ezijing.com'
          })
            .then(res => {
              if (res.code !== 0) {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
                return
              }
              this.$router.push({
                name: 'apply'
              })
            })
            .catch(e => {
              this.$message({
                type: 'error',
                message: e.message
              })
            })
        } else {
          this.$message.error('请输入')
          return false
        }
      })
    },
    regedit() {
      this.$router.push({
        name: 'register'
      })
    }
  }
}
</script>

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