<template>
  <!-- 组件：背景图显示盒子 -->
  <FlexView
    v-bind="$props"
    :flexShrink="0"
    :innerStyle="style" 
  >
    <slot />
  </FlexView>
</template>

<script lang="ts">
/**
 * 组件说明: 背景盒子，用于显示背景图片、颜色、渐变等。
 * 
 * @example
 * 显示背景图片:
 * <BackgroundBox
 *   width="fill"
 *   :height="85"
 *   backgroundImage="http://assets/images/footer/FooterBackground.png"
 *   backgroundFillType="fillW"
 *   backgroundSize="100%"
 *   backgroundPosition="top"
 * />
 * 
 * 显示渐变色:
 * <BackgroundBox
 *   width="fill"
 *   :height="85"
 *   color1="#111111"
 *   color2="#222222"
 *   gradientAngle="180"
 * />
 */
export default {}
</script>

<script setup lang="ts">
import FlexView, { type FlexProps } from '@/components/layout/FlexView.vue';
import { type ViewStyle } from '@/components/theme/ThemeDefine';
import { computed } from 'vue';
import { useBackgroundBoxStyleMaker, type BackgroundBoxProps } from './BackgroundBox';

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});

/**
 * 内容积木组件：背景盒子，
 */
const props = withDefaults(defineProps<BackgroundBoxProps & FlexProps>(), {
  color1: undefined,
  color2: undefined,
  radius: undefined,
  gradientAngle: undefined,
  backgroundImage: undefined,
  backgroundFillType: "fillW",
  backgroundSize: "100%",
  backgroundPosition: undefined,
  backgroundCutBorder: undefined,
  backgroundCutBorderSize: () => ([ 'auto' ]),
});

const { makeStyle } = useBackgroundBoxStyleMaker(props);

const style = computed(() => {
  const o : ViewStyle = {
    ...props.innerStyle,
    ...makeStyle(),
  }
  return o;
})
</script>

<style lang="scss">
</style>