<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 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--icon-card-padding);

  // 鏍规嵁灏哄绫诲悕鎺у埗灏哄
  &.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; }

  &.size-1x1 {
    align-items: center;
    justify-content: center;
  }
}

.widget-card {
  width: 100%;
  flex: 1 1 auto;
  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: $border-radius-small;
  box-shadow: $shadow-md;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: var(--icon-label-margin-top);
}

.widget-card-wrapper.size-1x1 .widget-card {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
}

.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: normal;
  word-break: break-word;
  line-height: 1.2;
  flex-shrink: 0;
}

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