SOURCE

import {nextTick, watch, ref} from 'vue';
import {ElLoading, ElEmpty} from 'element-plus';

export default function useWithComponentHook(Component, option = {defaultLoading: true, empty: false}) {
  const {empty = false, defaultLoading = true} = option;
  const loading = ref(defaultLoading);
  const componentRef = ref(null);
  let loadingInstance = null;

  watch(
    () => loading.value,
    async val => {
      await nextTick();
      if (!loadingInstance && componentRef.value) {
        loadingInstance = ElLoading.service({
          target: componentRef.value,
          fullscreen: false,
          text: '加载中...',
          background: 'rgba(255, 255, 255, 0.5)'
        });
      }
      loadingInstance.visible.value = val;
    },
    {immediate: defaultLoading, deep: true}
  );

  return {
    WrappedComponent: (props, context) => {
      return (
        <div class="is-wrapped-component" ref={componentRef}>
          <Component {...context.attrs} v-slots={context.slots}></Component>
          {!loading.value && <ElEmpty description="暂无数据" />}
        </div>
      );
    },
    loading
  };
}


// .is-wrapped-component {
//   .el-empty {
//     position: absolute;
//     inset: 0;
//     background: #fff;
//   }
// }