import { mapState } from 'vuex'
export const mixins = {
  data: function () {
    return {
      notify: {}, // 用来维护下载文件进度弹框对象
      downLoading: false
    }
  },
  computed: {
    ...mapState({
      progressList: state => state.downLoadProgress.progressList
    })
  },
  watch: {
    // 监听进度列表
    progressList: {
      handler(n) {
        const data = JSON.parse(JSON.stringify(n))
        console.log('Mixin', data)
        data.forEach(item => {
          const domList = [...document.getElementsByClassName(item.path)]
          if (domList.find(i => i.className === item.path)) {
            // 如果页面已经有该进度对象的弹框，则更新它的进度progress
            if (item.progress) {
              // if (this.downLoadingNumber >= 90) {
              //   this.downLoadingNumber = 99
              // } else {
              //   this.downLoadingNumber += 1
              // }
              domList.find(i => i.className === item.path).innerHTML = ''
              // this.downLoadingNumber + '%'
            }
            if (item.progress === null) {
              // 此处容错处理，如果后端传输文件流报错，删除当前进度对象
              this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path)
              this.$notify.error({
                title: '错误',
                message: '文件下载失败！'
              })
            }
          } else {
            if (!this.downLoading) {
              // 如果页面中没有该进度对象所对应的弹框，页面新建弹框，并在notify中加入该弹框对象，属性名为该进度对象的path(上文可知path是唯一的)，属性值为$notify(element ui中的通知组件)弹框对象
              this.notify[item.path] = this.$notify.success({
                // title: 'info',
                dangerouslyUseHTMLString: true,
                customClass: 'progress-notify',
                message: `<div style="width: 100px;">正在下载<span class="${item.path}" style="float: right"></span></div>`, // 显示下载百分比，类名为进度对象的path(便于后面更新进度百分比)
                duration: 5000,
                onClose: () => {
                  this.downLoading = true
                }
              })
            }
          }

          if (item.progress == 100) {
            // 如果下载进度到了100%，关闭该弹框，并删除notify中维护的弹框对象
            this.notify[item.path].close()
            this.downLoading = false
            // delete this.notify[item.path] 上面的close()事件是异步的，这里直接删除会报错，利用setTimeout，将该操作加入异步队列
            setTimeout(() => {
              delete this.notify[item.path]
            }, 1000)
            this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path) // 删除caseInformation中state的progressList中的进度对象
          }
        })
      },
      deep: true
    }
  },
  methods: {
    onClose() {
      console.log('关闭')
    }
  }
}