<template>
  <div class="widget-card-wrapper" :class="`size-${props.widget.size}`">
    <div class="widget-card">
      <div class="widget-content">
        <component :is="widgetComponent" :data="props.widget.data" :size="props.widget.size" />
      </div>
    </div>
    <div class="label label-below">{{ 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}/index.vue`)
);

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

</script>

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

.widget-card-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--widget-card-padding, var(--icon-card-padding));
  box-sizing: border-box;
}

.widget-card {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  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: var(--icon-radius, #{$border-radius-small});
  box-shadow: $shadow-md;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(var(--widget-scale, 1));
  transform-origin: center;
}

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

.label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--icon-label-margin-top);
  transform: translateX(-50%);
  font-size: var(--widget-label-font-size);
  color: $color-text-primary;
  text-align: center;
  width: 100%;
  max-width: 100%;
  visibility: var(--widget-label-visibility, visible);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  flex-shrink: 0;
}

.label-below {
  padding: 0;
}
</style>
