<template>
  <section>
    <section class="content">
      <p class="p1">欢迎来到</p>
      <p class="p2">中德自控立体仓库手持系统！</p>
      <div class="input-box">
        <input type="text" class="allwidth" placeholder="请输入用户名" v-model="loginname">
      </div>
      <div class="fxrow input-box">
        <input class="fxcol" :type="type" placeholder="请输入密码" v-model="password">
        <i class="icon-eye" :class="type === 'password' ? 'icon-eye-close' : 'icon-eye-open'" @click="changeType"></i>
      </div>
      <div class="fxrow check-box">
        <i class="icon-name-check" :class="{'icon-name-checked': memberName}" @click="Remember"></i>
        <span class="fxcol">记住用户名</span>
      </div>
      <button class="login-btn" :disabled="disabled" @click="_Login">确认登录</button>
    </section>
  </section>
</template>

<script>
import {rfLogin} from '@config/getData2'
// import {rfLogin} from '@config/mork2'
export default {
  name: 'Login',
  data () {
    return {
      loginname: '',
      password: '',
      type: 'password',
      memberName: false,
      disabled: false
    }
  },
  created () {
    if (this.$store.getters.userInfo !== '') {
      this.loginname = JSON.parse(this.$store.getters.userInfo).loginname
      this.memberName = this.loginname !== ''
    }
  },
  mounted () {
    document.getElementsByTagName('body')[0].className = 'login-bg'
  },
  methods: {
    changeType () {
      this.type = this.type === 'password' ? 'text' : 'password'
    },
    Remember () {
      this.memberName = !this.memberName
    },
    async rfLogin () {
      try {
        let res = await rfLogin(this.loginname, this.password)
        if (res.ErrNO === '1') {
          let obj = {}
          if (this.memberName) {
            obj = Object.assign({}, {UserName: res.UserName, UserPID: res.UserPID, loginname: this.loginname})
          } else {
            obj = Object.assign({}, {UserName: res.UserName, UserPID: res.UserPID, loginname: ''})
          }
          this.$store.dispatch('setUserInfo', JSON.stringify(obj))
          this.$router.push('/home')
        } else {
          this.Dialog(res.ErrMsg)
        }
        this.disabled = false
      } catch (err) {
        this.disabled = false
      }
    },
    _Login () {
      this.disabled = true
      if (this.loginname === '') {
        this.toast('用户名不能为空')
        this.disabled = false
        return
      }
      if (this.password === '') {
        this.toast('密码不能为空')
        this.disabled = false
        return
      }
      this.logintype = '01'
      this.rfLogin()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.p1
  _font(.6rem,1,#444)
  padding-top: 0.9rem
.p2
  _font(.5rem,1,#444)
  padding: 0.4rem 0 0.25rem
.input-box
  margin-top .68rem
  border-bottom 1px solid #e2e2e2
  input
    _font(.32rem,.74rem,#999)
    padding-left .1rem
.icon-eye
  flex 0 0 .35rem
  height .74rem
.icon-eye-close
  _bis('../../images/eyeclose.png',.35rem)
.icon-eye-open
  _bis('../../images/eyeopen.png',.35rem)
.check-box
  margin .25rem 0 .7rem
  height .34rem
  _font(.26rem,.34rem,#999)
.icon-name-check
  flex 0 0 .26rem
  height .26rem
  margin-right 6px
  border 1px solid #e2e2e2
  border-radius 50%
.icon-name-checked
  border none
  _bis('../../images/select.png',.26rem)
.login-btn
  width 100%
  border-radius .46rem
  _font(.36rem,.92rem,#fff,,center)
  background-color $red
.login-ewm
  margin 1.2rem auto .2rem
  _wh(.82rem,.82rem)
  border 1px solid #e74f1a
  border-radius 50%
  _bis('../../images/ewm.png',58%)
.login-ewm-p
  _font(.26rem,1,$red,,center)
</style>
