<template>
  <header>
    <div class="left"></div>
    <div class="mid">{{ $route.meta.title }}</div>
    <div class="right">{{ curTime }}</div>
  </header>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      curTime: '',
      dayOfWeekText: '',
    };
  },
  methods: {
    // 获取星期
    getWeek() {
      const dayOfWeek = dayjs().day();
      switch (dayOfWeek) {
        case 0:
          this.dayOfWeekText = '星期日';
          break;
        case 1:
          this.dayOfWeekText = '星期一';
          break;
        case 2:
          this.dayOfWeekText = '星期二';
          break;
        case 3:
          this.dayOfWeekText = '星期三';
          break;
        case 4:
          this.dayOfWeekText = '星期四';
          break;
        case 5:
          this.dayOfWeekText = '星期五';
          break;
        case 6:
          this.dayOfWeekText = '星期六';
          break;
      }
    },
    // 更新当前时间
    updateTime() {
      this.curTime = dayjs().format(`YYYY-MM-DD HH:mm:ss ${this.dayOfWeekText}`);
    },
  },
  created() {
    this.getWeek();
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
