<template>
	<view class="my-courseware-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="我的课件"
			@cviewckLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
			
		</uni-nav-bar>

		<!-- 标签页导航 -->
		<view class="tab-nav">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'download' }"
				@click="switchTab('download')"
			>
				我的下载
			</view>
			<view class="divder"></view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'share' }"
				@click="switchTab('share')"
			>
				我的分享
			</view>
		</view>

		<!-- 摘要栏 -->
		<view class="summary-bar">
			<view class="summary-item">
				<up-image  :src="downLoadImg" width="36rpx" height="36rpx" ></up-image>
				<text class="summary-text">{{ activeTab === 'download' ? '下载账户' : '分享账户' }}: {{ downloadCount }}</text>
			</view>
			<view class="summary-item">
				<up-image  :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
				<text class="summary-text">{{ activeTab === 'download' ? '文件数量' : '分享文件' }}: {{ totalAmount }}</text>
			</view>
		</view>

		<!-- 课件列表 -->
		<scroll-view 
			scroll-y 
			class="courseware-list"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
			@scrolltolower="onLoadMore"
			:lower-threshold="100"
		>
			<!-- 空状态 -->
			<view v-if="coursewareList.length === 0 && !loading" class="empty-state">
				<text>{{ activeTab === 'download' ? '暂无下载数据' : '暂无分享数据' }}</text>
			</view>
			
			<view class="courseware-item" v-for="(item, index) in coursewareList" :key="index" @click="onItemClick(item)">
				<view class="item-content">
					<view class="courseware-name">
						<text class="label">课件名称:</text>
						<text class="value">{{ item.name }}</text>
					</view>
					<view class="courseware-provider" v-if="item.providername">
						<text class="label">{{ activeTab === 'download' ? '提供者' : '下载者' }}:</text>
						<text class="value">{{ item.providername }}</text>
					</view>
					<view class="courseware-time">
						<text class="label">时间:</text>
						<text class="value">{{ item.time }}</text>
					</view>
					<view class="courseware-status">
						<text class="label">状态:</text>
						<text class="value status-paid">{{ item.status }}</text>
					</view>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view v-if="loading" class="loading-more">
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view v-if="noMore && coursewareList.length > 0" class="no-more">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/api';
import downLoadImg from "@/static/course_download.png"
import moneyImg from "@/static/course_yuan.png"
const activeTab = ref('download');
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
const downloadCount = ref(4);
const totalAmount = ref('20.00');

const coursewareList = ref([]);

onMounted(() => {
	onRefresh();
});

const goBack = () => {
	uni.navigateBack();
};

const switchTab = (tab) => {
	activeTab.value = tab;
	// 切换标签时重置数据
	page.value = 1;
	noMore.value = false;
	// 这里可以根据标签加载不同数据
	onRefresh();
};

const onItemClick = (item) => {
	// 这里可以根据需要跳转到详情页或执行下载操作
	console.log('点击课件:', item);
	
	if (activeTab.value === 'download') {
		// 下载标签页的处理逻辑
		if (item.download_path) {
			uni.downloadFile({
				url: item.download_path,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							success: () => {
								console.log('打开文档成功');
							},
							fail: (err) => {
								console.error('打开文档失败:', err);
								uni.showToast({ title: '无法打开此文件', icon: 'none' });
							}
						});
					}
				},
				fail: (err) => {
					console.error('下载失败:', err);
					uni.showToast({ title: '下载失败', icon: 'none' });
				}
			});
		} else {
			uni.showToast({ title: `点击了下载课件: ${item.name}`, icon: 'none' });
		}
	} else {
		// 分享标签页的处理逻辑
		uni.showToast({ title: `点击了分享课件: ${item.name}`, icon: 'none' });
		// 这里可以添加分享相关的操作，比如查看分享详情、重新分享等
	}
};

const onRefresh = () => {
	refreshing.value = true;
	page.value = 1;
	noMore.value = false;
	if (activeTab.value === 'download') {
		api.getGandanfileMyDownload({ page: page.value }).then(res => {
			console.log(res);
			if (res.code === 200 && res.data) {
				const data = res.data.list;
				// 更新摘要信息
				downloadCount.value = res.data.downloadTotalAccount || 0;
				totalAmount.value = res.data.downloadFileCount || 0;
				
				// 处理课件列表数据
				coursewareList.value = data.list.map(item => ({
					name: item.title || '未知课件',
					time: item.create_date ? item.create_date.split(' ')[0] : '',
					status: item.order_status === 'paid' ? '已支付' : '未支付',
					uuid: item.uuid,
					order_id: item.order_id,
					type: item.type,
					providername: item.providername
				}));
				
				// 判断是否还有更多数据
				noMore.value = data.pageNumber >= data.totalPage;
			}
			refreshing.value = false;
		}).catch(err => {
			console.error('获取下载列表失败:', err);
			refreshing.value = false;
		});
	} else {
		api.getGandanfileMyShare({ page: page.value }).then(res => {
			console.log(res);
			if (res.code === 200 && res.data) {
				const data = res.data.list;
				// 更新摘要信息 - 分享数据使用不同的字段
				downloadCount.value = res.data.shareTotalAccount || 0;
				totalAmount.value = res.data.shareloadFileCount || 0;
				
				// 处理分享列表数据
				coursewareList.value = data.list.map(item => ({
					name: item.title || '未知课件',
					time: item.create_date ? item.create_date.split(' ')[0] : '',
					status: '已分享', // 分享数据没有支付状态，统一显示为已分享
					uuid: item.uuid,
					order_id: item.order_id,
					type: item.type,
					providername: item.downloadername, // 分享数据中下载者名称对应提供者
					downloadername: item.downloadername
				}));
				
				// 判断是否还有更多数据
				noMore.value = data.pageNumber >= data.totalPage;
			}
			refreshing.value = false;
		}).catch(err => {
			console.error('获取分享列表失败:', err);
			refreshing.value = false;
		});
	}
};

const onLoadMore = () => {
	if (loading.value || noMore.value) return;
	
	loading.value = true;
	page.value++;
	
	if (activeTab.value === 'download') {
		api.getGandanfileMyDownload({ page: page.value }).then(res => {
			console.log(res);
			if (res.code === 200 && res.data) {
				const data = res.data.list;
				// 追加新数据到列表
				const newList = data.list.map(item => ({
					name: item.title || '未知课件',
					time: item.create_date ? item.create_date.split(' ')[0] : '',
					status: item.order_status === 'paid' ? '已支付' : '未支付',
					uuid: item.uuid,
					order_id: item.order_id,
					type: item.type,
					providername: item.providername
				}));
				
				coursewareList.value = [...coursewareList.value, ...newList];
				
				// 判断是否还有更多数据
				noMore.value = data.pageNumber >= data.totalPage;
			}
			loading.value = false;
		}).catch(err => {
			console.error('加载更多下载列表失败:', err);
			page.value--; // 恢复页码
			loading.value = false;
		});
	} else {
		api.getGandanfileMyShare({ page: page.value }).then(res => {
			console.log(res);
			if (res.code === 200 && res.data) {
				const data = res.data.list;
				// 追加新数据到列表
				const newList = data.list.map(item => ({
					name: item.title || '未知课件',
					time: item.create_date ? item.create_date.split(' ')[0] : '',
					status: '已分享', // 分享数据没有支付状态，统一显示为已分享
					uuid: item.uuid,
					order_id: item.order_id,
					type: item.type,
					providername: item.downloadername, // 分享数据中下载者名称对应提供者
					downloadername: item.downloadername
				}));
				
				coursewareList.value = [...coursewareList.value, ...newList];
				
				// 判断是否还有更多数据
				noMore.value = data.pageNumber >= data.totalPage;
			}
			loading.value = false;
		}).catch(err => {
			console.error('加载更多分享列表失败:', err);
			page.value--; // 恢复页码
			loading.value = false;
		});
	}
};
</script>

<style lang="scss" scoped>
.my-courseware-page {
	min-height: 100vh;
	
}

.tab-nav {
	display: flex;
	background: #ffffff;
	border-bottom: 2rpx solid #f0f0f0;
	position: fixed;
	top: 140rpx;
	left: 0;
	right: 0;
	z-index: 10;
	.divder{
		width: 2rpx;
		height:100rpx;
		background:#eee;
	}
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #666666;
		position: relative;
		
		&.active {
			color: #8B2316;
			
			
		}
	}
}

.summary-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #8B2316;
	padding: 20rpx 30rpx;
	position: fixed;
	top: 260rpx; // 标签页导航下方
	left: 0;
	right: 0;
	z-index: 10;
	
	.summary-item {
		display: flex;
		align-items: center;
		
		.summary-text {
			color: #ffffff;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
}

.courseware-list {
	height: calc(100vh - 140rpx - 116rpx - 80rpx);
	position: fixed;
	top: 336rpx; // 调整顶部位置，为固定的摘要栏腾出空间
	bottom: 0;
	width: 100%;
}

.courseware-item {
	background: #ffffff;
	margin-bottom: 2rpx;
	padding: 30rpx;
	border-bottom:2rpx solid #eee;
	.item-content {
		.courseware-name,
		.courseware-provider,
		.courseware-time,
		.courseware-status {
			display: flex;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				width: 120rpx;
				color: #8B2316;
				font-size: 28rpx;
			}
			
			.value {
				flex: 1;
				color: #666;
				font-size: 28rpx;
				line-height: 1.4;
				
				&.status-paid {
					color: #666;
				}
			}
		}
	}
}

.loading-more, .no-more, .empty-state {
	text-align: center;
	padding: 30rpx;
	color: #999999;
	font-size: 26rpx;
}

.empty-state {
	padding: 100rpx 30rpx;
	font-size: 28rpx;
}
</style>
