<template>
  <!-- <div ref="con">
    <div
      :style="{width:2*r+'px',height:2*r+'px',left:(width/2-r)+'px',top:(height/2-r)+'px'}"
      class="absolute progress-r"
    ></div>
    <div
      :style="{width:2*r+'px',height:2*r+'px',left:(width/2-r)+'px',top:(height/2-r)+'px',clip:'rect(0,'+r+'px,auto,0)'}"
      class="absolute progress-r left"
    ></div>
    <div
      :style="{width:2*r+'px',height:2*r+'px',left:(width/2-r)+'px',top:(height/2-r)+'px',clip:'rect(0,auto,auto,'+r+'px)',transform: 'rotate('+rotate+'deg)'}"
      class="absolute progress-r right"
    ></div>
  </div>-->
  <v-stage
    ref="stage"
    :config="{width:width,height:height}"
    class="absolute"
    :style="{top:top,left:left}"
    style="right:0;bottom:0;transform: rotateX(180deg)"
  >
    <v-layer>
      <v-arc ref="arc" :config="arc"></v-arc>
    </v-layer>
  </v-stage>
</template>
<style lang="stylus">

.progress-r {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
}

.progress-r.left {
  background-color: rgba(0, 0, 0, 0.5);
}

.progress-r.right {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

<script>
import { dom, scroll } from 'quasar'
import Konva from 'konva'

// eslint-disable-next-line no-unused-vars
const { css, height, width, offset } = dom
const {
  getScrollTarget,
  // setScrollPosition,
  getScrollWidth,
  getScrollHeight
} = scroll
export default {
  name: 'k-test',
  props: {
    item: Object,
    percent: String
  },
  data: function () {
    return {
      width: 0,
      height: 0,
      left: 0,
      top: 0,
      r: 0,
      percentInner: this.percent ? parseInt(this.percent) : 0,
      arc: {
        x: 50,
        y: 50,
        innerRadius: 0,
        outerRadius: 70,
        angle: 359,
        fill: 'rgba(0,0,0,0.3)',
        stroke: 'black',
        rotation: 90,
        strokeWidth: 0
      }
    }
  },
  watch: {
    percent (old) {
      this.setPercent(old)
    }
  },
  created () {},
  mounted () {
    console.log(this.$refs.stage)
    let obj = this.$refs.stage.$el.parentNode
    this.oldParentStyle = {
      position: getComputedStyle(obj)['position'],
      overflow: getComputedStyle(obj)['overflow']
    }
    Object.assign(obj.style, { position: 'relative', overflow: 'hidden' })
    this.width = width(obj)
    this.height = height(obj)
    this.r = Math.sqrt(
      Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2)
    )
    // this.r = this.width / 2
    let target = getScrollTarget(obj)
    this.left = getScrollWidth(target)
    this.top = getScrollHeight(target)
    Object.assign(this.arc, {
      outerRadius: this.r,
      x: this.width / 2,
      y: this.height / 2
    })
  },
  beforeDestroy () {
    this.$emit('destroy', this.oldParentStyle)
    console.log('this.$refs.stage.$el', this.$refs.stage.$el)
    console.log(
      'this.$refs.stage.$el.parentNode',
      this.$refs.stage.$el.parentNode
    )
    if (this.$refs.stage.$el.parentNode) {
      Object.assign(this.$refs.stage.$el.parentNode.style, this.oldParentStyle)
    }
  },
  methods: {
    setNum (num) {
      let tween = new Konva.Tween({
        node: this.$refs.arc.getNode(),
        duration: 1.5,
        angle: num,
        // easing: Konva.Easings.BackEaseOut,
        onFinish: () => {
          // writeMessage('tween finished!')
          this.arc.angle = num
        }
      })
      tween.play()
    },
    setPercent (p) {
      this.percentInner = p
      p = p > 100 ? 100 : p
      p = p < 1 ? 1 : p
      this.setNum(((100 - p) / 100) * 365)
    }
  }
}
</script>
