<script setup lang="ts">
import { computed } from 'vue';
import Icon, { type IconProps } from '../basic/Icon.vue';
import Image, { type ImageProps } from '../basic/Image.vue';
import Text from '../basic/Text.vue';
import FlexCol from '../layout/FlexCol.vue';
import FlexRow from '../layout/FlexRow.vue';
import BackgroundBox from './block/BackgroundBox.vue';
import Touchable from '../feedback/Touchable.vue';
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
import type { FlexProps } from '../layout/FlexView.vue';
import IconTextBlock from './block/IconTextBlock.vue';

const themeContext = useTheme();
const props = withDefaults(defineProps<{
  /**
   * 卡片标题
   */
  title?: string;
  /**
   * 卡片描述
   */
  desc?: string;
  /**
   * 卡片标题额外内容
   */
  extra?: string;
  /**
   * 卡片图标
   */
  icon?: string;
  /**
   * 卡片图标属性
   */
  iconProps?: IconProps;
  /**
   * 卡片圆角
   * @default 20
   */
  radius?: number;
  /**
   * 卡片背景颜色
   * @default 'white'
   */
  backgroundColor?: string;
  /**
   * 卡片视图属性
   */
  viewProps?: FlexProps;

  /**
   * 卡片内容
   */
  content?: string;

  /**
   * 卡片图片
   */
  image?: string;
  /**
   * 卡片图片属性
   */
  imageProps?: ImageProps;
  /**
   * 卡片图片高度
   * @default 320
   */
  imageHeight?: number;
  /**
   * 卡片图片标题
   */
  imageTitle?: number;
  /**
   * 卡片图片描述
   */
  imageDesc?: string;
  /**
   * 卡片图片额外内容
   */
  imageExtra?: string;
  /**
   * 卡片图片信息位置
   * * over 图片底部渐变显示
   * * bottom 图片下方单独显示
   * @default 'over'
   */
  imageInfoPosition?: 'over' | 'bottom';
}>(), {
  radius: () => propGetThemeVar('CardRadius', 15),
  imageHeight: () => propGetThemeVar('CardImageDefaultHeight', 320),
  imageInfoPosition: () => propGetThemeVar('CardImageInfoPosition', 'over'),
  backgroundColor: () => propGetThemeVar('CardBackgroundColor', 'white'),
});
const emit = defineEmits([ 'click' ]);
const padding = computed(() => themeContext.getVar('CardTitlePadding', 20));

const hasImageInfo = computed(() => props.imageDesc || props.imageExtra || props.imageTitle);
const hasTitle = computed(() => props.title || props.desc || props.extra);

</script>

<template>
  <Touchable 
    position="relative"
    direction="column"
    :backgroundColor="backgroundColor"
    :radius="radius"
    shadow="default"
    overflow="hidden"
    v-bind="viewProps"
    @click="emit('click')"
  >
    <slot name="prefix" />

    <!-- 标题区域 -->
    <IconTextBlock
      v-if="hasTitle" :padding="padding" :gap="20"
      :icon="icon"
      :iconProps="iconProps"
      :title="title"
      :desc="desc"
      :extra="extra"
    />
    <!-- 图片区域 -->
    <Image 
      v-if="image" 
      :src="image"
      mode="aspectFill"
      width="100%"
      :height="imageHeight"
      v-bind="imageProps"
    >
      <!-- 图片标题区域 -->
      <BackgroundBox 
        v-if="hasImageInfo && imageInfoPosition === 'over'"
        direction="row"
        align="center" 
        justify="space-between"
        position="absolute"
        color2="background.mask"
        color1="transparent"
        :zIndex="2"
        :bottom="0"
        :left="0"
        :right="0"
        :padding="padding"
      >
        <FlexCol>
          <Text fontConfig="subTitle" color="text.light" :text="imageTitle" />
          <Text fontConfig="subText" color="text.light" :text="imageDesc" />
        </FlexCol>
        <Text fontConfig="subText" color="text.light" :text="imageExtra" />
      </BackgroundBox>
    </Image>
    <!-- 底部区域 -->
    <FlexCol>
      <IconTextBlock 
        v-if="hasImageInfo && imageInfoPosition === 'bottom'"
        :padding="padding"
        :title="imageTitle"
        :desc="imageDesc"
        :extra="imageExtra"
      />
      <!-- 内容区域 -->
      <FlexCol v-if="content || $slots.default" :padding="padding">
        <slot>
          <Text fontConfig="content" :text="content" />
        </slot>
      </FlexCol>
    </FlexCol>

    <slot name="suffix" />
  </Touchable>
</template>