<template>
  <div class="DoughnutChart-wrapper">
    <div class="DoughnutChart" :id="id">
      <canvas :id="canvasId"></canvas>
      <div class="DonutChart-text">
        <span>{{ ratio }}%</span>
      </div>
    </div>
    <div class="DoughnutChart-explain">
      <div class="item">
        <i></i>
        <span>已激活成员</span>
        <p>2142</p>
      </div>
      <div class="item">
        <i></i>
        <span>未激活成员</span>
        <p>2142</p>
      </div>
    </div>
  </div>
</template>

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

    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 = 4
        ctx.strokeStyle = 'rgba(102, 121, 138, 0.3)'
        ctx.beginPath();
        ctx.arc(x, y, x - 8, 0, 2 * Math.PI)
        ctx.stroke()

        ctx.beginPath()
        ctx.lineWidth = 4
        var g = ctx.createLinearGradient(0, 0, 0, 80)
        g.addColorStop(0, 'rgba(44, 150, 231, 0.8)')
        g.addColorStop(1, 'rgba(92, 255, 243, 1)')
        ctx.strokeStyle = g

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

        ctx.beginPath()
        ctx.strokeStyle = 'rgba(102, 121, 138, 0.4)'
        ctx.lineWidth = 1
        ctx.arc(x, y, x - 15, 0, 2 * Math.PI)
        ctx.stroke()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .DoughnutChart-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-top: 12px;

    .DoughnutChart-explain {
      flex: 1;
      margin-left: 12px;

      .item {
        display: flex;
        align-items: center;

        i {
          width: 8px;
          height: 8px;
          margin-right: 6px;
          border-radius: 50%;
          background: #5AF9F0;
        }

        span {
          margin-right: 24px;
          font-weight: 400;
          font-size: 14px;
          color: #9BB7D4;
        }

        p {
          font-size: 14px;
          color: #FFFFFF;
        }

        &:last-child i {
          background: rgba(102, 121, 138, 0.3);
        }
      }
    }


    .DoughnutChart {
      position: relative;
      width: 90px;
      height: 90px;
      overflow: hidden;

      .DonutChart-text {
        display: flex;
        position: absolute;
        justify-content: center;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translate(-50%, -50%);

        span {
          font-size: 18px;
          font-weight: bold;
          color: #02FEFF;
        }
      }
    }
  }
</style>
