<template>
  <div class="DonutChart" :id="id">
    <canvas :id="canvasId"></canvas>
    <div class="DonutChart-text">
      <span>{{ ratio || 0 }}%</span>
      <i>{{ text }}</i>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['ratio', 'text'],

    data () {
      return {
        id: `DonutChart-${Math.ceil(Math.random() * 10000)}`,
        canvasId: `DonutChartCanvas-${Math.ceil(Math.random() * 10000)}`,
        canvasWidth: 90,
        canvasHeight: 90
      }
    },

    mounted () {
      this.$nextTick(() => {
        this.init()
      })
    },

    methods: {
      drawLine(ctx, options) {
        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
        ctx.lineWidth = lineWidth
        ctx.strokeStyle = lineColor
        ctx.beginPath()
        ctx.moveTo(beginX, beginY)
        ctx.lineTo(endX, endY)
        ctx.closePath()
        ctx.stroke()
      },

      angle (a, i, ox, oy, or) {
        var hudu = (2 * Math.PI / 360) * a * i
        var x = ox + Math.sin(hudu) * or
        var y = oy - Math.cos(hudu) * or
        return x + '_' + y
      },

      mapColor (value) {
        if (value < 25) {
          return '#FFC139'
        }

        if (value < 50) {
          return '#21E03E'
        }

        return '#05C8FF'
      },

      init () {
        const ctx = document.querySelector(`#${this.canvasId}`).getContext('2d')
        const canvasWidth = document.querySelector(`#${this.id}`).offsetWidth
        const canvasHeight = document.querySelector(`#${this.id}`).offsetHeight
        const angle = this.ratio / 100 * 2
        let radian = 0

        ctx.width = canvasWidth
        ctx.height = canvasHeight
        const x = canvasWidth / 2
        const y = canvasHeight / 2
        ctx.lineWidth = 2
        ctx.strokeStyle = '#383f56'
        ctx.beginPath();
        ctx.arc(x, y, x - 3, 0, 2 * Math.PI)
        ctx.stroke()

        ctx.beginPath()
        ctx.lineWidth = 4
        ctx.strokeStyle = 'rgba(76, 202, 227, 1)'

        if (this.ratio < 25) {
          radian = 3 / 2 + angle
          ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
        } else if (this.ratio === 100) {
          ctx.arc(x, y, x - 4, 0, Math.PI * 2)
        } else {
          radian = (this.ratio - 25) / 100 * 2
          ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
        }
        ctx.stroke()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .DonutChart {
    position: relative;
    width: 84px;
    height: 84px;
    overflow: hidden;

    .DonutChart-text {
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      top: 50%;
      left: 50%;
      z-index: 1;
      width: 100%;
      height: 100%;
      line-height: 1;
      transform: translate(-50%, -50%);

      span {
        margin-bottom: 8px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        font-style: oblique;
      }

      i {
        font-size: 12px;
        font-style: normal;
        color: rgba(42, 183, 209, 1);
      }
    }
  }
</style>
