<template>
  <div class="progress-box">
      <!-- 绘制圆环背景 -->
      <canvas ref="canvasProgressbg" class="progress-bg" id="canvasProgressbg" width="240" height="240" />
      <!-- 绘制加载中圆弧 -->
      <canvas ref ="canvasProgress" class="progress-canvas" id="canvasProgress" width="240" height="240" /> 
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: 'income-circle',
  props: {
      data: {
          type: Object,
          default: {}
      },
  },
  data() {
    return {
     
    };
  },
  computed: {
    ...mapState({
      clientWidth: (state) => {
        return state.yoho.window.clientWidth;
      },
    })
  },

  mounted() {
    this.startDraw(this.data);
  },
  watch: {
    data: function(val) {
      this.startDraw(val)
    }
  },
  methods: {
    startDraw(val) {
      let summary = {}
    for(let key in val) {
        let item = val[key];
        if(item.includes('¥')) {
          let value = val[key].split('¥')[1];
          summary[key] = value
        }
      }
    this.drawProgressbg(summary);
    this.startProgress(summary);
    },
  // 画progress底部背景
  drawProgressbg: function (summary) {
    let c=document.getElementById("canvasProgressbg");
    if(!c) return
    let ctx=c.getContext("2d");
    ctx.lineWidth= 30 ;
    let strokeStyle = '#E0E0E0'
    if (summary && summary.totalIncome > 0) {
      strokeStyle = '#65AB85';
    }
    ctx.strokeStyle=strokeStyle;
    ctx.lineCap='round'
    ctx.beginPath();
    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
    ctx.arc(120, 120, 100, 0, 2 * Math.PI, false);
    ctx.stroke();
  },

  // 画progress进度
  drawCircle: function (step) {
    let c=document.getElementById("canvasProgress");
    if(!c) return
    let context=c.getContext("2d");
    context.lineWidth=30;
    let strokeColor = '#002B47'
    context.strokeStyle=strokeColor;
    context.lineCap='round';
    context.beginPath();
    //参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(120, 120, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    context.stroke();
  },

  // 开始progress
  
  startProgress: function (summary) {
    if (summary && summary.totalIncome > 0) {
      this.drawCircle(summary.goodsIncome / (summary.totalIncome / 2))
    }
  },
  }
};
</script>

<style lang="scss" scoped>
.progress-box {
  position: absolute;
  top: 36px;
  right: 50px;
  width: 204px;
  height: 204px;
}
.progress-bg {
  position: absolute;
  width: 204px;
  height: 204px;
}
 
.progress-canvas {
  position: absolute;
  width: 204px;
  height: 204px;
}
</style>