<template>
  <div class="">
    时间{{ time }}

    <div class="base1">
      <div class="move-to-center line"></div>
      <div class="move-to-center line line2"></div>
      <div class="move-to-center line line3"></div>
      <div class="move-to-center line line4"></div>
      <div class="move-to-center line line5"></div>
      <div class="move-to-center line line6"></div>
      <!--base2用来遮挡line1~6-->
      <div class="move-to-center base2"></div>
      <!--这里DOM节点有排列顺序要求，center在最上面挡住3个指针~-->
      <div class="ptr m-ptr" :style="{ transform: `rotate(${mPtr}deg)` }"></div>
      <div class="ptr h-ptr" :style="{ transform: `rotate(${hPtr}deg)` }"></div>
      <div class="ptr s-ptr" :style="{ transform: `rotate(${sPtr}deg)` }"></div>
      <div class="move-to-center center"></div>
    </div>
    <div class="time-label">当前时间：{{ time }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: '',
      time: '',
      h: 0,
      m: 0,
      s: 0,
      sPtr: -180,
      mPtr: -180,
      hPtr: -180
    }
  },
  async created() {
    let d = new Date()
    let h = d.getHours()
    let m = d.getMinutes()
    let s = d.getSeconds()
    this.h = h >= 10 ? h : `0${h}`
    this.m = m >= 10 ? m : `0${m}`
    this.s = s >= 10 ? s : `0${s}`
    this.sPtr += s * 6
    this.mPtr += m * 6 + s * 0.1
    this.hPtr += h * 30 + m * 0.5 + s / 120
    setInterval(() => {
      this.updateTime()
      this.updatePtr()
    }, 1000)
    this.gettoday()
    await this.getTime()
  },
  methods: {
    updateTime() {
      this.s++
      if (this.s === 60) {
        this.m++
        this.s = 0
      }
      if (this.m === 60) {
        this.h++
        this.m = 0
      }
      if (this.h === 24) {
        this.h = 0
      }
    },
    updatePtr() {
      this.sPtr += 6
      if (this.sPtr > 360) this.sPtr -= 360
      this.mPtr += 0.1
      if (this.mPtr > 360) this.mPtr -= 360
      this.hPtr += 1 / 120
      if (this.hPtr > 360) this.hPtr -= 360
    },
    gettoday() {
      let data = new Date()
      //   获取时分秒
      let h = data.getHours()
      let m = data.getMinutes()
      let s = data.getSeconds()
      if (h < 10) {
        h = '0' + h
      }
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      this.time = h + ':' + m + ':' + s
    },
    getTime() {
      this.timer = setInterval(() => {
        this.gettoday()
      }, 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  background-color: wheat;
}

div {
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.base1 {
  background-color: #ddd;
  border: 10px solid #ed6e46;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: relative;
}

.move-to-center {
  position: absolute;
  top: 50%;
  left: 50%;
}

.center {
  --cw: 20px;
  --offset: calc(-1 * var(--cw) / 2);
  width: var(--cw);
  height: var(--cw);
  border-radius: 50%;
  background-color: #ed6e46;
  margin-left: var(--offset);
  margin-top: var(--offset);
}

.base2 {
  --shade-w: 260px;
  --offset: calc(-1 * var(--shade-w) / 2);
  width: var(--shade-w);
  height: var(--shade-w);
  border-radius: 50%;
  background-color: #ddd;
  margin-left: var(--offset);
  margin-top: var(--offset);
}

.line {
  width: 5px;
  height: 280px;
  background-color: gray;
  margin-left: -2.5px;
  margin-top: -140px;
}

.line2 {
  transform: rotate(30deg);
}

.line3 {
  transform: rotate(60deg);
}

.line4 {
  transform: rotate(90deg);
}

.line5 {
  transform: rotate(120deg);
}

.line6 {
  transform: rotate(150deg);
}

.ptr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: top;
}

.s-ptr {
  background-color: black;
  width: 2px;
  height: 110px;
  margin-left: -1px;
}

.m-ptr {
  background-color: #f8b65b;
  --w: 8px;
  width: var(--w);
  height: 90px;
  border-radius: calc(var(--w) / 2);
  margin-left: calc(-1 * var(--w) / 2);
}

.h-ptr {
  background-color: #f8b65b;
  --w: 8px;
  width: var(--w);
  height: 70px;
  border-radius: calc(var(--w) / 2);
  margin-left: calc(-1 * var(--w) / 2);
}

.time-label {
  margin-top: 32px;
}
</style>