<template>
    <div>
      <div class="login">
        <div class="login-box">
          <h3>正在登录到 包头市统一身份认证平台</h3>
          <input type="text" v-model="loginInfo.username" placeholder="请输入账号">
          <input type="password" v-model="loginInfo.password" placeholder="请输入密码" @keyup.enter="submitLogin">
          <div class="link">
            <router-link to="/register" class="register">立即注册</router-link>
            <router-link to="/" class="back">返回首页</router-link>
          </div>
          <button @click="submitLogin">登录</button>
          <div class="info">
            <p>主办: 包头市人民政府办公厅　　承办: 山西腾狮科技有限公司</p>
            <p>如有问题，咨询电话: 12345</p>
          </div>
        </div>
      </div>
      <div class="loading" v-if="isLoading">
        <img src="@/assets/images/loading.gif" alt="">
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
import url from '@/assets/public/url'
import axios from 'axios'
import md5 from 'js-md5'
import Footer from '@/assets/components/Footer'
export default {
    name: 'Login',
    components: {
      Footer
    },
    data () {
        return {
          loginInfo: {
            username: '',
            password: ''
          },
          url: url.loginUrl,
          isLoading: false
        }
    },
    methods: {
      submitLogin: function () {
        var self = this
        if (self.loginInfo.username && self.loginInfo.password) {
          self.isLoading = true
          var info = {
            username: self.loginInfo.username,
            password: md5(md5(md5(self.loginInfo.password)))
          }
          axios.post(self.url + 'app/sign/default', info).then(function (res) {
            window.sessionStorage.setItem('token', res.data.data)
            self.$layer.msg('登录成功')
            self.isLoading = false
            setTimeout(function () {
              self.$router.push('/')
            }, 1500)
          }).catch(function (error) {
            self.$layer.msg(error.response.data.msg)
            self.isLoading = false
          })
        } else {
          self.$layer.msg('用户名或密码不能为空')
        }
      }
    },
    mounted: function () {}
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
.login
  padding 120px 0
  background url("~@/assets/images/login-bg.jpg") no-repeat center
  background-size 100% 100%
  .login-box
    width 630px
    padding 60px 70px
    box-sizing border-box
    background #fff
    margin 0 auto
    box-shadow 0 0 10px #fff
    h3
      font-size 24px
      text-align center
      color #0d1c28
      margin-bottom 40px
    input
      width 100%
      height 50px
      border 1px solid #c4c4c4
      padding 0 10px
      box-sizing border-box
      margin-bottom 25px
      font-size 16px
    button
      cursor pointer
      width 100%
      height 50px
      color #fff
      font-size 16px
      background #4293f4
      border none
      outline none
    .link
      margin-bottom 25px
      overflow hidden
      a
        font-size 16px
        color #4293f4
        &.register
          float right
        &.back
          float left
    .info
      padding-top 30px
      text-align center
      border-top 1px solid #EEE
      margin-top 25px
      p
        line-height 40px
        font-size 14px
        color #999
</style>
