<template>
	<view class="msg-item" :class="{ 'msg-item--unread': item.unread }" @click="emit('click', item)">
		<view class="msg-item__head">
			<view v-if="item.unread" class="msg-item__dot" />
			<text class="msg-item__title" :class="{ 'msg-item__title--bold': item.unread }">{{ item.title }}</text>
		</view>
		<text
			class="msg-item__summary"
			:class="{ 'msg-item__summary--reject': item.isReject }"
		>{{ item.summary }}</text>
		<text class="msg-item__time">{{ item.createTime }}</text>
	</view>
</template>

<script setup>
defineProps({
	item: {
		type: Object,
		required: true
	}
})

const emit = defineEmits(['click'])
</script>

<style lang="scss" scoped>
.msg-item {
	padding: 24rpx 28rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}
.msg-item--unread {
	background: #fafdf9;
}
.msg-item__head {
	display: flex;
	align-items: flex-start;
	gap: 12rpx;
}
.msg-item__dot {
	width: 14rpx;
	height: 14rpx;
	margin-top: 12rpx;
	border-radius: 50%;
	background: #e53935;
	flex-shrink: 0;
}
.msg-item__title {
	flex: 1;
	font-size: 30rpx;
	color: #333;
	line-height: 1.4;
}
.msg-item__title--bold {
	font-weight: 600;
}
.msg-item__summary {
	display: block;
	margin-top: 10rpx;
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.msg-item__summary--reject {
	color: #e65100;
}
.msg-item__time {
	display: block;
	margin-top: 12rpx;
	font-size: 24rpx;
	color: #999;
}
</style>
