<template>
  <div :class="'dashboard-container' ">
    <div :class="'scoped-count'">
      <dv-border-box-10>
          <div class="sc-user">
            <dv-decoration-12 style="width:150px;height:150px;display: block;margin: 0 auto;" />
            <dv-decoration-3 style="width:300px;height:30px;display: inline-block; overflow: hidden;" />
            <div class="t">{{timeTips}}{{sysUser.nickname}}</div>
            <div class="t">{{curTime}}</div>
          </div>
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import { comGetTime } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  components: {
  },
  data () {
    return {
      timeTips: '',
      numObj: {},
      isFull: false,
      timer: null,
      curTime: '',
      curData: {},
      isAdmin: 2,
    }
  },
  created () {
    const fpUser = window.sessionStorage.getItem('fp_user') ? JSON.parse(window.sessionStorage.getItem('fp_user')) : {}
    let isAdmin = 2
    if (fpUser.username === 'admin') isAdmin = 1
    this.isAdmin = isAdmin
    this.getData(isAdmin)
    if (fpUser.username === 'daping') {
      window.setInterval(() => {
        this.getData(isAdmin)
      }, 1000 * 60 * 60)
    }
  },
  computed: {
    ...mapGetters([
      'sysUser',
    ])
  },
  methods: {
    getTime () {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month > 9 ? month : '0' + month
      let day = date.getDate()
      day = day > 9 ? day : '0' + day
      let hour = date.getHours()
      hour = hour > 9 ? hour : '0' + hour
      let min = date.getMinutes()
      min = min > 9 ? min : '0' + min
      let second = date.getSeconds()
      second = second > 9 ? second : '0' + second
      return `${year}-${month}-${day} ${hour}:${min}:${second}`
    },
    getData (isAdmin) {
      this.timer = null
      this.timer = window.setInterval(() => {
        this.curTime = this.getTime()
      }, 1000)
      let now = new Date()
      let hour = now.getHours()
      if(hour < 6){this.timeTips = '凌晨好！'}
      else if (hour < 9){this.timeTips = '早上好！'}
      else if (hour < 12){this.timeTips = '上午好！'}
      else if (hour < 14){this.timeTips = '中午好！'}
      else if (hour < 17){this.timeTips = '下午好！'}
      else if (hour < 19){this.timeTips = '傍晚好！'}
      else if (hour < 22){this.timeTips = '晚上好！'}
    },
  }
}
</script>

<style lang="scss" scoped>
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
.dashboard-container {
  width: 100%;
  height: calc(100vh - 84px);
  overflow-y: auto;
  // background: url(./bg.jpg) no-repeat center;
  background-color: #1f2d3d;
  &.full {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    min-height: 100%;
  }
}

.scoped-num {
  min-width: 1400px;
  box-sizing: border-box;
  padding: 20px 20px 0;
  .sn-wrap {
    padding:  10px;
    display: flex;
    box-sizing: border-box;
  }
  .sn-item {
    padding: 10px;
    flex: 1;
    text-align: center;
    .sn-label {
      padding-top: 20px;
      color: #8cdacc;
      font-size: 18px;
    }
    .dv-digital-flop {
      display: inline-block;
      margin-bottom: 10px;
    }
  }
}
.scoped-count {
  padding: 20px;
  display: inline-block;
  min-width: 450px;
  .sc-user {
    width: 450px;
    height: 360px;
    padding-top: 80px;
    text-align: center;
    .t {
      color: #fff;
      font-size: 20px;
      padding-top: 10px;
      font-weight: bold;
    }
  }
}
</style>
