面向函数编程：关于函数式组件、dialog的api化

showModal({
          prams:{ // param即传入组件的props,可传function、object、Nomal
            abc:this.abc,
            item:'xxxxxxxxxxxxs',
          },
          callback:(rsp)=>{
            console.log(rsp);
            if(rsp.ok) console.log('这是成功的回调')
          },
          onClose:(rsp)=>{
            console.log('关闭了弹窗')
          }
        })

import Vue from 'vue';
import { uuid } from '../index';
export function showDialog(elementOrClass, props, isUnique = false, destroyDelay = 0) {

  //现在生成一个具备唯一表示id的divElement by Mothpro
  let dialogContainer = document.createElement('div');
  let id = elementOrClass.name
    ? elementOrClass.name
    : elementOrClass.type && elementOrClass.type.name + '_wrapper';

  if (!isUnique) {
    id += '$' + uuid(8, 16);
  }
  // id = 'test';
  // let t = new Vue(document.getElementById(id));
  // t.$destroy();
  // console.log("----------------------------",t);
  // console.log(t.$delete);
  let removeNodeIfExist = (id) => {
    let domElement = document.getElementById(id);
    if (domElement) {
      //这个地方vue不需要销毁vNode节点，组件会自己销毁，勇辉告诉我的。。。。自动挡真牛逼！！ by Mothrpro
      // ReactDom.unmountComponentAtNode(document.getElementById(id));
      domElement.parentNode.removeChild(domElement);

      //这里element-ui的dialog会建立一个叫做v-modal的蒙层，我要在关闭组件的同时销毁他 by Mothpro
      let vModals = document.getElementsByClassName('v-modal')[0];
      if(vModals) vModals.parentNode.removeChild(vModals);
    }
  };
  removeNodeIfExist(id);
  dialogContainer.id = id;
  function handleClose() {
    if (destroyDelay == 0) {
      removeNodeIfExist(id);
    } else {
      setTimeout(() => {
        removeNodeIfExist(id);
      }, destroyDelay);
    }
  }

  let handleClosePropName = 'onClose';
  document.body.appendChild(dialogContainer);
  let com = document.getElementById(id);

  dialogContainer = document.createElement('div');
  let elementId = id + '_';
  dialogContainer.id = elementId;
  com.append(dialogContainer);


  let element = undefined;
  if (typeof elementOrClass == 'function') {
    //FIXME 这是showMoadl传入Class的特殊情况，在我以前有遇到，目前项目里面还没遇到，我也懒得做处理了，但是这里是个坑，留个mark By Mothpro
    //如果是传入了类名 那用props实例化这个类

    // if (props.afterClose) {
    //   //这边请看上面的跟afterClose有关的章节
    //   element = React.createElement(elementOrClass, {
    //     ...props,
    //     afterClose: handleClose,
    //   });
    // } else {
    //   element = React.createElement(elementOrClass, {
    //     ...props,
    //     onClose: handleClose,
    //   });
    // }
  } else {
    //如果传入了一个react element 那就给这个element加上onClose属性并显示
    element = elementOrClass;
  }
  // props = element.props; //这个props可能是传进来的props 也可能是传进来的已经实例化的对象的props 反正就是props
  // UserOnClose=props.onClose; //这个UserOnClose一定是外面定义的onClose来负责关闭后刷新页面等操作

  // element.props[handleClosePropName] = handleClose;
  // console.log(handleClosePropName);
  // ReactDom.render(element, document.getElementById(id));


  new Vue({
    render: (h) => h(element,{
      props:{
        ...props,
        onClose:()=>{
          props.onClose();
          handleClose();
        },

      },
    })
  }).$mount(document.getElementById(elementId));
}