<template>
  <view style="width: 56rpx;height: 56rpx">
<!--    <image v-if="preferPath" style="width: 56rpx;height: 56rpx" :src="preferPath"></image>-->
    <canvas style="width: 56rpx;height: 56rpx" canvas-id="month" id="month"/>
  </view>
</template>

<script>
import uCharts from '@/components/u-charts.js';

var uChartsInstance = {};
export default {
  name: "YearCharts",
  data() {
    return {
        preferPath:''
    }
  },
  props: {
    success: {
      type: Number,
      default: 0
    }
  },
  watch: {
    success: {
      handler(value) {
        console.log('value111', value)
        let success = Number(value) > 100 ? 100 : Number(value)
        let error = Number(100 - value) < 0 ? 0 : Number(100 - value)
        let res = {
          series: [{
            data: [{name: '已完成', value: success}, {name: '未完成', value: error}]
          }]
        }
        console.log('res',res)
        this.drawCharts('month', res)
      }
    }
  },
  methods: {
    drawCharts(id, data) {
      const ctx = uni.createCanvasContext(id, this);
      let _this = this
      uChartsInstance[id] = new uCharts({
        type: "ring",
        context: ctx,
        width: 28,
        height: 28,
        series: data.series,
        animation: false,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#FC7909", "#FEE2CA"],
        padding: [0,0,0,0],
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: false,
          position: "right",
          lineHeight: 25
        },
        extra: {
          ring: {
            ringWidth: 4,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: -90,
            labelWidth: 0,
            border: false,
            borderWidth: 3,
            customRadius: 14,
            borderColor: "#FFFFFF"
          }
        }
      });
        setTimeout( ()=>{
            // this.canvasToTempImage('month')
        },2000)
    },
      canvasToTempImage(id){
          uni.canvasToTempFilePath({
              canvasId:id,
              complete:(res)=>{
                  if (res.tempFilePath){
                      uni.getFileSystemManager().readFile({
                          filePath: res.tempFilePath,
                          encoding: 'base64',
                          success: res => {
                              let base64 = 'data:image/png;base64,' + res.data;
                              this.preferPath = base64
                          }
                      })
                  }
              }
          },this)
      },
  }
}
</script>

<style lang="scss" scoped>
</style>
