<template>
  <div>
    <div class="login">
      <div class="login-box">
        <h3>包头市安全生产三项岗位人员培训考试服务平台</h3>
        <!--          <p>Baotou Unified Identity Verification Platform</p>-->
        <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="/forget" class="back">忘记密码？</router-link>
        </div>
        <button @click="submitLogin">登录</button>
        <div class="info">
          <p>主办：包头市应急管理局</p>
          <p>如有问题，咨询电话: 0472-5222813</p>
        </div>
      </div>
      <div class="bottom-text">Copyright:2012-2020包头市应急管理局 All Rights Reserved建议使用90以上版本浏觉器1024*768以上分辨率</div>
    </div>
    <div class="loading" v-if="isLoading">
      <img src="@/assets/images/loading.gif" alt="">
    </div>
  </div>
</template>

<script>
import url from '@/assets/public/url'
import axios from 'axios'
import md5 from 'js-md5'
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      loginInfo: {
        username: '',
        password: ''
      },
      url: url.loginUrl,
      isLoading: false
    }
  },
  methods: {
    submitLogin: function () {
      var self = this
      if (self.isLoading) {
        return
      }
      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('/')
          }, 1000)
        }).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
  //position fixed
  //top 0
  //right 0
  //left 0
  //bottom 0
  background url("~@/assets/images/login-bg.jpg") no-repeat center
  background-size 100% 100%
  overflow hidden
  .login-box
    width 460px
    height 720px
    padding 80px 40px 180px
    box-sizing border-box
    //position absolute
    //top 50%
    //left 54%
    //margin-top -360px
    background #fff url("~@/assets/images/login-box-bg1.png") no-repeat left bottom
    background-size 100% auto
    margin-top 100px
    margin-bottom 70px
    margin-left 54%
    h3
      font-size 20px
      text-align center
      color #0d1c28
      font-weight normal
      margin-bottom 70px
    p
      font-size 12px
      color #999
      text-align center
      margin-bottom 70px
    input
      width 100%
      height 45px
      border 1px solid #c4c4c4
      padding 0 10px
      box-sizing border-box
      margin-bottom 25px
      font-size 16px
    button
      cursor pointer
      width 100%
      height 45px
      color #fff
      font-size 16px
      background #1561af
      border none
      outline none
      border-radius 3px
    .link
      margin-bottom 25px
      overflow hidden
      a
        font-size 16px
        color #4293f4
        &.register
          float right
        &.back
          float left
    .info
      text-align center
      margin-top 25px
      p
        line-height 20px
        font-size 12px
        margin-bottom 0
        color #999
  .bottom-text
    text-align center
    color #fff
    font-size 14px
    margin-bottom 30px
</style>
