<template>
  <common-drawer
    v-if="showModal"
    :title="nodeInfo?.label || '弹窗'"
    :size="'50%'"
    @close-dialog="closeDialog"
    @confirm-dialog="confirmDialog"
  >
    <template v-if="nodeName">
      <component
        :is="currentComponent"
        v-if="nodeName in computedComponents"
        :target-node="targetNode"
      ></component>
    </template>
  </common-drawer>
</template>

<script setup>
import { ref, computed, defineProps, watch } from 'vue';

const emits = defineEmits(['closeDialog']);
// 动态panel
const props = defineProps({
  computedComponents: {
    type: Object,
    default: () => {}
  },
  targetNode: {
    type: Object,
    default: () => {}
  },
  showModal: {
    type: Boolean,
    default: () => false
  }
});
// 弹窗接入
const nodeName = ref('');
const currentComponent = computed(() => {
  return props.computedComponents[nodeName.value];
});

const nodeInfo = ref(null);

watch(props.targetNode, (data) => {
  nodeInfo.value = data.cell.getData();
  nodeName.value = nodeInfo.value?.name;
});

function closeDialog() {
  // showModal.value = false;
  nodeName.value = '';
  nodeInfo.value = null;
  emits('closeDialog');
}

function confirmDialog() {}
</script>

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