<template>
  <div class="zd-row jccenter contianer">
    <div class="header-wrap"><h1>ACS</h1></div>
    <div class="setup-wrap">
      <div class="zd-row filter-item">
        <div class="zd-col-6 filter-label">域名地址</div>
        <input type="text" class="zd-col-18 filter-value" v-model="baseUrl">
      </div>
      <div class="zd-row filter-item">
        <div class="zd-col-6 filter-label">刷新时间(秒)</div>
        <input type="number" class="zd-col-18 filter-value" v-model="setTime">
      </div>
      <div class="zd-row jccenter button-wrap">
        <button class="button btn-primary" @click="_config">配置</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'setup',
  data () {
    return {
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000
    }
  },
  methods: {
    _viewport () {
      this.viewportWidth = window.screen.width
      this.viewportHeight = window.screen.height
    },
    _config () {
      if (this.setTime < 0) {
        this.$message({
          message: '刷新时间设置过短',
          type: 'warning'
        })
        return
      }
      if (this.setTime > 10800) {
        this.$message({
          message: '刷新时间设置过长',
          type: 'warning'
        })
        return
      }
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000
      }
      this.$store.dispatch('setConfig', obj)
      this.$router.push('/index')
      let element = document.documentElement
      if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
    }
  }
}
</script>
