<template>
  <div class="material-pull-hook" :class="classes">
    <div class="pull-hook-progress">
      <div class="material-progress-circular">
        <svg class="progress-circular" :class="{ 'progress-circular--indeterminate': state >= 3}">
          <circle class="progress-circular__background" :class="{ 'progress-circular--indeterminate__background': state >= 3}"></circle>
          <circle class="progress-circular__secondary" style="display: none;" :class="{ 'progress-circular--indeterminate__secondary': state >= 3}"></circle>
          <circle class="progress-circular__primary" :class="{ 'progress-circular--indeterminate__primary': state >= 3}"></circle>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
const CLASS_MAP = {
  'pull-down': 'pull-down-content',
  'pull-up': 'pull-up-content'
}

/**
 * material-pull-hook组件只负责处理svg动画，该元素的transform则由Pull类处理
 */
export default {
  props: {
    state: {
      type: Number
    },
    translate: {
      type: Number
    },
    type: String
  },
  computed: {
    classes () {
      return CLASS_MAP[this.type]
    }
  },
  data () {
    return {
      turn: null,
      svg: null,
      background: null,
      primary: null,
      secondary: null,
      selfTranslate: 0
    }
  },
  mounted () {
    this.turn = this.$el.querySelector('.material-progress-circular')
    this.svg = this.$el.querySelector('.progress-circular')
    this.background = this.$el.querySelector('.progress-circular__background')
    this.primary = this.$el.querySelector('.progress-circular__primary')
    this.secondary = this.$el.querySelector('.progress-circular__secondary')
  },
  watch: {
    state () {
      this.handleProgress()
    },
    translate (val) {
      this.handleProgress()
    }
  },
  methods: {
    handleProgress () {
      if (this.state === 1 || this.state === 2) {
        this.$el.style.webkitTransition = 'none'
        let rate = Math.abs(this.translate) / 84
        let dash = Math.floor(rate * 252)
        this.turn.style.transform = `rotate(${rate}turn)`

        if (dash >= 252) {
          dash = 252
        }

        this.primary.style.strokeDasharray = `${dash}%, 251.32%`
        this.primary.style.webkitTransition = 'none'
      } else if (this.state === 3 || this.state === 4) {
        this.turn.style.tranform = `rotate(1turn)`
      } else {
        this.primary.style.strokeDasharray = `0%, 251.32%`
      }
    }
  }
}
</script>
