let perfumeNum = 1.5;
Component({
  properties:{
    percent: {
      type:Number,
      value:100,
      observer:'change'
    },
    percentStr: {
      type:String,
    },
    all:Number,
    sum:Number
  },
  methods:{
      // b、香水余量
    initRing(res) {
      // console.log(res,'aaaa')
      let that = this;
      const canvas = res[0].node
      const ctx = canvas.getContext('2d');
      // console.log("canvas=====>",canvas)
      var circleR = 240 / 2; // 画布的一半，用来找中心点和半径
      ctx.translate(0, 0);   // 定义起始点
      console.log(that.data.percent)
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 取色圆环
        ctx.beginPath();
        ctx.strokeStyle = '#eeeff7';//transparent
        ctx.lineWidth = 14;
        ctx.lineCap='round' // 设置圆环端点的形状
        ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false);
        ctx.stroke();
        ctx.closePath();
        // 进度_香水余量
        ctx.beginPath(); // 起始一条路径，或重置当前路径
        ctx.lineWidth = 14;  // 线条宽度
        ctx.lineCap='round' // 线条的结束端点样式
        ctx.arc(circleR, circleR -10,circleR - 35, Math.PI, Math.PI + (that.data.percent > 1 ? 1 :that.data.percent) * Math.PI , false);
        ctx.strokeStyle = "#FFC20E";//transparent
        ctx.stroke();
        canvas.requestAnimationFrame(draw);
      }
      draw();
    },

    change(newVal, oldVal){
      if(newVal== oldVal) return
      let that = this;
        // console.log('gogogo')
        // 香水余量圆环
        const query = wx.createSelectorQuery().in(this)
        query.select('#percent').fields({ node: true, size: true }).exec((res) => {
          // console.log(res)
          that.initRing(res);
          
        })
    },
  
    // 复位
    resetTab(){
      let that = this;
      perfumeNum = 2; // 香水余量为100%
      that.setData({
        percent: 100,
      })
    },
  }
})
// Page({
//   data: {
//     percent: 12, // 香水余量
//   },
 
//   /**
//    * 生命周期函数--监听页面加载
//    */
//   onLoad: function (options) {
//     let that = this;
//     // 香水余量圆环
//     const query = wx.createSelectorQuery()
//     query.select('#percent') .fields({ node: true, size: true }).exec((res) => {

//       console.log(res)
//       that.initRing(res);
//     })
//   },
//   // b、香水余量
//   initRing(res) {
//     let that = this;
//     const canvas = res[0].node
//     const ctx = canvas.getContext('2d');
//     canvas.width = res[0].width * dpr
//     canvas.height = res[0].height * dpr
//     ctx.scale(dpr, dpr);
//     var circleR = 220 / 2; // 画布的一半，用来找中心点和半径
//     ctx.translate(0, 0);   // 定义起始点
//     function draw() {
//       ctx.clearRect(0, 0, canvas.width, canvas.height);
//       // 取色圆环
//       ctx.beginPath();
//       ctx.strokeStyle = '#fff';//transparent
//       ctx.lineWidth = 12;
//       ctx.lineCap='round' // 设置圆环端点的形状
//       ctx.arc(circleR, circleR-10, circleR - 35, Math.PI, 2 * Math.PI, false);
//       ctx.stroke();
//       ctx.closePath();
//       console.log("香水余量")
//       // 进度_香水余量
//       ctx.beginPath(); // 起始一条路径，或重置当前路径
//       ctx.lineWidth = 6;  // 线条宽度
//       ctx.lineCap='round' // 线条的结束端点样式
//       ctx.arc(circleR, circleR-10, circleR - 35, Math.PI,perfumeNum * Math.PI, false);
//       ctx.strokeStyle = "#00CED1";//transparent
//       ctx.stroke();
//       canvas.requestAnimationFrame(draw);
//     }
//     draw();
//   },
 
//   // 复位
//   resetTab(){
//     let that = this;
//     perfumeNum = 2; // 香水余量为100%
//     that.setData({
//       percent: 100,
//     })
//   },
// })