<template>
  <Touchable
    touchable
    v-bind="props"
    :flexShrink="0"
    :innerStyle="{ borderRadius: theme.resolveThemeSize(radius), overflow: 'hidden', }"
    :width="width"
    @click="$emit('click')"
  >
    <Image 
      :src="src" 
      :width="imageWidth || '100%'"
      :height="imageHeight"
      :radius="imageRadius"
      :mode="imageHeight ? 'aspectFill' : 'widthFix'"
      :defaultImage="defaultImage"
    />
    <slot name="desc">
      <FlexCol :padding="15">
        <IconTextBlock
          :title="title"
          :desc="desc"
          :extra="extra"
          :titleProps="titleProps"
          :descProps="descProps"
          :extraProps="extraProps"
          :extraMpSlotState="Boolean($slots.extra)"
        >
          <template v-if="$slots.extra" #extra>
            <slot name="extra" />
          </template>
        </IconTextBlock>
        <slot name="footer" />
      </FlexCol>
    </slot>
  </Touchable>
</template>

<script lang="ts">
/**
 * 组件说明：图片块2。
 * 
 * 该组件可以用于显示图片，支持在图片下方显示描述。
 *
 * 该组件的默认高度为 200rpx。
 */
export default {}
</script>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import Image from '../../basic/Image.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import type { FlexProps } from '../../layout/FlexView.vue';
import IconTextBlock from './IconTextBlock.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import type { TextProps } from '@/components/basic/Text.vue';

export interface ImageBlock2Props extends Partial<FlexProps> {
  /**
   * 宽度。
   */
  width?: string | number;
  /**
   * 高度。
   */
  imageHeight?: string | number;
  /**
   * 图片宽度。
   */
  imageWidth?: string | number;
  /**
   * 图片的路径。
   */
  src?: string;
  /**
   * 图片的圆角。
   */
  imageRadius?: string | number;
  /**
   * 图片的默认路径。
   */
  defaultImage?: string;
  /**
   * 图片下方显示标题。
   */
  title?: string;
  /**
   * 图片下方显示标题属性。
   */
  titleProps?: TextProps;
  /**
   * 图片下方显示描述。
   */
  desc?: string;
  /**
   * 图片下方显示描述属性。
   */
  descProps?: TextProps;
  /**
   * 图片下方显示额外信息。
   */
  extra?: string;
  /**
   * 图片下方显示额外信息属性。
   */
  extraProps?: TextProps;
}

const theme = useTheme();
const props = withDefaults(defineProps<ImageBlock2Props>(), {
  width: 400,
  imageRadius: 0,
  direction: 'column',
  backgroundColor: "white",
  overflow: "hidden",
})

defineEmits([	
  "click"	
])
</script>