<template>
  <component :is="getModuleComponent(position, version)" :style="style" :title="title">
    <slot></slot>
  </component>
</template>
<script lang="ts" setup>
  import ModuleLeft from './moduleLeft.vue';
  import ModuleRight from './moduleRight.vue';
  import ModuleBottom from './moduleBottom.vue';
  import { computed } from 'vue';

  const props = withDefaults(
    defineProps<{
      title?: string;
      position?: string;
      size?: string;
      version?: string;
    }>(),
    {
      title: '',
      position: '',
      version: '',
      size: '',
    }
  );

  const style = computed(() => {
    return props.size + props.position;
  });

  // 根据配置里的定位判断应该使用哪个module组件
  function getModuleComponent(position, version) {
    if (version === 'original') {
      return ModuleLeft; // TODO：改为返回旧版的module组件
    }
    if (position.includes('left:0')) {
      return ModuleLeft;
    }
    if (position.includes('right:0')) {
      return ModuleRight;
    }
    if (position.includes('bottom:0')) {
      return ModuleBottom;
    }
    return ModuleLeft; // TODO：改为返回旧版的module组件
  }
</script>
