<template>
	<view class="item">
		<view class="details_div">
			<view class="img_div">
				<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
			</view>
			<view class="right_div">
				<view class="title ellipsis-text">
					{{ item.crsName }}
				</view>
				<view class="prompt_div">
					<view class="prompt_div_left">
						<view class="top">{{ item.correctRate || '0' }}%</view>
						<view class="bottom">答题正确率</view>
					</view>
					<view class="prompt_div_line"></view>
					<view class="prompt_div_right" @click="show_list_click">
						<view class="click_text">
							{{ item.exrCnt || '0' }}
							<uv-icon
								class="click_text_icon"
								:class="{ click_text_icon_action: show_list_state }"
								name="arrow-right"
								color="#0066FF"
								size="12"
								:bold="true"
							></uv-icon>
						</view>
						<view class="bottom">练习次数</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list_div" :style="{ height: list_div_height }">
			<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_list)">
				<view class="list_content">
					<view class="list_small_item">
						<image src="@/static/images/courseRecord/time.png" class="icon_img"></image>
						<view class="prompt">练习时间：{{ item_list.exrStartTm }}</view>
					</view>
					<view class="list_small_item">
						<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
						<view class="prompt">练习时长：{{ formatDuration(item_list.exrStartTm, item_list.exrEndTm) }}</view>
					</view>
				</view>
				<view class="fl1"></view>
				<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
			</view>
			<uv-load-more
				v-if="status === 'loading'"
				:status="status"
				loadmore-text="轻轻上拉加载"
				:height="30"
			></uv-load-more>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref, reactive } from 'vue';
	import common from '@/common/common';
	import { queryPracticeHis } from '@/api/courseRecord.js';
	const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
	const props = defineProps({
		item: {
			type: Object,
			default: () => {}
		}
	});
	const item = computed(() => props.item);
	const data_list = reactive([]);
	const total = ref(-1);

	const show_list_state = ref(false);
	const list_div_height = computed(() => {
		if (!show_list_state.value) {
			return '0';
		} else if (status.value === 'loading') {
			return '100rpx';
		} else {
			return data_list.length * 136 + 'rpx';
		}
	});

	// 点击获取详情
	const show_list_click = () => {
		show_list_state.value = !show_list_state.value;
		if (total.value === -1) {
			//加载数据
			status.value = 'loading';
			data_list.length = 0;
			queryPracticeHis({ crsId: item.value.crsId }).then((res) => {
				data_list.push(...res.body);
				total.value = data_list.length;
				status.value = 'loadmore';
			});
		}
	};
	
	// 跳转到详情
	const click_list_item = (list_item) => {
		common.navigateTo(`/pages/courseRecord/coursePracticeRecordDetail?exrId=${list_item.exrId}`);
	};

	// 计算两个标准时间的时间差值
	const formatDuration = (startTm, endTm) => {
		// 解析时间字符串为时间戳（毫秒）
		const startTime = new Date(startTm).getTime();
		const endTime = new Date(endTm).getTime();

		// 计算时间差（秒），确保为正数
		const seconds = Math.abs(Math.floor((endTime - startTime) / 1000));

		// 计算时、分、秒
		const hours = Math.floor(seconds / 3600);
		const minutes = Math.floor((seconds % 3600) / 60);
		const remainingSeconds = seconds % 60;

		// 补零格式化函数（统一处理所有单位）
		const formatNumber = (num) => num.toString().padStart(2, '0');

		// 小时、分钟、秒均保持两位数格式
		return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(remainingSeconds)}`;
	};
</script>

<style scoped lang="scss">
	.icon_img {
		width: 24rpx;
		height: 24rpx;
	}

	.list_div {
		overflow: hidden; /* 确保内容不会溢出容器 */
		transition: height 0.2s ease-out; /* 高度动画 */
		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 18rpx 32rpx 18rpx 28rpx;
			background-color: #f9fbff;
			border-radius: 8rpx;
			margin: 20rpx 0 0 0;
			.list_content {
				.list_small_item {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;

					.prompt {
						margin-left: 16rpx;
					}
				}
			}
		}
	}
	.item {
		margin: 17rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx 22rpx;
		.details_div {
			display: flex;

			.img_div {
				position: relative;
				width: 226rpx;
				height: 168rpx;
				overflow: hidden;
				border-radius: 22rpx;

				.img {
					width: 226rpx;
					height: 168rpx;
				}

				.subscript {
					position: absolute;
					right: 0;
					top: 0;
					width: 92rpx;
					height: 46rpx;
					border-radius: 0px 0px 0px 22rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 22rpx;
					line-height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.right_div {
				flex: 1;
				overflow: hidden;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;

				.title {
					font-family: PingFangSC;
					color: #333333;
					text-align: left;
					font-style: normal;
					font-weight: 600;
					font-size: 28rpx; /* 字体大小30rpx */
					overflow: hidden; /* 超出部分隐藏 */
					margin-bottom: 8rpx;
					min-height: 40rpx;
				}

				.prompt_div {
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 22rpx;
					color: #666;
					line-height: 34rpx;
					display: flex;
					align-items: center;
					overflow: hidden;
					height: 116rpx;
					background-color: #f9fbff;
					border-radius: 8rpx;
					justify-content: space-around;
					.prompt_div_line {
						width: 4rpx;
						height: 30rpx;
						background: linear-gradient(
							to bottom,
							RGBA(242, 244, 248, 1) 0%,
							RGBA(230, 232, 238, 1) 30%,
							RGBA(230, 232, 238, 1) 70%,
							RGBA(242, 244, 248, 1) 100%
						);
					}
					.prompt_div_left,
					.prompt_div_right {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						.top,
						.click_text {
							font-family: Arial;
							font-weight: 700;
							font-size: 30rpx;
							color: #333333;
							line-height: 34rpx;
							text-align: center;
							font-style: normal;
						}
						.bottom {
						}
						.click_text {
							position: relative;
							.click_text_icon {
								position: absolute;
								margin-left: 18rpx;
								top: calc(50% - 12rpx);
								left: calc(100% - 14rpx);
								/* 添加过渡动画，包含延迟效果 */
								transition: transform 0.2s ease;
							}
							.click_text_icon_action {
								transform: rotate(90deg);
							}
						}
					}
				}

				.people_progress_div {
					display: flex;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 23rpx;
					color: #666;
					margin-bottom: 23rpx;

					line-height: 23rpx;
					flex-wrap: nowrap;
					height: 23rpx;
					overflow: hidden;
				}
			}
		}
	}
</style>
