<template>
  <view 
    :class="[
      'position-relative',
      'd-flex flex-col shadow-base radius-l bg-base p-2 mb-2 overflow-hidden',
      'border-all-light-light-primary',
      classNames,
      fixSize ? 'flex-shrink-0' : ' flex-grow-1',
    ]"
    
    :style="{ 
      //height: 'calc(100% - 20rpx)',
      width: fixSize ? width : 'calc(100% - 10rpx)',
    }"
    @click="$emit('click')"
  >
    <NaImage 
      v-if="image" 
      width="100%"
      :height="320"
      :radius="15"
      :src="image" 
      mode="aspectFit" 
    />
    <image 
      v-if="videoMark" 
      class="width-60 mr-2 video-mark" 
      :src="PlayVideo" mode="widthFix" 
    />
    <view v-if="userName" class="d-flex flex-row align-center mt-2">
      <image class="width-60 mr-2" :src="userHead" mode="widthFix" />
      <text class="size-s">{{ userName }}</text>
    </view>
    <text v-if="titlePrefix" :class="'size-ss color-primary text-lines-3'">{{ titlePrefix }}</text>
    <view class="d-flex flex-row align-center">
      <text 
        :class="[
          `color-${titleColor}`,
          title1 || desc ? 'text-lines-1' : 'text-lines-2',
          'mt-2',
          (titleBox ? ' border-all-text' : '')
        ]"
      >
        {{ title }}
      </text>
    </view>
    <text v-if="badge" class="position-absolute color-primary-text size-s bg-light-primary radius-base p-1 radius-s text-lines-1 r-0 t-0 mr-3 mt-3">{{ badge }}</text>
    <text v-if="desc" class="color-second text-lines-2 mt-2">{{ desc }}</text>
    <view v-if="likes !== undefined && comment !== undefined" class="d-flex flex-row mt-2">
      <image class="width-40 mr-2" :src="IconHeart" mode="widthFix" />
      <text class="size-s mr-3">{{ likes }}</text>
      <image class="width-40 mr-2" :src="IconChat" mode="widthFix" />
      <text class="size-s">{{ comment }}</text>
    </view>
    <RoundTags v-if="tags" :tags="tags" small />
    <view v-if="bottomTime" class="d-flex flex-row mt-2">
      <image class="width-40 mr-2" :src="IconTime" mode="widthFix" />
      <text class="size-s mr-3">{{ bottomTime }}</text>
    </view>
    <view v-if="bottomLocate" class="d-flex flex-row justify-between mt-2">
      <view class="d-flex flex-row align-center">
        <image class="width-40 mr-2" :src="IconLocation" mode="widthFix" />
        <text class="size-s">{{ bottomLocate }}</text>
      </view>
      <view class="d-flex flex-row align-center">
        <image class="width-40 mr-2" :src="IconStar" mode="widthFix" />
        <text class="size-s">{{ bottomScore }}</text>
      </view>
    </view> 
  </view>
</template>

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

const IconHeart = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/IconHeart.png';
const IconChat = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/IconChat.png';
const IconLocation = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/IconLocation.png';
const IconTime = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/IconTime.png';
const IconStar = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/IconStar.png';
const PlayVideo = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/PlayVideo.png';

defineProps({
  classNames: {
    type: String,
  },
  title: {
    type: String,
  },
  titlePrefix: {
    type: String,
    default: '',
  },
  titleColor: {
    type: String,
    default: 'primary',
  },
  titleBox: {
    type: Boolean,
    default: false,
  },
  title1: {
    type: Boolean,
    default: false,
  },
  fixSize: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '',
  },
  badge: {
    type: String,
    default: '',
  },
  tags: {
    type: Array as PropType<string[]>,
    default: [],
  },
  videoMark: {
    type: Boolean,
    default: false,
  },
  desc: {
    type: String,
  },
  image: {
    type: String,
  },
  likes: {
    type: Number,
  },
  comment: {
    type: Number,
  },
  userHead: {
    type: String,
  },
  userName: {
    type: String,
  },
  bottomLocate: {
    type: String,
  },
  bottomScore: {
    type: String,
  },
  bottomTime: {
    type: String,
  },
})

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

<style scoped>
.video-mark {
  position: absolute;
  left: calc(50% - 20rpx);
  top: 145rpx
}
</style>