<template>
	<div class="report-card" :class="{ 'is-url': isUrl, 'is-sketch': isSketch }">
		<div class="report-card-header">
			<span v-if="!isUrl && !isSketch">{{ report.title }}</span>
			<div v-else class="web-sources flex align-center">
				<span>{{ report.title }}</span>
				<img src="@/assets/images/link.png" class="link-icon" />
			</div>
		</div>
		<div class="report-card-content">
			<span v-if="!isUrl && !isSketch">{{ report.content || 'markdown.md' }}</span>
			<span v-else>{{ report.content }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	// const props = defineProps<{
	// 	title: string
	// 	isUrl?: boolean
	// }>()

	const props = withDefaults(
		defineProps<{
			title?: string
			content?: string
			isUrl?: boolean
			isSketch?: boolean
			report: {
				title: ''
				content: ''
			}
		}>(),
		{
			isUrl: false,
			title: '',
			content: '',
			isSketch: false
		}
	)
</script>

<style lang="less" scoped>
	.report-card {
		cursor: pointer;
		width: 100%;
		margin: 2.4rem 0;
		min-height: 11.2rem;
		background: url('@/assets/images/report-card.png') no-repeat;
		background-size: 100% 100%;
		padding: 2.9rem;
		overflow: hidden;
		&.is-url {
			background: url('@/assets/images/link-card.png') no-repeat;
			background-size: 100% 100%;
		}
		&.is-sketch {
			background: url('@/assets/images/sketch-card.png') no-repeat;
			background-size: 100% 100%;
		}
		// &:first-of-type{
		// 	margin-top: 0;
		// }
		&-header {
			font-family: 'Medium';
			font-size: 1.6rem;
			margin-bottom: 1.3rem;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			line-clamp: 3;
			.web-sources {
				column-gap: 0.8rem;
				.link-icon {
					width: 1.6rem;
					height: 1.6rem;
				}
			}
		}
		&-content {
			font-family: 'Regular';
			font-weight: 300;
			font-size: 1.6rem;
			color: #7c7c7c;
		}
	}
</style>
