<template>
  <div class="container-table backgroundtheme">
    <div class="row vertical-10p">
      <div class="container">
        <div class="row">
          <div class="col-sm-7 col-md-7 col-lg-7 row-left">
            <div class="banner"></div>
          </div>
          <div class="col-sm-5 col-md-5 col-lg-5 text-center">
            <div class="content-log">
              <!-- <img src="../../static/img/login.png" class="center-block logo"> -->
              <div class="content-log-div">
                <!-- login form -->
                <form class="ui form loginForm"  @submit.prevent="validateLogin">
                  <h3>NGLS(尼古拉斯)<h5>Next Generation Logistics Solution</h5></h3>
                  <div class="input-group has-icon has-icon-right">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input class="form-control" name="用户名" placeholder="用户名" type="text" v-model="username" maxlength="20"
                    v-validate="'required|alpha_num'" data-vv-delay="500" :class="{'input': true, 'is-danger': errors.has('用户名') }">
                  </div>
                  <p v-show="errors.has('用户名')" class="text-left help is-danger"> <i class="fa fa-warning"></i> {{ errors.first('用户名') }}</p>
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                    <input class="form-control" name="密码" placeholder="密码" type="password" v-model="password" maxlength="16"
                    v-validate="'required|min:6'" :class="{'input': true, 'is-danger': errors.has('密码') }">
                  </div>
                  <p v-show="errors.has('密码')" class="text-left help is-danger"> <i class="fa fa-warning"></i> {{ errors.first('密码') }}</p>
                  <!-- <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-key"></i></span>
                    <input class="form-control" name="验证码" placeholder="验证码" type="text" v-model="regCode" maxlength="4" style="width: 120px"> -->
                    <!--<input class="form-control" name="验证码" placeholder="验证码" type="txt" v-model="regCode" maxlength="4"-->
                           <!--v-validate="'required|min:6'" :class="{'input': true, 'is-danger': errors.has('验证码') }">-->
                  <!-- </div> -->
                  <!--<p v-show="errors.has('验证码')" class="text-left help is-danger"> <i class="fa fa-warning"></i> {{ errors.first('验证码') }}</p>-->
                  <button type="submit" v-bind:class="'btn btn-primary btn-lg btn-block' + loading" :disabled="isTrue">
                    <i v-if="isTrue" class="fa fa-spinner load"></i>
                    登录
                  </button>
              </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import getRouterObj from '@/utils/RouterConvert.js'
  export default {
    name: 'Login',
    data (router) {
      return {
        isTrue: false,
        section: 'Login',
        loading: '',
        username: '',
        password: '',
        response: '',
        regCode: ''
      }
    },
    computed: {
      ...mapState([
        'userInfo',
        'powerMenu',
        'errorMessage'
      ])
    },
    methods: {
      validateLogin () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            this.loginClk()
          }
        }).catch(() => {
          alert('Correct them errors!')
        })
      },
      /**
       * 登录请求
       */
      loginClk () {
        this.$store.dispatch('setLoading', true)
        this.isTrue = true
        this.toggleLoading()
        this.resetResponse()
        this.$store.commit('TOGGLE_LOADING')
        let headers = {}
        headers.userCode = this.username
        headers.password = this.password
        let array = [headers, this, 0]
        /**
         * @params login ‘登录方法’
         * @params array [header,  对象]
         */
        this.$store.dispatch('login', array)
          .then((request) => {
            if (request === 'success') {
              this.$store.dispatch('getPowerTree')
                .then((data) => {
                  this.isTrue = false
                  if (data === 'success') {
                    localStorage.setItem('powerMenu', JSON.stringify(this.powerMenu))
                    /* 动态添加路由 */
                    const route = []
                    /* 根据登录者分配不同的首页 */
                    if (Number(this.userInfo.place) === 135) {
                      route[0] = {
                        path: 'home',
                        component: (resolve) => require(['@/views/Home/Home.vue'], resolve),
                        name: 'Home'
                      }
                    } else if (Number(this.userInfo.place) === 24) {
                      route[0] = {
                        path: 'home',
                        component: (resolve) => require(['@/views/Home/Home.vue'], resolve),
                        name: 'Home'
                      }
                    }
                    /* 目前是默认情况 */
                    // 动态获取路由
                    getRouterObj(route, this.powerMenu)
                    let rout = [{
                      path: '/',
                      component: (resolve) => require(['@/views/Dash.vue'], resolve),
                      children: route
                    }]
                    this.$router.addRoutes(rout.concat(
                      {
                        path: '*',
                        component: (resolve) => require(['@/views/404.vue'], resolve),
                        name: '404'
                      }
                    ))
                    this.$router.push('/home')
                  } else if (data === '401') {
                    this.$notify.error({title: '会话失效', message: '请重新登录'})
                  }
                })
                .catch((err) => {
                  this.isTrue = false
                  this.$notify.error({title: '菜单列表反问失败', message: err})
                  console.error(err)
                })
            }
          })
          .catch((err) => {
            this.isTrue = false
            this.$notify.error({title: '登录失败', message: err})
            console.error(err)
          })
      },
      toggleLoading () {
        this.loading = (this.loading === '') ? 'loading' : ''
      },
      resetResponse () {
        this.response = ''
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  h3 {
    margin: 0 0 15px 0;
    color: #000;
    font-size: 1.6em;
    font-weight: 700;
  }
  .is-danger {
    color: #FF4949;
    padding-bottom: 10px;
  }
  .container-table {
    width: 100%;
    position: relative;
    height: 100vh;
    z-index: 1200;
  }
  .container-table {
    display: table;
    color: white;
    background: url(../../static/img/bg.jpg) no-repeat;
    background-size: 100% 100%;
  }
  .row {
    height: calc(100vh - 150px);
  }
  .row > div {
    height: 100%;
  }
  .banner{
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../../static/img/bg-banner.png) 50% 0 no-repeat;
    background-size: contain;
  }
  .content-log {
    display: inline-block;
    width: 330px;
    height: 100%;
  }
  .content-log-div{
    text-align: center;
    padding:40px;
    background: #8fd2c0;
    border-radius: 4px;
    box-shadow: 0 0 2px #3c5a52;
  }
  .vertical-10p {
    padding-top: 9%;
  }
  .logo {
    margin-top: 14px;
    width: 16em;
    padding: 1.5em;
  }
  .loginForm {
    .input-group {
      padding-bottom: 1em;
      height: 4em;
      input {
        height: 2.7em;
        border: 1px solid #989898;
      }
    }
  }
  .load {
    transition: transform 1s;
    animation: rotate 5s linear infinite;
  }
  @-webkit-keyframes rotate {
    from{
      -webkit-transform: rotate(0deg);
    }
    to{
      -webkit-transform: rotate(360deg);
    }
  }
  @-moz-keyframes rotate {
    form {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
    }
  }
  @-o-keyframes rotate {
    form {
      -o-transform: rotate(0deg);
    }
    to {
      -o-transform: rotate(360deg);
    }
  }
  @keyframes rotate {
    form {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @media screen and (min-width: 972px) and (max-width: 1199px) {
    .container{
      margin: 0;
    }
    .row{
      margin-left: 3%;
    }
  }
  @media screen and (min-width: 769px) and (max-width: 971px) {
    .container{
      margin: 0;
    }
    .row{
      margin-left: 3%;
    }
  }
  @media only screen and (min-width: 480px) and (max-width: 768px){
    .container{
      margin: 0;
    }
    .row-left {
      display: none;
    }
    .text-center {
      margin-left: -34%;
    }
  }
</style>
