<template>
	<view>
		<view class="u-flex  u-p-b-28 item" :class="{'active':active==index}" v-for="(item,index) in list" :key="index">
			<view class="left ">
				<view class="circle"></view>
				<view class="left-line" :class="{hide:index==list.length-1}"></view>
			</view>
			<view class="u-p-l-12  ">
				<view class="u-font-20">{{formatTitle(item[titleKey]||'') }}</view>
				<view class="u-font-24 u-m-t-2">{{item[contentKey]||''}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs';
	const props = defineProps({
		active: {
			type: [String, Number],
			default: 0
		},
		list: {
			type: Array,
			default: () => []
		},
		titleKey: {
			type: String,
			default: 'title'
		},
		contentKey: {
			type: String,
			default: 'content'
		}
	})
	
	function formatTitle(time){
		return  dayjs(time).format('YYYY-M-D HH:MM:ss')
	}
</script>

<style lang="scss" scoped>
	$leftWidth: 12rpx;
	$circleSize: 12rpx;
	$lineWidth: 2rpx;
	$circleLeft:0;
	$lineLeft: calc($circleSize / 2 - $lineWidth / 2 );

	.item {
		color: #999;
		position: relative;

		.left {
			height: 100%;
			width: $leftWidth;
		}

		&.active {
			color: $my-main-color;

			.circle {
				background: $my-main-color;
			}

			.left-line {
				background-color: $my-main-color;
			}
		}
	}

	.circle {
		position: absolute;
		top: 6rpx;
		left: $circleLeft;
		width: $circleSize;
		height: $circleSize;
		border-radius: 50%;
		background: #999;
		margin: auto;
	}

	.left-line {
		left: $lineLeft;
		position: absolute;
		bottom: 4rpx;
		top: calc($circleSize + 10rpx);
		width: $lineWidth;
		background-color: #999;
		border-radius: $lineWidth;
	}

	.hide {
		opacity: 0;
	}
</style>