<template>
  <view 
    :class="[
      'd-flex flex-row flex-grow-1 justify-between align-center',
      'radius-base mb-3 overflow-hidden',
      border ? 'border-all-light-light-primary shadow-s p-2 pt-3 pb-3 ' : '' ,
    ]"
    :style="{ 
      //height: 'calc(100% - 20rpx)',
      width: 'calc(100% - 10rpx)',
    }"
    @click="$emit('click')"
  >
    <view class="d-flex flex-row w-100">
      <slot name="image">
        <Image 
          v-if="showImage"
          innerClass="flex-shrink-0"
          :width="wideImage ? '250' : '150'"
          :height="150"
          :radius="15"
          :src="image"
          mode="aspectFit"
        />
      </slot>
      <view :class="[
        'd-flex flex-col flex-one width-500',
        showImage ? 'ml-3' : '',
      ]">
        <text v-if="titlePrefix" :class="'size-ss color-primary text-lines-3'">{{ titlePrefix }}</text>
        <view class="d-flex flex-row">
          <text :class="[
            'color-primary size-base',
            (desc || title1) && !title2 ? 'text-lines-1' : 'text-lines-2',
            titleBox ? 'border-all-text' : '',
          ]">{{ title }}</text>
        </view> 
        <slot name="desc">
          <text :class="'size-s color-second text-lines-3 mt-2' + (tags ? 'text-lines-2' : '')">{{ desc }}</text>
        </slot>
        <RoundTags v-if="tags" :tags="tags" small />
      </view>
    </view>
    <slot name="right">
      <text class="color-primary-second-text size-ss">{{ right }}</text>
    </slot>
  </view>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import RoundTags from './RoundTags.vue';
import Image from '@/components/basic/Image.vue';
import AppCofig from '@/common/config/AppCofig';

defineProps({
  title: String,
  desc: String,
  right: String,
  image: String,
  titlePrefix: {
    type: String,
    default: '',
  },
  border: {
    type: Boolean,
    default: true,
  },
  titleBox: {
    type: Boolean,
    default: false,
  },
  showImage: {
    type: Boolean,
    default: true,
  },
  tags: {
    type: Array as PropType<string[]>,
    default: null
  },
  wideImage: {
    type: Boolean,
    default: false,
  },
  title1: {
    type: Boolean,
    default: false,
  },
  title2: {
    type: Boolean,
    default: false,
  },
})

defineOptions({
  options: {
    inheritAttrs: false,
    virtualHost: true,
  }
})
</script>