import Vue from 'vue'
import component from './index.vue'
​
const DownLoadNotification = Vue.extend(component)
​
const instances = [] // 实例缓存列表
​
export const notify = (options) => {
  let instance; // 单个实例
​
  options.onClose = function() { // 把删除当前实例的方法传入组件内
    removeNotify(instance.id)
  }
  options.onCloseAll = () => { // 把删除所有实例的方法传入组件内
    removeNotifyAll()
  }
​
  // 直接控制实例的data，而不是通过propsData传入
  instance = new DownLoadNotification({
    data: options,
  })
  instance.id = Date.now(); // 生成id
  instance.$mount(); // 挂载，生成dom节点
  document.body.appendChild(instance.$el) // 把dom节点添加到body全局
  instance.visible = true // 先挂载节点再显示节点里的内容，可以出现过渡动画，而不是一开始全部显示
​
  // 计算多个实例时的偏移量
  // 第一个不需要计算，把push放到循环下面，数组为空时不会循环，第二次开始则会进行计算
  let verticalOffset = 0
  instances.forEach((item) => {
    verticalOffset += item.$el.offsetHeight + 16 // 每个组件高度间隔16px
  })
​
  verticalOffset += 16 // 首次最下面的组件底部距离最底部也有16px的间隙
​
  instance.verticalOffset = verticalOffset // 计算出来的偏移量赋值到组件中data
​
  instances.push(instance) // 缓存实例
  return instance
}
​
// 删除单个组件实例
function removeNotify(id) {
  const index = instances.findIndex(item => item.id === id)
  index !== -1 && instances.splice(index, 1)
}
​
// 删除所有组件实例
function removeNotifyAll() {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close(); // 调用组件内的删除方法来同时删除实例和dom
  }
}

// 删除单个组件实例
function removeNotify(id) {
  let index = -1;
  const len = instances.length; // 未删除前数组总长度
  const instance = instances.filter((instance, i) => { // 获取保存当前删除的实例
    if (instance.id === id) {
      index = i; // 保存索引
      return true;
    }
    return false;
  })[0];
  instances.splice(index, 1); // 删除实例
​
  if (len <= 1) return // 只有一个实例时不需要重新计算位置
  const position = instance.position; // 获取实例定位字段
  const removedHeight = instance.$el.offsetHeight; // 获取实例高度
​
  for (let i = index; i < len - 1 ; i++) { // 从被删除的位置开始遍历
    if (instances[i].position === position) { // 修改的位置定位是否一致
      // 将后续元素的定位位置 减去 上一个删除的元素宽度 + 16px 的首次底部边距
      instances[i].$el.style[instance.verticalProperty] =
        parseInt(instances[i].$el.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
    }
  }
}

<template>
  <el-collapse-transition>
    <div v-if="visible" :class="['DownLoadNotification']" :style="positionStyle">
      <div class="header">
        <span>{{ fileName }}</span>
        <span>{{ fileSize }}</span>
      </div>
      <el-progress
        :percentage="downLoadProgress"
        :status="downStatus"
        :stroke-width="15"
      ></el-progress>
      <el-button @click="close" size="mini">关 闭</el-button>
    </div>
  </el-collapse-transition>
</template>
<script>
export default {
  data() {
    return {
      /* 自定义数据 */
      fileName: "",
      fileSize: "",
      downLoadProgress: 0,
      downStatus: "",
​
      /* 组件基础数据 */
      id: null, // 实例id
      visible: false, // 显示控制按钮
      position: "bottom-left", // 显示方位
      verticalOffset: 0, // 位置偏移量
      onClose: null, // js中传入的删除当前组件方法
      onCloseAll: null, // js中传入的删除所有组件方法
    };
  },
  computed: {
    // 默认纵向布局，定位为 左 或者 右 时边距为10px
    horizontalClass() {
      // 实例左偏移还是右偏移
      return this.position.indexOf("right") > -1 ? "right" : "left";
    },
    verticalProperty() {
      // 实例上还是下
      return /^top-/.test(this.position) ? "top" : "bottom";
    },
    positionStyle() {
      // 多个实例时的偏移量
      return {
        [this.verticalProperty]: `${this.verticalOffset}px`,
      };
    },
  },
  methods: {
    // 销毁当前组件
    close() {
      this.visible = false;
      this.$el.addEventListener("transitionend", this.destroyElement); // 添加事件，在过渡效果结束后再销毁组件
      this.onClose(); // 调用外面js传入组件的方法
    },
    // 销毁所有组件
    closeAll() {
      this.onCloseAll();
    },
    // 销毁组件方法
    destroyElement() {
      this.$el.removeEventListener("transitionend", this.destroyElement);
      this.$destroy(true);
    },
  },
};
</script>
<style lang="less" scoped>
.DownLoadNotification {
  width: 300px;
  height: 60px;
  background-color: #dcdfe6;
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 20px;
  .header {
    color: #606266;
    margin-bottom: 10px;
  }
}
.right {
  right: 10px;
}
.left {
  left: 10px;
}
</style>
​