<template>
  <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :class="$attrs">
    <rect :width="width" :height="height" :rx="props.roundCorner" fill="#222222" />
  </svg>
  <Teleport to="#ComponentCapabilities" v-if="selectecComponentID === props.componentId && !!slot.default">
    <slot></slot>
  </Teleport>
</template>

<script lang="ts" setup>
import { ref, computed, inject } from "vue";
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";

export interface Props {
  size?: number;
  width?: number;
  height?: number;
  roundCorner?: number;
  componentId?: string;
}

const slot = defineSlots();
const props = withDefaults(defineProps<Props>(), getDefaultProps());
const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));

// 计算实际宽高
const width = computed(() => props.width * props.size);
const height = computed(() => props.height * props.size);
</script>

<script lang="ts">
export function getDefaultProps(): Props {
  return {
    size: 1,
    width: 200,
    height: 200,
    roundCorner: 20,
  };
}
</script>

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