<template>
  <view class="de-re-frame">
    <canvas :canvas-id="canvasId" :style="'height:' + cSize + 'px;width:' + cSize + 'px;'"></canvas>
    <view class="de-re-place" :style="'height:' + cSize + 'px;width:' + cSize + 'px;'">
      <template v-if="cPlaceContent">
        <view class="de-re-progress de-re-progress_1" v-if="cBili < 100">
          <view class="de-re-progress_yi">已抢</view>
          <view class="de-re-progress_zhi">{{ cBili }}%</view>
        </view>
        <view class="de-re-progress de-re-progress_2" v-else>已抢光</view>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </view>
  </view>
</template>
<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvDrawProgress',
  props: {
    canvasId: {
      //画布的id 同个页面需要多个画布需要定义不同id
      type: String,
      default: 'cv-draw-progress-canvas'
    },
    cSize: {
      //圆的大小 单位px 取偶数
      type: Number,
      default: 80
    },
    cBackground: {
      //进度条背景底色
      type: String,
      default: '#f4f4f4'
    },
    cColor: {
      //进度条颜色
      type: String,
      default: '#fe9b25'
    },
    lineWidth: {
      //进度条线的宽度   注意：因为圆的半径设置为画布大小的一半-2  所以注意进度条线的粗细会不会超过圆的大小
      type: Number,
      default: 8
    },
    cBili: {
      //进度条的占比
      type: [Number, String],
      validator: function (val) {
        //验证器
        return val >= 0 && val <= 100;
      },
      default: 100
    },
    cPlaceContent: {
      //是否显示默认提示内容
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  watch: {
    cBili(val) {
      //监听比例数值的改变
      this.drawProgress();
    }
  },
  created() {
    this.drawProgress();
  },
  mounted() {},
  methods: {
    drawProgress() {
      let yX = this.cSize / 2; //圆心 x坐标
      let yY = this.cSize / 2; //圆心 y坐标
      let yBanJ = this.cSize / 2 - 4; //圆的半径  减2是因为有线条宽度

      const ctx = uni.createCanvasContext(this.canvasId, this);

      ctx.beginPath(); //画背景
      ctx.arc(yX, yY, yBanJ, 0.7 * Math.PI, 2.3 * Math.PI); //坐标40，40 半径38
      ctx.setStrokeStyle(this.cBackground); //画颜色
      ctx.setLineWidth(this.lineWidth);
      ctx.stroke(); //填充 画弧线

      let value = (this.cBili / 100).toFixed(4);
      let bX = 0.7 * Math.PI; //进度条开始的位置 一直都是0.7
      let eX = (0.7 + 1.6 * value) * Math.PI; //进度条结束的位置 100%是2.3
      ctx.beginPath();
      ctx.arc(yX, yY, yBanJ, bX, eX); //范围是0.7-2.3之间是百分百
      ctx.setStrokeStyle(this.cColor);
      ctx.stroke();

      setTimeout(() => {
        //必须延迟执行 不然H5不显示
        ctx.draw(); //画在画布上
      }, 20);
    }
  }
};
</script>

<style>
.de-re-frame {
  position: relative;
}
.de-re-place {
  position: absolute;
  top: 0;
  width: 80px;
  height: 80px;
}
.de-re-progress {
  width: 100%;
  height: 100%;
  display: flex;
}
.de-re-progress_1 {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.de-re-progress_2 {
  justify-content: center;
  align-items: center;
  color: #959595;
  font-size: 12px;
}
.de-re-progress_yi {
  color: #959595;
  font-size: 14px;
}
.de-re-progress_zhi {
  color: #181818;
  font-size: 14px;
}
</style>
