<template>
  <div>
    <div class="login_wrap">
      <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">
              <div class="label">用户名</div>
              <input type="text" v-model="loginname" class="inputStyle">
              <div v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></div>
            </div>
            <div class="inputOuter">
              <div class="label">密码</div>
              <input type="password" v-model="password" class="inputStyle">
              <div v-show="closeIcon2" class="iconfont close_icon" @click="clearData(2)"></div>
            </div>
            <div class="inputOuter"></div>
          </div>
          <div class="submit">
            <div class="btn-wrap">
              <button class="btn" @click="_login" :disabled="disabled">手工登录</button>
            </div>
            <div class="btn-wrap">
              <button class="btn" @click="_scan">扫码登录</button>
            </div>
          </div>
        </div>
        <div v-show="scanShow" class="login_card fl">
          <div class="card_wrap">
            <div class="inputOuter">
              <div class="label">用户名</div>
              <input type="password" ref="lname" v-model="qrcode" class="inputStyle" @keyup.enter="scanInput"  :disabled="disabled">
            </div>
            <div class="inputOuter"></div>
            <div class="inputOuter"></div>
          </div>
          <div class="submit">
            <div class="btn-wrap">
              <button class="btn" @click="_login2">手工登录</button>
            </div>
            <div class="btn-wrap">
              <button class="btn" @click="_scan">重新扫码</button>
            </div>
          </div>
        </div>
        <div class="login_card fl" ref="config">
          <div class="card_wrap">
            <div class="inputOuter">
              <div class="label label1">域名地址</div>
              <input type="text" class="inputStyle inputStyle1" v-model="baseUrl">
              <div v-show="closeIcon3" class="iconfont close_icon" @click="clearData(3)"></div>
            </div>
            <div class="inputOuter">
              <div class="label label1">图片域名地址</div>
              <input type="text" class="inputStyle inputStyle1" v-model="imgBaseUrl">
              <div v-show="closeIcon4" class="iconfont close_icon" @click="clearData(4)"></div>
            </div>
            <div class="inputOuter">
              <div class="label label1">锁屏时间(分钟)</div>
              <div class="select select1">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="submit">
            <button class="btn" @click="_config">配&nbsp;&nbsp;置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {handLogin} from './../config/getData2.js'
import {encrypt} from './../main.js'
export default {
  name: 'Login',
  data () {
    return {
      loginname: '',
      password: '',
      baseUrl: this.$store.getters.baseUrl,
      imgBaseUrl: this.$store.getters.imgBaseUrl,
      drift: 0,
      disabled: false,
      scanShow: false,
      qrcode: '',
      logintype: '',
      options: [{value: 0, label: '0（不锁屏）'}, {value: 1, label: '1'}, {value: 3, label: '3'}, {value: 5, label: '5'}, {value: 10, label: '10'}, {value: 15, label: '15'}, {value: 30, label: '30'}, {value: 60, label: '60'}],
      value: Number(this.$store.getters.lockTime)
    }
  },
  computed: {
    closeIcon1 () {
      return this.loginname !== ''
    },
    closeIcon2 () {
      return this.password !== ''
    },
    closeIcon3 () {
      return this.baseUrl !== ''
    },
    closeIcon4 () {
      return this.imgBaseUrl !== ''
    }
  },
  methods: {
    _tabChange (num) {
      this.drift = num
      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.value
      }
      this.$store.dispatch('setConfig', obj)
      this._tabChange(0)
    },
    async loginApi () {
      try {
        let res = await handLogin(this.loginname, encrypt(this.password))
        this.$store.dispatch('setUserInfo', JSON.stringify(res.user.user))
        this.$store.dispatch('saveToken', res.token)
        this.$router.push('/home')
        this.disabled = false
      } catch (e) {
        this.disabled = false
      }
    },
    _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.qrcode = ''
      this.$nextTick(() => {
        this.$refs.lname.focus()
      })
    },
    scanInput () {
      this.logintype = '02'
      this.loginApi()
    },
    _login2 () {
      this.scanShow = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.login_wrap
  position absolute
  left 50%
  top 50%
  // min-width 369px
  width 60%
  height 3.3rem
  transform translate3d(-50%, -50%, 0)
  background-color rgba(255, 255, 255, 0.8)
  border-radius 5px
  z-index 1
  overflow-x hidden
.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-x hidden
.login_card
  width 50%
  height auto
  padding .3rem .3rem
.card_wrap
  width 100%
  // overflow hidden
.inputOuter
  position relative
  width 100%
  height .4rem
  margin-bottom .2rem
  clear both
.label
  float left
  width .7rem
  font-size .16rem
  line-height .4rem
  color #333
  text-align justify
  text-align-last justify
label::after
  display inline-block
  content ''
  width 100%
  height 0
  visibility hidden
.inputStyle, .select
  float right
  width calc(100% - .9rem)
  font-size .16rem
  line-height .4rem
  height .4rem
  color #606266
  text-indent .1rem
  border 1px solid rgba(0, 0, 0, .2)
  box-sizing border-box
select
  appearance auto
  outline none
.label1
  width 1.1rem
.inputStyle1
  width calc(100% - 1.2rem)
.select1
  width calc(100% - 1.2rem)
  background-color #fff
  text-indent 0
.submit
  width 100%
  height .4rem
  clear both
.btn-wrap
  float left
  width 50%
  height .4rem
.btn
  display block
  background-color #2778f3
  font-size .16rem
  line-height .4rem
  color #fff
  padding 0 .1rem
  margin 0 auto
  border-radius 5px
.drift
  transition left .3s linear
>>>.el-select
  width 100%
>>>.el-input__inner
  height .4rem
  line-height .4rem
  border none
  padding 0 .1rem
  font-size .16rem
>>>.el-select-dropdown__item span
  color #606266
</style>
