<!-- 指针表盘 -->
<template>
  <div class="clock-wrapper" @click="click">
    <div class="weather-wrap">
      <image class="weather-icon" :src="require('./images/cloudy.png')" />
      <text class="weather-text">18℃</text>
    </div>

    <div class="date-wrapper">
      <text class="date-text">{{ this.nowMonth + " 周" + this.nowDay }}</text>
    </div>
    <div class="colck-scale clock-scale0" />
    <div class="colck-scale clock-scale1" />
    <div class="colck-scale clock-scale2" />
    <div class="colck-scale clock-scale3" />
    <div class="colck-scale clock-scale4" />
    <div class="colck-scale clock-scale5" />
    <div class="colck-scale clock-scale6" />
    <div class="colck-scale clock-scale7" />
    <div class="colck-scale clock-scale8" />
    <div class="colck-scale clock-scale9" />
    <div class="colck-scale clock-scale10" />
    <div class="colck-scale clock-scale11" />

    <div class="pointer-hour" :style="hStyle" />
    <div class="pointer-minute" :style="mStyle" />
    <div class="pointer-second" :style="sStyle" />

    <!-- 指针上的圆环 -->
    <div class="pointer-cover">
      <div class="pointer-cover-inner" />
    </div>
  </div>
</template>
<script>
const WEEKDAYS = ["日", "一", "二", "三", "四", "五", "六"];
export default {
  data() {
    const degs = this.caculateDeg();
    return {
      ...degs,
      nowMonth: String(new Date().getMonth() + 1).padStart(2, "0"),
      nowDay: WEEKDAYS[new Date().getDay()]
    };
  },
  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() % 12;
      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度
      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;
}
.weather-wrap{
  position:absolute;
  flex-direction: row;
  left:79px;
  top:229px;
}
.weather-icon{
  width: 36px;
  height: 36px;
  margin-right:4px;
}
.weather-text{
  color:#ffffff;
  font-size:20px;
  align-self: center;
}
.date-wrapper{
  position:absolute;
  left:84px;
  top:75px;
}
.date-text{
  color:#ffffff;
  font-size:20px;
}
.pointer-cover {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 112px;
  top: 160px;
  border-radius: 8px;
  background-color: #000000;
  align-items: center;
  justify-content: center;
}
.pointer-cover-inner {
  width: 12px;
  height: 12px;
  background-color: #ff0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
}
.pointer-hour,
.pointer-minute,
.pointer-second {
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px #000;
}
.pointer-hour {
  width: 14px;
  height: 74px;
  left: 115px;
  top: 95px;
  border-radius: 15px;
  transform-origin: 50% 74px;
}
.pointer-minute {
  width: 12px;
  height: 112px;
  left: 115px;
  top: 58px;
  border-radius: 10px;
  transform-origin: 50% 112px;
}
.pointer-second {
  width: 2px;
  height: 102px;
  left: 120px;
  top: 65px;
  background-color: #ff0000;
  border-radius: 5px;
  transform-origin: 50% 102px;
}
.colck-scale {
  width: 5px;
  background-color: #ffffff;
  border-radius: 24px;
  position: absolute;
}
.clock-scale0 {
  height: 20px;
  left: 120px;
  top: 4px;
}
.clock-scale1 {
  height: 20px;
  // left: 207px;
  right: 33px;
  top: 4px;
  transform: rotate(30deg);
}
.clock-scale2 {
  height: 20px;
  left: 225px;
  top: 92px;
  transform: rotate(60deg);
}
.clock-scale3 {
  height: 20px;
  left: 225px;
  top: 160px;
  transform: rotate(90deg);
}

.clock-scale4 {
  height: 20px;
  left: 225px;
  bottom: 25px;
  top: 215px;
  transform: rotate(120deg);
}
.clock-scale5 {
  height: 20px;
  // left: 207px;
  right: 33px;
  bottom: 4px;
  transform: rotate(150deg);
}
.clock-scale6 {
  height: 20px;
  left: 120px;
  bottom: 4px;
  transform: rotate(180deg);
}
.clock-scale7 {
  height: 20px;
  left: 33px;
  bottom: 4px;
  transform: rotate(210deg);
}
.clock-scale8 {
  height: 20px;
  left: 11px;
  top: 215px;
  bottom: 25px;
  transform: rotate(240deg);
}
.clock-scale9 {
  height: 20px;
  left: 11px;
  top: 158px;
  transform: rotate(270deg);
}
.clock-scale10 {
  height: 20px;
  left: 11px;
  top: 92px;
  transform: rotate(300deg);
}
.clock-scale11 {
  height: 20px;
  left: 33px;
  top: 4px;
  transform: rotate(330deg);
}
</style>
