<!--
  @description: 采购时钟组件
  @Modifier:gmy
  @routerPath:
  @date:2020/5/9-15:48
-->
<template>
  <div id="coolClockWrap">
    <canvas id="coolClockCanvas" :width="canvas.width" :height="canvas.height" />
  </div>
</template>

<script>
import { getTime } from '@api/common/tools.js' // 获取服务器时间
export default {
  name: 'OfferClockVue',
  components: {

  },
  data() {
    return {
      canvas: {
        width: 154,
        height: 150
      },
      L: 0, // 基础半径
      timer: null,
      currentTimes: '' // 当前时间
    }
  },
  mounted() {
    this.drawCoolClock()
    this.timer = setInterval(() => {
      this.drawCoolClock()
    }, 30)
  },
  created() {},
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    drawCoolClock() {
      const canvas = document.getElementById('coolClockCanvas')
      const ctx = canvas.getContext('2d')
      const [x0, y0] = [this.canvas.width / 2, this.canvas.height / 2] // 获取圆心x,y
      this.L = this.canvas.width / 2 - 10 // 设置圆半径
      const [hourMinL] = [this.L, this.L - 15] // 获取时刻度首位距离x0,y0位置
      const [minMaxL] = [this.L - 2, this.L - 15]
      const centerL = 5
      const oDate = new Date() // 绑定当前时间
      const oHours = oDate.getHours()
      const oMin = oDate.getMinutes()
      const oSen = oDate.getSeconds()
      const oHoursValue = -90 + oHours * 30 + oMin / 2 // 获取小时的角度
      const oMinValue = -90 + oMin * 6
      const oSenValue = -90 + oSen * 6
      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
      // this.drawHoursScale(ctx, x0, y0, 12, 3, hourMaxL, hourMinL) // 绘制表盘的时钟刻度scale
      this.drawScaleNum(ctx, hourMinL - 5, x0, y0) // 绘制12个表盘数字
      this.drawTimeNeedle(ctx, x0, y0, 5, 40, oHoursValue) // 绘制时针
      this.drawTimeNeedle(ctx, x0, y0, 3, minMaxL - 5, oMinValue) // 绘制分针
      this.drawTimeNeedle(ctx, x0, y0, 3, minMaxL - 2, oSenValue, '#f3a829') // 绘制秒针
      this.drawSenDotted(ctx, '#f3a829', x0, y0, oSenValue - 180, centerL) // 绘制秒针尾部
      this.drawCircleCenter(ctx, x0, y0, '#f3a829', centerL) // 绘制圆心
    },
    drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
      for (let i = 0; i < scaleNum; i++) {
        const angel = -90 + i * (360 / scaleNum) // 角度
        const [x1, y1] = [x0 + Math.cos(angel * Math.PI / 180) * maxL, y0 + Math.sin(angel * Math.PI / 180) * maxL]
        const [x2, y2] = [x0 + Math.cos(angel * Math.PI / 180) * minL, y0 + Math.sin(angel * Math.PI / 180) * minL]
        ctx.save()
        ctx.beginPath()
        ctx.lineWidth = scaleW
        ctx.lineCap = 'round'
        ctx.moveTo(x1, y1)
        ctx.lineTo(x2, y2)
        ctx.stroke()
        ctx.closePath()
        ctx.restore()
      }
    },
    drawScaleNum(ctx, L, x0, y0) {
      for (let i = 0; i < 12; i++) {
        const angel = -90 + i * (360 / 12) // 角度
        const [x, y] = [x0 + Math.cos(angel * Math.PI / 180) * L, y0 + Math.sin(angel * Math.PI / 180) * L]
        const num = i === 0 ? 12 : i
        ctx.save()
        ctx.beginPath()
        ctx.font = '12px Arial'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(num, x, y)
        ctx.closePath()
        ctx.restore()
      }
    },
    drawTimeNeedle(ctx, x0, y0, lineW, L, angel, color = '#000') {
      const [x, y] = [x0 + Math.cos(angel * Math.PI / 180) * L, y0 + Math.sin(angel * Math.PI / 180) * L]
      ctx.save()
      ctx.beginPath()
      ctx.strokeStyle = color
      ctx.lineWidth = lineW
      ctx.lineCap = 'round'
      ctx.moveTo(x0, y0)
      ctx.lineTo(x, y)
      ctx.stroke()
      ctx.closePath()
      ctx.restore()
    },
    drawCircleCenter(ctx, x0, y0, color, L) {
      ctx.save()
      ctx.beginPath()
      ctx.shadowBlur = 4
      ctx.shadowColor = '#000'
      ctx.fillStyle = color
      ctx.arc(x0, y0, L, 0, 360 * Math.PI / 180)
      ctx.fill()
      ctx.closePath()
      ctx.restore()
    },
    // 绘制秒针尾部
    drawSenDotted(ctx, color, x0, y0, angel, L) {
      const [x, y] = [x0 + Math.cos(angel * Math.PI / 180) * L, y0 + Math.sin(angel * Math.PI / 180) * L]
      ctx.save()
      ctx.beginPath()
      ctx.fillStyle = color
      ctx.arc(x, y, 2, 0, 360 * Math.PI / 180)
      ctx.fill()
      ctx.closePath()
      ctx.restore()
    }
  },
  // 获取当前时间
  getCurrentTime() {
    getTime().then(res => {
      this.currentTimes = res.data.time
    }).catch(() => {
    })
  }
}
</script>

<style lang="less" scoped>
  #coolClockWrap {
    width: 100%;
    height: 100%;
    background: #eee;
    border-radius: 50%;
    border: 5px solid #d9d9d9;
    background-image: -webkit-linear-gradient(top left, #eee, #f5f5f5);
    background-image: linear-gradient(to bottom right, #eee, #f5f5f5);
    box-shadow: 20px 20px 30px -10px rgba(0, 0, 0, 0.4), inset 10px 10px 20px rgba(0, 0, 0, 0.2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
  }
</style>
