<template>
  <div>
    {{$store.state.example}}
    <q-list :dense="$q.screen.lt.md">
      <q-item>
        <q-item-section>John Doe</q-item-section>
      </q-item>

      <q-item>
        <q-item-section>Jane Doe</q-item-section>
      </q-item>
    </q-list>
    <div style="width:100px;height:100px;background:red;position:relative;margin:50px;">
      <kyb-progress ref="progress1" :percent="this.progress1Num"></kyb-progress>
    </div>
    <div style="width:100px;height:150px;background:red;position:relative;margin:50px;">
      <kyb-progress ref="progress2" num="30"></kyb-progress>
    </div>
    <div style="width:200px;height:90px;background:red;position:relative;margin:50px;">
      <kyb-progress ref="progress3" num="30"></kyb-progress>
    </div>
    <div
      style="width:100px;height:100px;background:red;position:relative;margin:50px;border-radius:50%"
    >
      <kyb-progress ref="progress4" num="30"></kyb-progress>
    </div>
    <div ref="p5" style="width:100px;height:100px;background:red;margin:50px;overflow:auto">
      <div>
        假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了
        假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了
        假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了
        假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了假期马上就要来了
        假期马上就要来了假期马上就要来了假期马上就要来了
      </div>
      <kyb-progress
        ref="progress5"
        num="30"
        v-if="showProgress"
        @destroy="hideProgress($event,'p5')"
      ></kyb-progress>
    </div>
    <q-btn @click="start" label="改变"></q-btn>
    <v-stage
      ref="stage"
      :config="stageSize"
      class="bg-grey-5"
      style="transform: rotateX(180deg)"
      @mousemove="mousemove"
      @mousedown="mousedown"
      @mouseup="mouseup"
    >
      <v-layer>
        <v-line :config="line"></v-line>
        <v-arc ref="arc" :config="arc"></v-arc>
      </v-layer>
    </v-stage>
  </div>
</template>
<style>
</style>
<script>
// import _ from 'underscore'
// import KTest from 'components/k-test'
import Konva from 'konva'

let d = {
  data: function() {
    return {
      progress1Num: '35',
      stageSize: {
        width: 300,
        height: 300
      },
      line: {
        points: [20, 20, 40, 40, 80, 180],
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 0,
        closed: true
      },
      arc: {
        x: 150,
        y: 150,
        innerRadius: 0,
        outerRadius: 70,
        angle: 250,
        fill: 'rgba(0,0,0,0.3)',
        stroke: 'black',
        rotation: 90,
        strokeWidth: 1
      },
      showProgress: false
    }
  },
  computed: {},
  mounted() {},
  methods: {
    hideProgress(event, name) {
      Object.assign(this.$refs[name].style, event)
    },
    start() {
      this.progress1Num = '27'
      // this.$refs.progress1.setPercent(Math.random() * 100)
      this.$refs.progress2.setPercent(Math.random() * 100)
      this.$refs.progress3.setPercent(Math.random() * 100)
      this.$refs.progress4.setPercent(Math.random() * 100)
      if (this.$refs.progress5) {
        this.$refs.progress5.setPercent(Math.random() * 100)
      }
      this.showProgress = Math.random() * 350 > 180

      let tween = new Konva.Tween({
        node: this.$refs.arc.getNode(),
        duration: 0.2,
        angle: Math.random() * 350,
        // easing: Konva.Easings.BackEaseOut,
        onFinish: function() {
          // writeMessage('tween finished!')
        }
      })
      tween.play()
    },
    mousemove(e) {
      if (!this.point) return
      this.arc.angle += e.evt.clientX - this.point.x
      this.arc.angle = this.arc.angle % 360
      console.log(e.evt.clientX - this.point.x, this.arc.angle)
    },
    mousedown(e) {
      console.log(e)
      this.point = { x: e.evt.clientX, y: e.evt.clientY }
    },
    mouseup(e) {
      console.log(e)
      this.point = null
    }
  }
}
export default d
</script>
