<template>
	<view>
		<view v-if="items.length == 0" class="empty-box">
			<text class="empty-text">暂无过程记录</text>
		</view>
		<view v-for="item in items" :key="item.id" class="timeline-item">
			<view class="dot"></view>
			<view class="timeline-body">
				<text class="timeline-title">{{ item.title }}</text>
				<text class="timeline-time">{{ item.time }}</text>
				<text class="timeline-desc">{{ item.description }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
import { HomeServiceTimelineItemType } from '@/types/home-service.uts'

defineProps({
	items: {
		type: Array<HomeServiceTimelineItemType>,
		default: [] as Array<HomeServiceTimelineItemType>
	}
})
</script>

<style scoped>
.timeline-item {
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.dot {
	width: 18rpx;
	height: 18rpx;
	border-radius: 9rpx;
	background: #0f766e;
	margin-top: 10rpx;
	margin-right: 16rpx;
}

.timeline-body {
	flex: 1;
}

.timeline-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #16324f;
}

.timeline-time,
.timeline-desc,
.empty-text {
	margin-top: 10rpx;
	font-size: 26rpx;
	line-height: 38rpx;
	color: #66788a;
}

.empty-box {
	padding: 24rpx 0;
	align-items: center;
}
</style>