<template>
  <div :style="containerStyle">
    <Container v-bind="element.container">
      <component :is="component" v-bind="element.props" :width="element.container.props.width" :height="element.container.props.height"/>
    </Container>
  </div>
</template>

<script setup lang="ts">
import type { CustomElement } from '#/project';
import { defineProps, ref, defineAsyncComponent, CSSProperties  } from 'vue';
import { asyncComponentAll, Container } from '@shalu/dashboard-ui';

const props = defineProps<{
  element: CustomElement;
}>();
const component = defineAsyncComponent(asyncComponentAll[props.element.componentType  as keyof typeof asyncComponentAll]);
const containerStyle = ref<CSSProperties>({
  width: `${props.element.container.props.width}px`,
  height: `${props.element.container.props.height}px`,
  position: 'absolute',
  left: `${props.element.container.props.x}px`,
  top: `${props.element.container.props.y}px`,
  zIndex: props.element.zIndex,
});
</script>

<style scoped>

</style>