<template>
  <div>
    <span v-if="viewCtrol.year">{{ clock.year }}年</span>
    <span v-if="viewCtrol.month">{{ clock.month }}月</span
    ><span v-if="viewCtrol.date">{{ clock.date }}日</span>
    <span class="week" v-if="viewCtrol.week">{{ clock.week }}</span>
    <span v-if="viewCtrol.hour">{{ clock.hour }}</span
    ><span v-if="viewCtrol.minite">:{{ clock.minite }}</span
    ><span v-if="viewCtrol.second">:{{ clock.second }}</span>
  </div>
</template>

<script>
export default {
  name: "TslClock",
  props: {
    clock_format: {
      type: String,
      default: "yyyy-mm-dd week HH:mm:ss",
    },
  },
  watch: {
    clock_format: {
      handler(newData) {
        if (newData == null || newData == "") {
          return;
        }
        if (newData.indexOf("yyyy") < 0) {
          this.viewCtrol.year = false;
        }
        if (newData.indexOf("-mm") < 0) {
          this.viewCtrol.month = false;
        }
        if (newData.indexOf("-dd") < 0) {
          this.viewCtrol.date = false;
        }
        if (newData.indexOf("week") < 0) {
          this.viewCtrol.week = false;
        }
        if (newData.indexOf("HH") < 0) {
          this.viewCtrol.hour = false;
        }
        if (newData.indexOf(":mm") < 0) {
          this.viewCtrol.minite = false;
        }
        if (newData.indexOf(":ss") < 0) {
          this.viewCtrol.second = false;
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      interval_time: null,
      clock: this.updateTime(),
      viewCtrol: {
        year: true,
        month: true,
        date: true,
        week: true,
        hour: true,
        minite: true,
        second: true,
      },
    };
  },
  mounted() {
    this.clock = this.updateTime();
    this.interval_time = setInterval(() => {
      let newTime = this.updateTime();
      Object.keys(newTime).forEach((key) => (this.clock[key] = newTime[key]));
    }, 1000);
  },
  methods: {
    changeDay(num) {
      let day = "";
      switch (num) {
        case 1:
          day = "周一";
          break;
        case 2:
          day = "周二";
          break;
        case 3:
          day = "周三";
          break;
        case 4:
          day = "周四";
          break;
        case 5:
          day = "周五";
          break;
        case 6:
          day = "周六";
          break;
        case 0:
          day = "周日";
          break;
      }
      return day;
    },
    updateTime() {
      let time = new Date();
      return {
        year: time.getFullYear(),
        month: time.getMonth() + 1,
        date: time.getDate(),
        week: this.changeDay(time.getDay()),
        hour: time.getHours() < 10 ? "0" + time.getHours() : time.getHours(),
        minite:
          time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes(),
        second:
          time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds(),
      };
    },
  },
  beforeDestroy() {
    clearInterval(this.interval_time);
  },
};
</script>

<style scoped>
.week {
  margin-right: 1.4px;
  margin-left: 0.42px;
}
</style>
