<template>
  <div
    class="time-wrapper"
    :style="{ fontSize: textSize + 'px', color: textColor }"
  >
    <div class="times">
      {{ times }}
    </div>
    <div class="years">
      <span>{{ years }}</span>
      <span v-if="showLunar">{{ lunar }}</span>
      <span v-if="showWeek">{{ week }}</span>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onUnmounted } from "vue";
import calender from "./calendar";
export default {
  name: "AllTime",
  props: {
    textSize: {
      type: Number,
      default: 30,
    },
    textColor: {
      type: String,
      default: "#00fff",
    },
    showLunar: {
      type: Boolean,
      default: false,
    },
    showWeek: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const state = reactive({
      years: "",
      times: "",
      week: "",
      lunar: "",
    });
    /*
     * 获取时间
     */
    const getTime = () => {
      let date = new Date();
      let year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
      let month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      let day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)

      let hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
      let minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      let seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)

      let weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      let week = weeks[date.getDay()];

      //获取当前系统时间
      let currentDate =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;

      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }

      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }

      //修改小时格式
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }

      //修改分钟格式
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }

      //修改秒格式
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }

      state.years = year + "-" + month + "-" + day;
      state.times = hours + ":" + minutes + ":" + seconds;
      state.week = week;
    };
    getTime();

    /*
     * 农历
     */
    const lunarCalendar = () => {
      let solar2lunar = calender.solar2lunar();
      state.lunar = solar2lunar.IMonthCn + solar2lunar.IDayCn;
    };
    if (props.showLunar) {
      lunarCalendar();
    }

    /*
     * 设置定时器
     */
    let timer = setInterval(() => {
      getTime();
      if (props.showLunar) {
        lunarCalendar();
      }
    }, 1000);

    /*
     *组件挂载
     */
    onUnmounted(() => {
      clearInterval(timer);
      timer = null;
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.time-wrapper {
  width: fit-content;
  padding: 10px;
  .years {
    white-space: nowrap;
    span {
      margin-left: 10px;
    }
  }
  .times {
    width: 100%;
    text-align: right;
  }
}
</style>