<template>
  <div class="widget-card" :class="`size-${props.widget.size}`">
    <div class="widget-content">
      <component :is="widgetComponent" :data="props.widget.data" />
    </div>
    <div class="label">{{ label }}</div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, computed } from 'vue';

// 定义组件属性结构
interface Widget {
  id: string;
  component: string;
  size: '1x1' | '1x2' | '2x1' | '2x2' | '2x4';
  data?: any;
}

const props = defineProps<{
  widget: Widget;
}>();

// 根据名称动态加载组件
const widgetComponent = defineAsyncComponent(() => 
  import(`@/components/widgets/${props.widget.component}.vue`)
);

// 从组件名称提取展示标签
const label = computed(() => {
  return props.widget.component.replace('Widget', '');
});

</script>

<style lang="scss" scoped>
@import '@/styles/tokens.scss';

.widget-card {
  width: 100%;
  height: 100%;
  background-color: $color-surface-1;
  backdrop-filter: blur($backdrop-filter-blur) saturate($backdrop-filter-saturation);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: $border-radius-large;
  box-shadow: $shadow-md;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // 根据尺寸类名控制尺寸
  &.size-1x1 { grid-column: span 1; grid-row: span 1; }
  &.size-1x2 { grid-column: span 1; grid-row: span 2; }
  &.size-2x1 { grid-column: span 2; grid-row: span 1; }
  &.size-2x2 { grid-column: span 2; grid-row: span 2; }
  &.size-2x4 { grid-column: span 2; grid-row: span 4; }
}

.widget-content {
  flex-grow: 1;
  padding: var(--widget-content-padding);
}

.label {
  font-size: var(--widget-label-font-size);
  color: $color-text-primary;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--widget-label-padding-y) 0;
  flex-shrink: 0;
}
</style>
