<template>
  <section class="kf-free-panel" @mousedown="$event.stopPropagation()" >
    <component v-for="(widget,index) in widgetConfig" :key="widget.name + index " :is="widget.component" :label="widget.label" :config="widget.data" :confData="confData">
    </component>
  </section>
</template>

<script setup>
import { onMounted, toRefs, watch, ref } from "vue";
import { initWidgetConfig } from "./index.js";

const props = defineProps({
  confData: {
    type: Object,
    default: () => { }
  }
});

const { confData } = toRefs(props);

let widgetConfig = ref([]);

onMounted(() => {
  // console.log(confData.value, 'conf data');
  widgetConfig.value = initWidgetConfig(confData.value.data, confData.value.model);
  console.log(widgetConfig.value,"====aa");
});

</script>

<style lang="scss">
@import "@/styles/panel/index.scss";

.kf-free-panel {
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 8px;
}
</style>
