<template>
  <view class="asp-mp-cycle-progress">
    <view class="echart-box">
      <view class="content">
        <canvas
          canvas-id="chartBox"
          id="chartBox"
          class="chart"
          :style="{ width: width + 'rpx', height: width + 'rpx' }"
        >
          <asp-mp-icons
            class="chart__center"
            v-if="statusMap[status].type"
            :type="statusMap[status].type"
            :color="statusMap[status].color"
            :style="{ width: width + 'rpx', height: width + 'rpx', color }"
            :size="width / 10"
          ></asp-mp-icons>
          <view v-else class="chart__center" :style="{ width: width + 'rpx', height: width + 'rpx', color }">
            {{ percent }}%
          </view>
        </canvas>
      </view>
    </view>
  </view>
</template>

<script>
import { CircleBox } from './chart.js'
export default {
  name: 'asp-mp-cycle-progress',
  props: {
    percent: {
      type: Number,
      default: 0,
      required: true,
      validator: (val) => val >= 0 && val <= 100
    },
    status: {
      type: String,
      default: 'pending',
      validator: (val) => ['pending', 'error', 'wait', 'pause', 'disable'].indexOf(val) > -1
    },
    width: {
      type: Number,
      default: 200
    }
  },
  watch: {
    percent (newV) {
      if (newV > 100) return
      this.cbox1.percent = newV / 100
      this.cbox1.drawCircle()
    }
  },
  data () {
    return {
      cbox1: null, // 画布实例对象
      color: '#1372F0',
      statusMap: {
        pending: {
          color: '#1372F0',
          type: ''
        },
        error: {
          color: '#F62C30',
          type: 'closeempty'
        },
        done: {
          color: '#12C789',
          type: 'checkbox-filled'
        },
        wait: {
          color: '#1372F0',
          type: 'circle-filled'
        },
        pause: {
          color: '#B8E0FF'
        },
        disable: {
          color: '#D9D9D9'
        }
      }
    }
  },
  mounted () {
    this.initCircle1()
  },
  methods: {
    initCircle1 () {
      this.color = this.statusMap[this.status].color
      console.log('🚀 ~ file: asp-mp-cycle-progress.vue ~ line 77 ~ initCircle1 ~ this.color', this.color)
      // 实例对象
      // eslint-disable-next-line no-undef
      this.cbox1 = new CircleBox(uni.createCanvasContext('chartBox', this), this.width, this.color, this.percent)
      // 开始绘制
      this.cbox1.drawCircle()
    }
  }
}
</script>

<style lang="scss">
@import './asp-mp-cycle-progress.scss';
.wrap-box {
  padding: 0 30rpx;
  .echart-box {
    padding: 15px 0;
    border-bottom: 1px solid #dddddd;
    .title {
      font-size: 32rpx;
    }
    .content {
      padding-top: 15rpx;
      .chart {
        width: 300rpx;
        height: 300rpx;
        margin: 0 auto;
      }
    }
    .btn-box {
      text-align: center;
      .btn {
        display: inline-block;
        vertical-align: middle;
        margin: 0 20rpx;
        font-size: 30rpx;
        background-color: #297dfe;
        color: #fff;
      }
    }
  }
}
</style>