<template>
  <FlexView direction="column">
    <BaseBox 
      v-for="i of rows"
      v-bind="props"
      :key="i"
      :inner-style="{
        ...(i === rows ? themeStyles.skeletonParagraphLast.value : themeStyles.skeletonParagraph.value),
        ...props.innerStyle,
      }"
    />
  </FlexView>
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import { DynamicSize } from '@/components/theme/ThemeTools';
import BaseBox, { type SleletonBaseBoxProps } from './SkeletonBaseBox.vue';
import FlexView from '@/components/layout/FlexView.vue';

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  skeletonParagraph: {
    borderRadius: DynamicSize('SkeletonParagraphBorderRadius', 10),
    width: DynamicSize('SkeletonParagraphWidth', '100%'),
    height: DynamicSize('SkeletonParagraphHeight', 32),
    marginBottom: DynamicSize('SkeletonParagraphMarginBottom', 15),
  },
  skeletonParagraphLast: {
    borderRadius: DynamicSize('SkeletonParagraphLastBorderRadius', 10),
    width: DynamicSize('SkeletonParagraphLastWidth', '60%'),
    height: DynamicSize('SkeletonParagraphLastHeight', 32),
    marginBottom: DynamicSize('SkeletonParagraphMarginBottom', 0),
  },
});

/**
 * 段落占位组件
 */
export interface SkeletonParagraphProps extends SleletonBaseBoxProps {
  /**
   * 设置段落占位图的行数
   * @default 4
   */
  rows?: number;
}

const props = withDefaults(defineProps<SkeletonParagraphProps>(), {
  rows: 4,
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
</script>
