<template>
  <div class="inner-wrap">
    <div class="top_header">
      <header>
        <div class="top-left" @click="getInfo">
          <div class="fl header-title header-name">登录人员： {{this.$store.getters.userName}}</div>
          <button class="fl iconfont dropdown_icon"></button>
          <ul class="fl drift" :style="{'height': drift+'rem'}">
            <li>部门: {{this.$store.getters.role}}</li>
            <li @click="exit">退出</li>
          </ul>
        </div>
        <div class="fr date-box">{{date}}&nbsp;{{week}}&nbsp;{{time}}</div>
      </header>
    </div>
    <div class="menu">
      <ul>
        <!-- <li @click="toOperation('workinstruct')">指令查询</li> -->
        <li @click="toSure('kxinit')">空箱初始化</li>
        <li @click="toSure('inscanerror')">入箱扫码异常</li>
        <li @click="toSure('outscanerror')">出箱扫码异常</li>
        <li @click="toSure('hcxcheck')">缓存线盘点</li>
        <li @click="toSure('agvinerror')">AGV入箱异常</li>
        <li @click="toSure('agvouterror')">AGV出箱异常</li>
        <li @click="toSure('hcxouterror')">缓存线出箱异常</li>
        <li @click="toSure('zloperate')">指令操作</li>
        <li @click="toSure('hcxerrorhandle')">缓存线异常处理</li>
        <!-- <li @click="toTest()">测试页</li> -->
      </ul>
    </div>
    <!-- <ul class="home-items">
      <li><img src="../images/devicetest.png" alt=""><p>设备巡检</p></li>
      <li><img src="../images/qualitytest.png" alt=""><p>质量巡检</p></li>
      <li @click="toOperation('workinstruct')"><img src="../images/workadjust.png" alt=""><p>指令查询</p></li>
      <li><img src="../images/devicetest.png" alt=""><p>缓存线1</p></li>
    </ul> -->
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      timer: null,
      time: '',
      date: '',
      week: '',
      drift: 0
    }
  },
  mounted () {
    this.timer = window.setInterval(this.updateTime, 1000)
  },
  methods: {
    toTest () {
      window.location.href = 'http://192.168.0.100:8083/#/home'
    },
    updateTime () {
      let cd = new Date()
      let year = cd.getFullYear()
      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let myddy = new Date().getDay()
      let week = weekday[myddy]
      this.time = `${hh}:${mm}:${ss}`
      this.date = `${year}年${month}月${date}日`
      this.week = `${week}`
    },
    getInfo () {
      console.log('1')
      this.drift = this.drift === 0 ? 0.73 : 0
    },
    exit () {
      this.$store.dispatch('setSignOut')
      this.$router.push('/login')
    },
    toOperation (n) {
      this.$router.push(n)
    },
    toSure (a) {
      this.$router.push(a)
    }
  }
}
</script>

<style lang="stylus" scoped>
.header-title, .date-box,ul li
  color #ffffff
.menu
  display flex
  font-size .26rem
  text-align center
  justify-content center
  align-items center
  height 100%
  // height calc(100% - 0.44rem);
  ul
    width 6.8rem
    box-sizing border-box
    // margin 0 auto
    li
      color #D75930
      width 1.6rem
      float left
      font-size 0.18rem
      margin 0.15rem 0.05rem
      line-height 0.3rem
      padding 0.1rem
      border 1px solid #D75930
      border-radius 5px
</style>
