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

		<!-- 标签页导航 -->
		<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">{{ totalAmount}}</text>
			</view>
			<view class="summary-item">
				<up-image  :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
				<text class="summary-text">{{ downloadCount }}</text>
			</view>
		</view>

		<!-- 课件列表 -->
		<scroll-view 
			scroll-y 
			class="courseware-list"
			:scroll-top="listScrollTop"
			:scroll-into-view="scrollIntoViewId"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="refreshing"
			@scrolltolower="onLoadMore"
			:lower-threshold="100"
		>
			<view id="courseware-top"></view>
			<!-- 空状态 -->
			<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-provider" v-if="activeTab === 'share'">
						<text class="label">下载医生</text>
						<text class="value">:{{ item.providername }}</text>
					</view>
					<view class="courseware-name">
						<text class="label">课件名称</text>
						<text class="value">:{{ item.name }}</text>
					</view>
					
					<view class="courseware-time">
						<text class="label">时间</text>
						<text class="value">:{{ item.time }}</text>
					</view>
					<view class="courseware-status" v-if="activeTab === 'download'">
						<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, nextTick } from 'vue';
import api from '@/api/api';
import  navTo  from '@/utils/navTo.js';
import { onLoad,onBackPress } from '@dcloudio/uni-app';
import downLoadImg from "@/static/course_download.png"
import moneyImg from "@/static/course_yuan.png"
const activeTab = ref('download');
const listScrollTop = ref(0);
const scrollIntoViewId = ref('');
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);
const pageSize = ref(10);
const downloadCount = ref(0);
const totalAmount = ref(0);

const coursewareList = ref([]);
const from = ref('');
onBackPress(() => {
	if(!from.value){
		plus.runtime.quit();
		return true;
	}
});
onLoad((options) => {
	if(options.from){
		from.value = options.from;
	}
	uni.sendNativeEvent("portraitReport",{
        msg:{
        event_nickname: "list_page",
        page_type: "我的课件",
      },
    });
});
onMounted(() => {
	onRefresh();
});
const getStatusText = (status) => {
	console.log(status);
	if(status === 'paid'){
		return '已支付';
	}else if(status === 'unpaid'){
		return '未支付';
	}else{
		return '已分享';
	}
};
const goBack = () => {
	if(!from.value){
		plus.runtime.quit();
	}else{
		uni.navigateBack();
	}
};

onLoad((options) => {
	if(options.from){
		//from.value = options.from;
		switchTab('share')
	}
})
const switchTab = (tab) => {
	activeTab.value = tab;
	listScrollTop.value = 0;
	scrollIntoViewId.value = '';
	nextTick(() => {
		scrollIntoViewId.value = 'courseware-top';
	});
	// 切换标签时重置数据
	page.value = 1;
	noMore.value = false;
	// 这里可以根据标签加载不同数据
	onRefresh();
};

const onItemClick = (item) => {
	// 这里可以根据需要跳转到详情页或执行下载操作
	console.log('点击课件:', item);
	
	if (activeTab.value === 'download') {
		navTo({
			url: `/pages_app/myCourseware/coursewareDetail?id=${item.order_id}`
		})
	} 
};

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/100).toFixed(2) || 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.downloadername
				}));
				
				// 判断是否还有更多数据
				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/100).toFixed(2) || 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: calc(var(--status-bar-height) + 44px);
	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;
	
	align-items: center;
	background: #8B2316;
	padding: 20rpx 30rpx;
	position: fixed;
	top: calc(var(--status-bar-height) + 44px + 124rpx); // 标签页导航下方
	left: 0;
	right: 0;
	z-index: 10;
	
	.summary-item {
		flex:1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.summary-text {
			color: #ffffff;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}
}

.courseware-list {
	// height: calc(100vh - 180rpx - 116rpx - 80rpx);
	position: fixed;
	top: calc(var(--status-bar-height) + 44px + 124rpx + 80rpx); // 调整顶部位置，为固定的摘要栏腾出空间
	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;
				display: inline-block;
				text-align: justify;
				text-align-last: justify;
				text-justify: inter-ideograph;
			}
			.label::after {
				content: '';
				display: inline-block;
				width: 100%;
			}
			
			.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>
