<template>
  <div class="layout">
    <h2 class="title">四维时代 · 管理后台</h2>
    <div class="login" :style="{backgroundImage: 'url('+bg+')'}">
      <div class="content">
        <div class="text">
          <img src="@/assets/images/logo.png" alt="">
          <h1>致力于<br>让数字化飞入寻常百姓家</h1>
          <h2>让人工智能真正服务于生活</h2>
        </div>
        <el-form class="from" v-loading="loadding">
          <h3>代理登录</h3>
          <el-form-item>
            <el-input v-model="name" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="password" type="password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox-group v-model="remember">
              <el-checkbox label="记住密码（在公共场所电脑请勿勾选）" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button class="button" @click="onSubmit">登陆</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <p>TEL: 4006698025  |  FAX: 0756-6996790  |  E-Mail:sales@4dage.com</p>
      <p>粤ICP备14078495号-3</p>
      <p>Copyright2018 Sitename. Design by 4Dage Technology Co.Ltd.</p>
    </div>
  </div>
</template>

<script>
import cookie from '@/util/cookie'
import bg from '@/assets/images/bg.jpg'

export default {
  name: 'login',
  data () {
    return {
      loadding: false,
      name: '',
      password: '',
      remember: false,
      bg
    }
  },
  methods: {
    async onSubmit () {
      if (this.name.trim().length < 4) {
        return this.$error('用户名格式不正确！')
      } else if (this.password.length < 4) {
        return this.$error('密码格式不正确！')
      }
      this.loadding = true

      try {
        await this.$http.post('/user/sign', {
          name: this.name,
          password: this.password
        })

        sessionStorage.setItem('name', this.name)
        this.$router.push({name: 'home'})
        if (this.remember) {
          cookie.setCookie('name', this.name)
          cookie.setCookie('password', this.password)
        } else {
          cookie.setCookie('name', '')
          cookie.setCookie('password', '')
        }
      } catch (e) {
        this.$error(e.msg)
      }

      this.loadding = false
    }
  },
  created () {
    this.name = cookie.getCookie('name')
    this.password = cookie.getCookie('password')
    this.remember = !!this.name
  }
}
</script>

<style scoped>
  @import './index.css'
</style>
