<!-- 指针表盘 -->
<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>
    <text class="hour">{{this.hours}}</text>
    <text class="minute">{{this.minutes}}</text>
  </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);
  },
  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();

      if (parseInt(hours) < 10 && parseInt(minutes) < 10) {
        return {
          hours: "0" + hours,
          minutes: "0" + minutes,
        };
      } else if (parseInt(hours) < 10 && parseInt(minutes) >= 10) {
        return {
          hours: "0" + hours,
          minutes: minutes,
        };
      } if (parseInt(hours) >= 10 && parseInt(minutes) < 10) {
        return {
          hours: hours,
          minutes: "0" + minutes,
        };
      } if (parseInt(hours) >= 10 && parseInt(minutes) >= 10) {
        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 {
  flex-direction: row;
}
.weather-wrap{
  position:absolute;
  flex-direction: row;
  left:79px;
  top:229px;
}
.weather-icon{
  width: 36px;
  height: 36px;
  margin-left:42px;
  align-self: center;
  margin-top: 7px;
}
.weather-text{
  margin-right: 20px;
  color:#ffffff;
  font-size:20px;
  align-self: center;
}
.date-text{
  margin-left: 20px;
  color:#ffffff;
  font-size:20px;
  align-self: center;
}
.hour {
  font-size: 160px;
  color: #FF6A00;
  text-align: center;
  line-height: 140px;
}
.minute {
  font-size: 160px;
  color: #FFFFFF;
  text-align: center;
  line-height: 140px;
  bottom: 14px;
}
</style>
