<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">
      <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="project_id" style="margin-bottom: 0">
      <!-- <el-radio-group v-model="setAccount.project_id">
        <el-radio :label="1012" style="line-height:1.5">领航数字时代EMBA</el-radio>
        <el-radio :label="1026" style="line-height:1.5">工商管理硕士MBA</el-radio>
      </el-radio-group> -->
      <el-select v-model="setAccount.project_id" placeholder="选择您想报名的项目">
        <el-option label="数字时代领航人才EMBA" :value="1012"></el-option>
        <el-option label="综合管理方向MBA" :value="1026"></el-option>
      </el-select>
    </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: {
        project_id: ''
      },
      accountRules: {
        user: [
          {
            required: true,
            message: '请输入手机号/邮箱',
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        project_id: [{ required: true, message: '请选择项目', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmitSetAccount() {
      this.$refs.setAccountform.validate(valid => {
        if (valid) {
          window.PROJECT_ID = this.setAccount.project_id
          window.localStorage.setItem('projectId', this.setAccount.project_id)
          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%;
}
::v-deep .el-select {
  width: 100%;
}
</style>
