<template>
  <component
    v-for="(item,key) in components"
    v-bind="item.options"
    :is="item.name"
    :unique="key"
    :key="key"
    @destroy-popup="close(key)"
  ></component>
</template>

<script lang="ts">
import components from "../components";

import {PopupExportComponent } from '../const';

export default <LibMixins>{
  name: "popup-export",
  data() {
    return {
      components: {} as PopupExportComponents
    };
  },
  noUniqueOptions: {},
  provide(): any {
    return {
      destroyPopup: (name: string) => {
        this.close(name);
      }
    };
  },
  methods: {
    // 坚定是否打开

    // 打开弹窗
    open:function (name: PopupExportComponent, options?: Record<string, any>): string {

      let useId: string;
      // 鉴定是否唯一
      if (!this.$options.noUniqueOptions[name]) {
        useId = name;
      } else {
        useId = name + '-' + new Date().getTime() + '-' + Math.ceil(Math.random() * 10000);
      }
      if (this.components[useId]) {
        this.components[useId].options = options;
      } else {
        this.components[useId] = {
          name,
          options
        };
      }
      return useId;
    },
    // 关闭弹窗
    close(name: string) {
      if (this.components[name]) {
        delete this.components[name];
      }
    }
  },
  components
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
