<template>
  <view  style="width: 68rpx;height: 68rpx">
    <image v-if="preferPath"  style="width: 68rpx;height: 68rpx;" :src="preferPath"></image>
    <canvas v-if="name" style="width: 68rpx;height: 68rpx;position:fixed;left: 100%" class="month" :canvas-id="name" id="month"/>
  </view>
</template>

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

var uChartsInstance = {};
export default {
  name: "YearCharts",
  data() {
    return {
      preferPath:'',
      showImg:false,
      hide:true
    }
  },
  props: {
    success: {
      type: Number,
      default: 0
    },
    name:{
      type: String,
      default: ''
    }
  },
  watch: {
    success: {
      handler(value) {
        this.hide = true
        this.preferPath= ''
        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}]
          }]
        }
        if (value){
          this.drawCharts(this.name, res)
        }else{
          let res = {
            series: [{
              data: [{name: '已完成', value: 0}, {name: '未完成', value: 100}]
            }]
          }
          this.drawCharts(this.name, res)
        }
      },
      immediate:true
    },
    preferPath:{
      handler(value){
        if (value){
          this.showImg = true
        }else{
          this.showImg = false
        }
      },
      immediate:true
    }
  },
  methods: {
    drawCharts(id, data) {
      if (this.name){
        const ctx = uni.createCanvasContext(id, this);
        let _this = this
        uChartsInstance[id] = new uCharts({
          type: "ring",
          context: ctx,
          width: 34,
          height: 34,
          series: data.series,
          animation: false,
          rotate: false,
          rotateLock: false,
          background: "#FFFFFF",
          color: ["#018ABD", "#CCE8F2"],
          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: 17,
              borderColor: "#FFFFFF"
            }
          }
        });
        setTimeout( ()=>{
          this.canvasToTempImage(this.name)
        },500)
      }
    },
    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.hide = false
              }
            })
          }
        }
      },this)
    },
  }
}
</script>

<style lang="scss" scoped>
.main{
  width: 68rpx;
  height: 68rpx;
  .month{
    width: 68rpx;
    height: 68rpx;
  }
}
</style>
