<template>
  <!-- 组件：背景图显示盒子 -->
  <FlexView
    v-bind="$props"
    center
    :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 { useTheme, type ViewStyle } from '@/components/theme/ThemeDefine';
import { solveUrl } from '@/components/theme/ThemeTools';
import { computed, type PropType } from 'vue';

export interface BackgroundBoxProps extends FlexProps {
  /**
   * 背景颜色（1）。
   * 
   * 格式：字符串格式或主题中定义的颜色预设。
   */
  color1?: string;
  /**
   * 背景颜色（2）。
   * 
   * 格式：字符串格式或主题中定义的颜色预设。
   */
  color2?: string;
  /**
   * 圆角。
   */
  radius?: string | number;
  /**
   * 背景渐变角度。
   * 只有 color1 和 color2 都定义时有效。
   *
   * 格式：角度（0-360）。
   */
  gradientAngle?: number;
  /**
   * 背景图片。
   */
  backgroundImage?: string;
  /**
   * 背景填充方式。
   *
   * 格式：
   * - fillW：横向填充，高度变化。
   * - fillH：纵向填充，宽度变化。
   * - none：不填充。
   */
  backgroundFillType?: 'none'|'fillH'|'fillW';
  /**
   * 背景填充大小。
   */
  backgroundSize?: string;
  /**
   * 背景填充位置。
   */
  backgroundPosition?: string;
  /**
   * 背景图片九宫格裁剪大小。
   *
   * 格式：
   * - 数组：[ top, right, bottom, left ]
   */
  backgroundCutBorder?: Array<number|string>;
  /**
   * 背景图片九宫格渲染大小。
   *
   * 格式：
   * - 数组：[ top, right, bottom, left ]
   */
  backgroundCutBorderSize?: Array<number|string>;
}

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

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

const theme = useTheme();

const style = computed(() => {
  const o : ViewStyle = {
    ...props.innerStyle,
  }
  if (props.radius) {
    o.borderRadius = theme.resolveThemeSize(props.radius);
  }
  if (props.color1 !== undefined && props.color2 !== undefined) {
    o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${theme.resolveThemeColor(props.color1)}, ${theme.resolveThemeColor(props.color2)})`;

  } else if (props.backgroundImage) {
    const b = props.backgroundCutBorder;
    const s = props.backgroundCutBorderSize;
    if (b) {
      o.borderImageSource = solveUrl(props.backgroundImage);
      o.borderImageSlice = `${b[0]} ${b[1]} ${b[2]} ${b[3]} fill`;
      o.borderImageWidth = `${theme.resolveSize(s[0])} ${theme.resolveSize(s[1])} ${theme.resolveSize(s[2])} ${theme.resolveSize(s[3])}`;
      o.borderImageRepeat = 'stretch';
    } else {
      o.backgroundImage = solveUrl(props.backgroundImage);
      o.backgroundPosition = props.backgroundPosition;
      o.backgroundRepeat = "no-repeat";
      switch (props.backgroundFillType) {
        case 'fillW':
          o.backgroundSize = `${props.backgroundSize} auto`;
          break;
        case 'fillH':
          o.backgroundSize = `auto ${props.backgroundSize}`;
          break;
        case 'none':
          o.backgroundSize = `${props.backgroundSize}`;
          break;
      }
    }
  } else if (props.color1) {
    o.backgroundColor = theme.resolveThemeColor(props.color1);
  } else if (props.color2) {
    o.backgroundColor = theme.resolveThemeColor(props.color2);
  }
  return o;
})
</script>

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