<template>
  <div class="zbox relative body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
    <div class="absolute login-header">
      <div class="zbox relative login_logo"></div>
    </div>
    <div class="absolute login-bottom"></div>
    <el-row type="flex" class="zbox" justify="center" align="middle">
      <el-col :span="12">
        <div class="login-wraper">
          <el-row type="flex" class="navs-wraper" justify="start" align="start">
            <button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">{{ $t('login.passwordlogin') }}</button>
            <button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">{{ $t('login.configuration') }}</button>
          </el-row>
          <div v-show="tab === 0" class="login-content_wraper">
            <el-row type="flex" class="login-item" justify="space-between">
              <el-col :span="5" class="login-label" @click="toFocus(1)">{{ $t('common.username') }}</el-col>
              <el-col :span="19">
                <keyboard-input
                inputClass="login-input"
                keyboardClass="username"
                :value="username"
                @inputChange="inputChange"
                @inputFocus="inputFocus"
              ></keyboard-input>
              </el-col>
            </el-row>
            <el-row class="login-item">
              <el-col :span="5" class="login-label" @click="toFocus(2)">{{ $t('login.password') }}</el-col>
              <el-col :span="19">
                <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
              </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: .3rem">
              <el-col :span="8">
                <button class="button_control" :disabled="disabled" @click="saveLogin"><p>{{ $t('login.login') }}</p></button>
              </el-col>
            </el-row>
          </div>
          <div v-show="tab === 1" class="login-content_wraper">
            <el-row class="login-item">
              <el-col :span="8" class="login-label" @click="toFocus(3)">{{ $t('login.domainnameaddress') }}</el-col>
              <el-col :span="16">
                <input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal" data-next="1">
              </el-col>
            </el-row>
            <el-row class="login-item">
              <el-col  :span="8" class="login-label" @click="toFocus(4)">{{ $t('login.refreshtime') }}</el-col>
              <el-col  :span="16">
                <input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
              </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: .3rem">
              <el-col :span="8">
                <button class="button_control" @click="saveSetup"><p>{{ $t('login.configuration') }}</p></button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
  </div>
</template>

<script>
import KeyboardInput from '@components/keyboard-input'
import {authlogin} from '@config/getData2.js'
import {encrypt} from '../../../main.js'
export default {
  components: {
    KeyboardInput
  },
  data () {
    return {
      tab: 0,
      username: this.$store.getters.defaultUsername,
      password: this.$store.getters.defaultPassword,
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      disabled: false,
      visible: false,
      layout: 'normal',
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      }
    }
  },
  mounted () {
    // 点对点项目分辨率 1024 * 768
    // alert(document.body.clientWidth, 'a')
    // alert(document.body.clientHeight, 'b')
    // alert(window.screen.width, 'c')
    // alert(window.screen.height, 'd')
  },
  methods: {
    toFocus (i) {
      switch (i) {
        case 1:
          this.$refs.input1.focus()
          break
        case 2:
          this.$refs.input2.focus()
          break
        case 3:
          this.$refs.input3.focus()
          break
        case 4:
          this.$refs.input4.focus()
          break
      }
    },
    toSetup () {
      this.tab = 1
      this.hide()
    },
    toLogin () {
      this.tab = 0
      this.hide()
    },
    saveSetup () {
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000
      }
      this.$store.dispatch('setConfig', obj)
      this.toLogin()
    },
    saveLogin () {
      this.disabled = true
      if (!this.username) {
        // this.toast('请输入用户名')
        this.toast(this.$t('login.toast1'))
        this.disabled = false
        return
      }
      if (!this.password) {
        // this.toast('请输入密码')
        this.toast(this.$t('login.toast2'))
        this.disabled = false
        return
      }
      this._authlogin()
    },
    async _authlogin () {
      try {
        let res = await authlogin(this.username, encrypt(this.password))
        if (res.code === '1') {
          let obj = {}
          obj = Object.assign({}, res.result)
          this.$store.dispatch('userInfo', JSON.stringify(obj))
          this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
          this.hide()
          if (!res.result.user.user.isAdmin) {
            this.$router.push('/mini/home')
          } else {
            this.$router.push('/index/home')
          }
        } else {
          this.Dialog(res.desc)
        }
        this.disabled = false
      } catch (err) {
        this.disabled = false
        // this.toast(err)
        const loading = this.$loading({
          lock: true,
          text: this.$t('common.loading'),
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        setTimeout(() => {
          loading.close()
        }, 4000)
      }
    },
    show (e) {
      // 关闭中文keyboard
      let arr = document.querySelectorAll('.hg-theme-default')
      arr.forEach((ele) => {
        ele.style.visibility = 'hidden'
      })
      this.input = e.target
      this.layout = e.target.dataset.layout
      if (!this.visible) {
        this.visible = true
      }
    },
    hide () {
      this.visible = false
    },
    accept () {
      this.hide()
    },
    next () {
      let inputs = document.querySelectorAll('input')
      let found = false;
      [].forEach.call(inputs, (item, i) => {
        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
          found = true
          this.$nextTick(() => {
            inputs[i + 1].focus()
          })
        }
      })
      if (!found) {
        this.input.blur()
        this.hide()
      }
    },
    inputChange (val) {
      this.username = val
    },
    inputFocus () {
      this.visible = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.login-header
  top 0
  _wh(100%, 10vh)
  background center / 92% 100% url(../../../images/new/login_header_bg.png) no-repeat
.login_logo
  top -14%
  background center / 33% auto url(../../../images/new/logo.png) no-repeat
.login-bottom
  bottom 0
  left 25%
  _wh(50%, 1.75rem)
  background center / 9rem 100% url(../../../images/new/login_dy.png) no-repeat
.login-wraper
  padding 8% 8.8% 6% 8%
  background center / 100% 100% url(../../../images/new/login_w_bg.png) no-repeat
.navs-wraper
  height 0.5rem
  background center / 100% 100% url(../../../images/new/login_nav_bg.png) no-repeat
  padding-left 2%
.nav_item
  _wh(32%, 64%)
  padding-left 9%
  _font(.18rem, 1, #99B1DD,,)
  font-family 'YouSheBiaoTiHei'
  background-color transparent
  &:first-child
    background center / 100% 100% url(../../../images/new/login_tab.png) no-repeat
.nav_item_active
  color #fff
.login-content_wraper
  padding 5% 5% 5%
.login-item
  margin-bottom .15rem
.login-label
  _font(.16rem, .4rem, #AFBED8,,)
.login-input
  width 100%
  _font(.15rem, .4rem, #fff,,)
  background rgba(45,88,184,0.1)
  border 2px solid #4980BD
  padding 0 .1rem
  &:focus
    background rgba(45,88,184,0.25);
    border-color #21D0F2
</style>
