<script setup lang="ts">
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import type { IconProps } from '@/components/basic/Icon.vue';
import type { TextProps } from '@/components/basic/Text.vue';
import type { PropType } from 'vue';
import type { FlexProps } from '@/components/layout/FlexView.vue';

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
defineProps({
  /**
   * 图标名称
   */
  icon: {
    type: String,
    default: '',
  },
  /**
   * 图标属性
   */
  iconProps: {
    type: Object as PropType<IconProps>,
    default: () => ({
      color: 'text.content',
      size: 60,
    }),
  },
  /**
   * 标题
   */
  title: {
    type: [String,Number],
    default: '',
  },
  /**
   * 描述
   */
  desc: {
    type: [String,Number],
    default: '',
  },
  /**
   * 额外信息
   */
  extra: {
    type: [String,Number],
    default: '',
  },
  extraMpSlotState: {
    type: Boolean,
    default: true,
  },
  /**
   * 标题文字属性
   */
  titleProps: {
    type: Object as PropType<TextProps>,
  },
  /**
   * 描述文字属性
   */
  descProps: {
    type: Object as PropType<TextProps>,
  },
  /**
   * 额外信息文字属性
   */ 
  extraProps: {
    type: Object as PropType<TextProps>,
  },  
  /**
   * 卡片属性
   */
  viewProps: {
    type: Object as PropType<FlexProps>,
  },
})
</script>

<template>
  <FlexRow :gap="20" align="center" justify="space-between" v-bind="viewProps">
    <FlexRow :gap="20" align="center" justify="space-between">
      <Icon v-if="icon" :name="icon" v-bind="iconProps" />
      <FlexCol>
        <Text fontConfig="subTitle" :text="title" v-bind="titleProps" />
        <Text fontConfig="subText" :text="desc" v-bind="descProps" />
      </FlexCol>
    </FlexRow>
    <!-- #ifndef MP -->
    <slot name="extra">
      <FlexRow :flexShrink="0">
        <Text fontConfig="subText" :text="extra" v-bind="extraProps" />
      </FlexRow>
    </slot>
    <!-- #endif -->
    <!-- #ifdef MP -->
    <slot v-if="extraMpSlotState" name="extra">
      <FlexRow :flexShrink="0">
        <Text fontConfig="subText" :text="extra" v-bind="extraProps" />
      </FlexRow>
    </slot>
    <FlexRow v-else :flexShrink="0">
      <Text fontConfig="subText" :text="extra" v-bind="extraProps" />
    </FlexRow>
    <!-- #endif -->

  </FlexRow>
</template>