<template>
  <div>
    <div class="login_wrap" :class="heightLimit">
      <div class="login_tab">
        <div class="login_tab_line drift" :style="{'left': drift+'%'}"></div>
        <div class="login_tab_item" @click="_tabChange(0)">登录</div>
        <div class="login_tab_item" @click="_tabChange(50)">配置</div>
      </div>
      <div class="login_cnt clearfix drift" :style="{'left': '-'+drift*2+'%'}">
        <div v-show="!scanShow" class="login_card fl">
          <div class="card_wrap">
            <div class="inputOuter">
              <label>用户名</label>
              <input type="text" v-model="loginname" class="inputStyle">
              <i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
            </div>
            <div class="inputOuter">
              <label>密码</label>
              <input type="password" v-model="password" class="inputStyle">
              <i v-show="closeIcon2" class="iconfont close_icon" @click="clearData(2)"></i>
            </div>
          </div>
          <div class="submit">
            <button class="btn" @click="_login" :disabled="disabled">手工登录</button>
            <button class="fr btn" @click="_scan">扫码登录</button>
          </div>
        </div>
        <div v-show="scanShow" class="login_card fl">
          <div class="card_wrap">
            <div class="inputOuter">
              <label>用户名</label>
              <input type="password" ref="lname" v-model="qrcode" class="inputStyle" @keyup.enter="scanInput"  :disabled="disabled">
            </div>
          </div>
          <div class="submit">
            <button class="fl btn" @click="_login2">手工登录</button>
            <button class="fr btn" @click="_scan">重新扫码</button>
          </div>
        </div>
        <div class="login_card fl" ref="config">
          <div class="card_wrap">
            <div class="inputOuter">
              <label>域名地址</label>
              <input type="text" class="inputStyle" v-model="baseUrl">
              <i v-show="closeIcon3" class="iconfont close_icon" @click="clearData(3)"></i>
            </div>
            <div class="inputOuter">
              <label>图片域名地址</label>
              <input type="text" class="inputStyle" v-model="imgBaseUrl">
              <i v-show="closeIcon4" class="iconfont close_icon" @click="clearData(4)"></i>
            </div>
            <!-- <div class="inputOuter">
              <label>锁屏时间(分钟)</label>
              <input type="text" class="inputStyle" v-model="lockTime">
            </div> -->
            <div class="inputOuter">
              <label>锁屏时间(分钟)</label>
              <select name="equipment" v-model="lockTime">
                <option :value="e.id" v-for="e in lockTimeArr" :key="e.id">{{e.name}}</option>
              </select>
            </div>
          </div>
          <div class="submit">
            <button class="btn" @click="_config">配&nbsp;&nbsp;置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginname: '',
      password: '',
      lockTimeArr: [{id: 0, name: '0(不锁屏)'}, {id: 1, name: '1'}, {id: 3, name: '3'}, {id: 5, name: '5'}, {id: 10, name: '10'}, {id: 15, name: '15'}, {id: 30, name: '30'}, {id: 60, name: '60'}],
      lockTime: Number(this.$store.getters.lockTime),
      baseUrl: this.$store.getters.baseUrl,
      imgBaseUrl: this.$store.getters.imgBaseUrl,
      drift: 0,
      heightLimit: 'heightLimit2',
      disabled: false,
      scanShow: false,
      qrcode: '',
      logintype: ''
    }
  },
  computed: {
    closeIcon1 () {
      return this.loginname !== ''
    },
    closeIcon2 () {
      return this.password !== ''
    },
    closeIcon3 () {
      return this.baseUrl !== ''
    },
    closeIcon4 () {
      return this.imgBaseUrl !== ''
    }
  },
  methods: {
    _tabChange (num) {
      this.drift = num
      this.heightLimit = num === 0 ? 'heightLimit2' : 'heightLimit3'
      this.scanShow = false
    },
    clearData (e) {
      switch (e) {
        case 1:
          this.loginname = ''
          break
        case 2:
          this.password = ''
          break
        case 3:
          this.baseUrl = ''
          break
        case 4:
          this.imgBaseUrl = ''
          break
      }
    },
    _config () {
      let obj = {
        baseUrl: this.baseUrl,
        imgBaseUrl: this.imgBaseUrl,
        lockTime: this.lockTime
      }
      this.$store.dispatch('setConfig', obj)
      this._tabChange(0)
    },
    loginApi () {
      let data = {
        '_SRVNAME': 'server.app.screenAPI',
        '_SRVMETHOD': 'verifyAccount',
        '_DATA': JSON.stringify({
          form: {
            logintype: this.logintype,
            loginname: this.loginname,
            password: this.password,
            qrcode: this.qrcode
          }
        })
      }
      this
        .$post(data)
        .then(res => {
          if (res.code === '1') {
            this.$store.dispatch('setUserInfo', res.result)
            this.$router.push('/home')
          } else {
            this.Dialog(res.desc)
          }
          this.disabled = false
        })
        .catch(error => {
          this.disabled = false
          console.log(error)
        })
    },
    _login () {
      this.disabled = true
      this.logintype = '01'
      if (this.loginname === '') {
        this.toast('用户名不能为空')
        this.disabled = false
        return
      }
      if (this.password === '') {
        this.toast('密码不能为空')
        this.disabled = false
        return
      }
      this.loginApi()
    },
    _scan () {
      this.scanShow = true
      this.heightLimit = 'heightLimit1'
      this.qrcode = ''
      this.$nextTick(() => {
        this.$refs.lname.focus()
      })
    },
    scanInput () {
      this.logintype = '02'
      this.loginApi()
    },
    _login2 () {
      this.scanShow = false
      this.heightLimit = 'heightLimit2'
    }
  }
}
</script>

<style lang="stylus" scoped>
.login_wrap
  position fixed
  left 50%
  top 50%
  min-width 369px
  width 50%
  transform translate3d(-50%, -50%, 0)
  background-color rgba(255, 255, 255, 0.8)
  border-radius 5px
  overflow hidden
.heightLimit1
  height 2.4rem
.heightLimit2
  height 3.3rem
.heightLimit3
  height 4.2rem
.login_tab
  position relative
  height .5rem
  font-size 0
  background-color rgba(255, 255, 255, 0.9)
  border-radius 5px 5px 0 0
.login_tab_item
  float left
  width 50%
  font-size .16rem
  line-height .5rem
  color #333333
  text-align center
  cursor pointer
.login_tab_line
  position absolute
  width 50%
  height 2px
  background-color #2778f3
  left 0
  bottom 0
.login_cnt
  position relative
  width 200%
  overflow hidden
.login_card
  width 50%
  padding .3rem .5rem
.card_wrap
  overflow hidden
.inputOuter
  width 100%
  margin-bottom .2rem
label
  display block
  font-size .16rem
  line-height .3rem
  color #333
.inputStyle, select
  width 100%
  font-size .16rem
  line-height .4rem
  height .4rem
  color #999
  text-indent .1rem
  border 1px solid rgba(0, 0, 0, .2)
  box-sizing border-box
select
  appearance auto
  outline none
.submit
  width 100%
  text-align center
.btn
  background-color #2778f3
  font-size .16rem
  line-height .4rem
  color #fff
  width .9rem
  margin 0 .3rem
  border-radius 5px
.drift
  transition left .3s linear
</style>
