<template>
  <div class="top relative flex flex-center flex-justify-end mr-140 mt-5">
    <span class="title ml-20">{{ time || '00:00:00' }}</span>
    <div class="flex bold ml-15" style="color: #fffaef; font-size: 14px">
      <span>{{ year }}</span>
      <span class="ml-20">{{ week }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: '',
      year: '',
      week: '',
      dev: false
    }
  },
  mounted() {
    this.dev = sessionStorage.getItem('dev') === 'true'
    this.getTime()
  },
  methods: {
    getTime() {
      setInterval(() => {
        this.time = new Date().toLocaleTimeString()
      }, 1000)
      this.year =
        new Date().getFullYear() +
        '-' +
        (new Date().getMonth() + 1 < 10
          ? '0' + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        '-' +
        (new Date().getDate() < 10
          ? '0' + new Date().getDate()
          : new Date().getDate())
      this.week = new Date().getFullYear()
      const weekArrayList = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      const index = new Date(this.year).getDay()
      this.week = weekArrayList[index]
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  .bar {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .img-content {
    height: 100%;
    font-size: 28px;

    img {
      height: 40px;
    }
  }

  .title {
    color: #fffaef;
    font-size: 30px;
  }

  .time {
    height: 100%;
  }
}
.mr-140 {
  margin-right: 140px;
}
</style>
