<template>
  <div class="water-ball" :style="`--color:${color}`">
    <div class="water-title">{{ userInfo.name }}</div>
    <div class="water-explain">训练得分</div>

    <div class="water-ball-inner">
      <canvas id="waveCanvas" ref="waveCanvas"></canvas>
      <div class="percentage">{{ percent }}分</div>
    </div>
    <div class="water-explain">训练用时</div>
    <div class="water-time">{{ formatMilliseconds(duration) }}</div>
  </div>
</template>

<script>
export default {
  props: {
    percent: {
      type: Number,
      default: 0
    },
    userInfo: {
      type: Object,
      default: () => {}
    },
    duration: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: 'rgba(0, 123, 255, 0.5)'
    }
  },
  data () {
    return {}
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const canvas = this.$refs.waveCanvas
      // const canvas = document.getElementById('waveCanvas')
      const ctx = canvas.getContext('2d')
      const centerX = canvas.width / 2
      const centerY = canvas.height * (1 - this.percent / 100)
      const radius = Math.min(centerX, centerY + 10)
      const amplitude = radius * 0.05 // 振幅
      const frequency = 0.02 // 频率
      let percent = this.percent // 百分比
      let phase = 0 // 相位
      const that = this
      function drawWave () {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.beginPath()

        for (let x = 0; x <= canvas.width; x++) {
          const radians = x * frequency + phase
          const y = centerY + Math.sin(radians) * amplitude * 1
          ctx.lineTo(x, y)
        }

        ctx.lineTo(canvas.width, canvas.height + 10)
        ctx.lineTo(0, canvas.height + 10)
        ctx.closePath()
        ctx.fillStyle = that.color
        ctx.fill()
      }

      function updateWaveAnimation () {
        phase += 0.1 // 控制水波的动画速度
        drawWave()
        requestAnimationFrame(updateWaveAnimation)
      }

      function updatePercentage (newPercent) {
        percent = Math.max(0, Math.min(newPercent, 100))
        drawWave()
      }

      updateWaveAnimation()
      updatePercentage(percent)
    },
    formatMilliseconds (milliseconds) {
      const seconds = Math.floor(milliseconds / 1000)
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const remainingSeconds = seconds % 60

      const formattedHours = hours
      const formattedMinutes = String(minutes).padStart(2, '0')
      const formattedSeconds = String(remainingSeconds).padStart(2, '0')
      // return `${formattedHours}小时${formattedMinutes}分钟${formattedSeconds}秒`
      return `${formattedHours + '时'}${
        formattedMinutes + '分'
      }${formattedSeconds}秒`
    }
  },
  watch: {
    percent () {
      this.$nextTick(() => {
        this.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.water-ball {
  position: relative;
  min-width: 125px;
  max-width: 125px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
.water-ball-inner {
  min-width: 90px;
  max-width: 90px;
  min-height: 90px;
  max-height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color);
}

#waveCanvas {
  width: 100%;
  height: 100%;
}

.percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: rgba(15, 15, 15, 0.63);
}
.water-explain,
.water-title,
.water-time {
  width: 100%;
  text-align: center;
}
.water-explain {
  margin: 10px 0;
}
.water-title,
.water-time {
  font-size: 16px;
  // font-weight: bold;
}
.water-time {
  font-size: 14px;
}
</style>
