<!-- 指针表盘 -->
<template>
  <div class="clock-wrapper" @click="click">
    <image class="background-icon" :src="require('./images/clock.png')" />
    <text class="date-text">{{ this.nowMonth + " 周" + this.nowDay }}</text>
    <div class="time-wrapper">
      <image class="hour-left-icon" resize="contain" :src="this.nowHourLeft" />
      <image class="hour-right-icon" resize="contain" :src="this.nowHourRight" />
      <image class="minute-left-icon" resize="contain" :src="this.nowMinuteLeft" />
      <image class="minute-right-icon" resize="contain" :src="this.nowMinuteRight" />
    </div>
  </div>
</template>
<script>
const WEEKDAYS = ["日", "一", "二", "三", "四", "五", "六"];
const NUMBER = [require("./images/number/zero.png"), require("./images/number/one.png"), require("./images/number/two.png"), require("./images/number/three.png"), require("./images/number/four.png"), require("./images/number/five.png"), require("./images/number/six.png"), require("./images/number/seven.png"), require("./images/number/eight.png"), require("./images/number/nine.png")];
export default {
  data() {
      const degs = this.caculateDeg();
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();

      this.hourLeft = Math.floor(hours / 10);
      this.hourRight = hours % 10;
      this.minuteLeft = Math.floor(minutes / 10);
      this.minuteRight = minutes % 10;
    return {
      ...degs,
      nowMonth: String(new Date().getMonth() + 1).padStart(2, "0"),
      nowDay: WEEKDAYS[new Date().getDay()],
      nowHourLeft: NUMBER[this.hourLeft],
      nowHourRight: NUMBER[this.hourRight],
      nowMinuteLeft: NUMBER[this.minuteLeft],
      nowMinuteRight: NUMBER[this.minuteRight]
    };
  },
  created() {
    this.$page.on("show", this.onPageShow);
    this.$page.on("hide", this.onPageHide);
  },
  mounted() {
    this.updateTime();
  },
  destroyed() {
    this.$page.off("show", this.onPageShow);
    this.$page.off("hide", this.onPageHide);
  },
  computed: {
    hStyle() {
      return {
        transform: `rotate(${this.hours}deg)`
      };
    },
    mStyle() {
      return {
        transform: `rotate(${this.minutes}deg)`
      };
    },
    sStyle() {
      return {
        transform: `rotate(${this.seconds}deg)`
      };
    }
  },
  methods: {
    onPageShow() {
      if (!this.timerId) {
        this.updateTime();
      }
    },
    onPageHide() {
      if (this.timerId) {
        clearTimeout(this.timerId);
        this.timerId = 0;
      }
    },
    updateTime() {
      const result = this.caculateDeg();
      this.hours = result.hours;
      this.minutes = result.minutes;
      this.seconds = result.seconds + 1;

      const now = new Date();
      this.nowMonth = String(now.getMonth() + 1).padStart(2, "0");
      this.nowDay = WEEKDAYS[now.getDay()];

      this.timerId = setTimeout(() => {
        this.updateTime();
      }, 1000);
    },
    caculateDeg() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds() + 1;

      const sDeg = seconds * 6;
      const mDeg = (minutes * 60 + seconds) * 0.1; //每一秒走0.1度
      const hDeg = ((hours % 12) * 60 + minutes) * 0.5; //每分钟走0.25度

      this.hourLeft = Math.floor(hours / 10);
      this.hourRight = hours % 10;
      this.minuteLeft = Math.floor(minutes / 10);
      this.minuteRight = minutes % 10;

      this.nowHourLeft = NUMBER[this.hourLeft],
      this.nowHourRight = NUMBER[this.hourRight],
      this.nowMinuteLeft = NUMBER[this.minuteLeft],
      this.nowMinuteRight = NUMBER[this.minuteRight]

      return {
        hours: parseFloat(hDeg),
        minutes: parseFloat(mDeg),
        seconds: parseFloat(sDeg)
      };
    },
    click(e) {
      $falcon.navTo('applist');
    }
  }
};
</script>
<style lang="less" scoped>
.clock-wrapper {
  background-color: #000000;
  width: 240px;
  // height: 100%;
  height: 320px;
  align-self: center;
}.background-icon {
  width: 240px;
  // height: 100%;
  height: 320px;
}
.date-text{
  opacity: 0.6;
  position:absolute;
  color:#ffffff;
  font-size:20px;
  left: 87px;
  top: 90px;
}
.time-wrapper {
  justify-content: flex-start;
  position: absolute;
  left: 26px;
  top:130px;
  flex-direction: row;
  width: 188px;
  height: 60px;
}
.hour-left-icon {
  height: 60px;
  width: 40px;
}
.hour-right-icon {
  margin-left: 2px;
  height: 60px;
  width: 40px;
}
.minute-left-icon {
  margin-left: 24px;
  height: 60px;
  width: 40px;
}
.minute-right-icon {
  margin-left: 2px;
  height: 60px;
  width: 40px;
}
</style>
