import Vue from 'vue'
import { Progress } from 'element-ui'
const ProgressIcon = Vue.extend(Progress)
export default {
  update (el, binding, vnode) {
    const dom = document.getElementById('containerBox')
    if (binding.value.isLoading) {
      Vue.nextTick(() => {
        if (!document.getElementById('customLoadingMask')) {
          // 创建一个遮罩dom
          const loadingMask = document.createElement('div')
          loadingMask.setAttribute('id', 'customLoadingMask')
          loadingMask.style.width = dom.offsetWidth + 'px'
          dom.appendChild(loadingMask)
          // 引入进度条组件
          const progress = new ProgressIcon({
            el: document.createElement('div'),
            props: { percentage: 0 }
          })
          progress.type = 'circle'
          progress.color = 'rgba(215, 0, 18, .8)'
          progress.width = 150
          progress.height = 150
          // 用一个变量接住copy实例
          loadingMask.instance = progress
          loadingMask.appendChild(progress.$el)
        }

        const customLoadingMask = document.getElementById('customLoadingMask')

        // 动态设置进度条数值
        customLoadingMask.instance.percentage = binding.value.percentage
        // customLoadingMask.instance.circlePathStyle.transition = 'stroke-dasharray 3s ease 0s, stroke 3s ease'
      })
    } else {
      if (document.getElementById('customLoadingMask')) {
        const customLoadingMask = document.getElementById('customLoadingMask')
        dom.removeChild(customLoadingMask)
      }
    }
  }
}