<template>
<div class="content blue" ref="content">
    <div class="header">
        <div class="header_wrap_left">
            <div class="header-user-content" @click="toSelect">
                <div class="header-user-txt">
                    <span class="span1">登录人员：</span>
                    <span class="span2">{{userName}}</span>
                </div>
                <div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
                <div v-show="show" class="dropdown-wrap">
                    <ul class="dropdown-list drift">
                        <li class="dropdown-item" @click="exit">退出</li>
                    </ul>
                    <div class="popper__arrow"></div>
                </div>
            </div>
            <div class="header-user-content set_color_wrap" @click="toSelectColor">
                <div class="header-user-txt">
                    <span class="span1">背景颜色</span>
                    <span class="span2"></span>
                </div>
                <div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
                <div v-show="showColor" class="dropdown-wrap">
                    <ul class="dropdown-list drift">
                        <li class="dropdown-item" @click="switchColor(1)"><div class="color_button overall_orange"></div></li>
                        <li class="dropdown-item" @click="switchColor(2)"><div class="color_button overall_lightgreen"></div></li>
                        <li class="dropdown-item" @click="switchColor(3)"><div class="color_button overall_blue"></div></li>
                    </ul>
                    <div class="popper__arrow"></div>
                </div>
            </div>
        </div>
        <div class="header-time-wrap">
            <div class="header-time">
                <div class="xj_time">{{time}}</div>
                <div class="date_week">
                    <div class="xj_date">{{date}}</div>
                    <div class="xj_week">{{week}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="body-container">
        <div class="tabs_wrap">
            <ul class="tabs">
                <li v-for="i in menus" :key="i.index">
                    <router-link :to="i.router" :class="{'router-link-active': i.router === $route.path}">{{i.label}}</router-link>
                </li>
            </ul>
        </div>
        <div class="main-container">
            <router-view></router-view>
        </div>
    </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
      timer: null,
      time: '',
      date: '',
      week: '',
      show: false,
      showColor: false,
      menus: [
        {
          label: '工单作业',
          router: '/workorderassignment'
        },
        {
          label: '报工查询',
          router: '/workreportquery'
        },
        {
          label: '工单查询',
          router: '/workorderquery'
        }
      ]
    }
  },
  mounted () {
    this.timer = window.setInterval(this.updateTime, 1000)
  },
  methods: {
    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}`
    },
    toSelect () {
      this.show = !this.show
    },
    exit () {
      this.$store.dispatch('delUserInfo')
      this.$router.push('/login')
    },
    toSelectColor () {
      this.showColor = !this.showColor
    },
    switchColor (type) {
      switch (type) {
        case 1:
          this.$refs.content.classList.value = 'content overall_orange'
          break
        case 2:
          this.$refs.content.classList.value = 'content overall_lightgreen'
          break
        case 3:
          this.$refs.content.classList.value = 'content overall_blue'
          break
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin.styl'
.content
    _wh(100%, 100vh)
.header
    height 45px
    _fj()
    padding 0 15px
.header_wrap_left
    height 45px
    _fj(flex-start)
.header-user-content
    position relative
    height 45px
    _fj(flex-start)
    cursor pointer
.set_color_wrap
    margin-left 20px
.header-user-txt
    padding 14.5px 0
    line-height 1
    .span1
        _font(14px, 1, #fff,,)
        vertical-align middle
    .span2
        _font(16px, 1, #fff,,)
        vertical-align middle
.drop-button-wraper
    height 100%
    line-height 45px
    font-size 14px
    color #fff
    margin-left 15px
    vertical-align middle
.dropdown-wrap
    position absolute
    width 100%
    top 39px
    right 0
    z-index 1
    transform-origin center top
    transition transform .3s ease-in-out
    border 1px solid #e4e7ed
    border-radius 4px
    background-color #fff
    box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
    margin 5px 0
.dropdown-list
    padding 0
.dropdown-item
    _font(14px, 34px, #606266,,center)
    padding 0 20px
.popper__arrow
    position absolute
    display block
    width 0
    height 0
    border-color transparent
    border-style solid
    border-width 6px
    filter drop-shadow(0 2px 12px rgba(0,0,0,.03))
    top -6px
    left 50%
    transform translateX(-50%)
    margin-right 3px
    border-top-width 0
    border-bottom-color #ebeef5
.header-time-wrap
    height 45px
.header-time
    height 45px
    _fj(center,flex-end,column)
.xj_time
    _font(14px, 18px, #fff,,right)
.date_week
    _fj()
.xj_date
    _font(12px, 18px, #fff,,)
.xj_week
    _font(12px, 18px, #fff,,)
.body-container
    _wh(calc(100% - 30px), calc(100% - 65px))
    margin 0 auto 20px
    padding 5px
    border 1px solid #484cce
.tabs_wrap
    height 34px
    margin-bottom 10px
.tabs
  height 34px
  li
    float left
    line-height 32px
    text-align center
    padding-right 10px
    a
      display inline-block
      color #fff
      width 100%
      padding 0 10px
      font-size 14px
      border-bottom 1px solid #2aa6f9
    .router-link-active
        background linear-gradient(#0de0ff 0%,#2aa6f9 100%)
        border-top-left-radius 12px
        border-top-right-radius 12px
.main-container
    _wh(100%, calc(100% - 44px))
.color_button
    _wh(30px, 30px)
    border-radius 50%
.set_color_wrap
    .dropdown-wrap
        width 132px
        left 50%
        transform translateX(-50%)
    .dropdown-list
        padding 0 10px
    .dropdown-item
        float left
        padding 10px 0
        &:nth-child(2)
            padding 10px 10px
</style>
