<!-- 指针表盘 -->
<template>
  <div class="clock-wrapper" @click="click">
    <div class="bar-wrapper">
      <text class="date-text">{{ this.nowMonth + " 周" + this.nowDay }}</text>
      <image class="weather-icon" :src="require('./images/cloudy.png')" />
      <text class="weather-text">18℃</text>
    </div>

    <div class="hour-wrap">
      <image class="hour-left-icon" resize="right" :src="this.nowHourLeft" />
      <image :class="hourRight !== 1 ? 'hour-right-icon':'hour-right-icon-one'" :src="this.nowHourRight" />
    </div>

    <div class="minute-wrap">
      <image class="minute-left-icon" resize="right" :src="this.nowMinuteLeft" />
      <image :class="minuteRight !== 1 ? 'minute-right-icon':'minute-right-icon-one'" :src="this.nowMinuteRight" />
    </div>
  </div>
</template>
<script>
const WEEKDAYS = ["日", "一", "二", "三", "四", "五", "六"];
const NUMBER_MINUTE = [require("./images/minute/zero.png"), require("./images/minute/one.png"), require("./images/minute/two.png"), require("./images/minute/three.png"), require("./images/minute/four.png"), require("./images/minute/five.png"), require("./images/minute/six.png"), require("./images/minute/seven.png"), require("./images/minute/eight.png"), require("./images/minute/nine.png")];
const NUMBER_HOUR = [require("./images/hour/zero.png"), require("./images/hour/one.png"), require("./images/hour/two.png"), require("./images/hour/three.png"), require("./images/hour/four.png"), require("./images/hour/five.png"), require("./images/hour/six.png"), require("./images/hour/seven.png"), require("./images/hour/eight.png"), require("./images/hour/nine.png")];
export default {
  name: "ClockData",
  components: { },
  data() {
    const degs = this.caculateDeg();
    const now = new Date();
    // const hours = now.getHours() % 12;
    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_HOUR[this.hourLeft],
      nowHourRight: NUMBER_HOUR[this.hourRight],
      nowMinuteLeft: NUMBER_MINUTE[this.minuteLeft],
      nowMinuteRight: NUMBER_MINUTE[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);
  },
  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() % 12;
      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;

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

      return {
        hours: hours,
        minutes: minutes,
      };
    },
    click(e) {
      $falcon.navTo('applist');
    }
  }
};
</script>
<style lang="less" scoped>
.clock-wrapper {
  background-color: #000000;
  width: 240px;
  // height: 100%;
  height: 320px;
  align-self: center;
}
.bar-wrapper {
  height: 48px;
  flex-direction: row;
  align-items: center;
}
.weather-wrap{
  position:absolute;
  flex-direction: row;
  left:79px;
  top:229px;
}
.weather-icon{
  // margin-top: 9px;
  width: 30px;
  height: 30px;
  margin-left: 86px;
}
.weather-text{
  // margin-top: 9px;
  margin-left: 3px;
  color:#ffffff;
  font-size:20px;
}
.hour-wrap{
  flex-direction: row;
  justify-content: flex-end;
}
.hour-left-icon {
  margin-right: 8px;
  margin-top: 3px;
  width: 112px;
  height: 120px;
}
.hour-right-icon {
  margin-top: 3px;
  margin-right: 4px;
  width: 112px;
  height: 120px;
}
.hour-right-icon-one {
  margin-top: 3px;
  margin-right: 4px;
  width: 60px;
  height: 120px;
}
.minute-wrap{
  flex-direction: row;
  justify-content: flex-end;
}
.minute-left-icon {
  margin-right: 8px;
  margin-top: 20px;
  width: 112px;
  height: 120px;
}
.minute-right-icon {
  margin-right: 4px;
  margin-top: 20px;
  width: 112px;
  height: 120px;
}
.minute-right-icon-one {
  margin-right: 4px;
  margin-top: 20px;
  width: 60px;
  height: 120px;
}
.date-text{
  // margin-top: 9px;
  margin-left: 4px;
  color:#ffffff;
  font-size:20px;
}
</style>
