<template>
	<view class="courses-page">
		<z-paging ref="paging" v-model="bookList" auto-show-back-to-top class="my-book-page" @query="getDataList"
			:default-page-size="10">
			<template #top>
				<!-- 自定义导航栏 -->
				<nav-bar :title="$t('user.myCourses')"></nav-bar>
			</template>
			<wd-tabs v-model="tab" @change="switchTab" auto-line-width animated>
				<block v-for="item in tabs" :key="item.id">
					<wd-tab :title="`${item.name}`" :name="item.id">
						<view v-if="item.id === 0">
							<wd-search v-model="title" placeholder-right placeholder="请输入课程名称" cancel-txt="搜索" @search="search"
								@cancel="search" @clear="search" light style="margin-top: 10rpx;" />
							<view class="courses-row">
								<view class="courses-category">{{ !tagData ? '已显示全部课程' : `已选择分类：${tagName}`}}
									<wd-button size="small" type="warning" style="margin-left: 20rpx;" v-if="tagData"
										@click="clear">清除</wd-button>
								</view>
								<view class="courses-category" @click="openwindow">
									<wd-icon name="app" size="36rpx" color="#2979ff"></wd-icon>
									<text>按分类筛选</text>
								</view>
							</view>
						</view>
						<view class="myCourse-data" v-for="(item, index) in bookList" :key="index"
							@click="onPageJump('/pages/course/details/course',item.id)">
							<view>
								<image class="myCourse-data-image" :src="item.image" mode="aspectFit"></image>
							</view>
							<view class="myCourse-data-row">
								<view class="myCourse-data-row-text">
									<view class="title">{{item.title}}</view>
									<view class="introduction" v-html="item.content"></view>
								</view>
								<view class="row-button">
									<view @click.stop="onPageJump('/pages/course/details/course',item.id)" v-if="tab !==2">
										<wd-button plain size="small" class="button">去学习</wd-button>
									</view>
									<view v-if="tab !==2">
										<view v-if="item.isStudying === 0" @click.stop="joinStudy(item.id)">
											<wd-button type="warning" size="small" plain class="button">加入在学习</wd-button>
										</view>
										<view @click.stop="cancelStudy(item.id)" v-else>
											<wd-button type="warning" size="small" class="button">取消在学习</wd-button>
										</view>
									</view>
									<view @click.stop="renewal(item.catalogueId)" v-else>
										<wd-button size="small" class="button">续费课程</wd-button>
									</view>
								</view>
							</view>
						</view>
					</wd-tab>
				</block>
			</wd-tabs>
		</z-paging>
		<!-- 商品选择器 -->
		<GoodsSelector :show="showGoodsSelector" :goods="goodsList" @select="handleGoodsSelect"
			@confirm="handleGoodsConfirm" @close="closeGoodsSelector" />
		<!-- 搜索分类弹窗 -->
		<wd-popup v-model="showState" position="right" custom-style="border-radius: 0px !important;width: 70%;">
			<view class="popup-image">
				<image src="@/static/logo.png"></image>
			</view>
			<view class="_text">请选择课程分类</view>
			<wd-collapse ref="collapseRef" v-model="levelOne" accordion v-for="item in labelTree" :key="item.id"
				:title="item.title" :name="item.name">
				<wd-collapse-item :title="item?.title" :name="item?.title" custom-body-style="padding:0">
					<view v-for="itm in item?.children" :key="itm?.id" class="content-text" @click.stop="gettagId1(itm)">
						<view style="margin-bottom: 10rpx;">{{itm?.title}}</view>
						<view v-for="it in itm?.children" :key="it?.id" class="row" @click.stop="gettagId2(it)">
							{{it?.title}}
							<view>
								<wd-button class="_r" size="small" plain v-for="i in it?.children" :key="i?.id"
									@click.stop="gettagId3(i)">{{i?.title}}</wd-button>
							</view>
						</view>
					</view>
				</wd-collapse-item>
			</wd-collapse>
		</wd-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { courseApi } from '@/api/modules/course'
	import { useUserStore } from '@/stores/user'
	import GoodsSelector from '@/components/order/GoodsSelector.vue'
	import { onShow } from '@dcloudio/uni-app'
	import {
		getUserCourseBuyList,
		getUserCourseStudyingList,
		getCourseExpireList,
		addUserCourseStudyingList,
		delUserCourseStudyingList,
		getCourseMedicalTreeList,
		getRelearnShopProductList
	} from '@/api/modules/user'

	const { t } = useI18n()
	const userStore = useUserStore()
	const tabs = ref([
		{ name: "我的课程", id: 0 },
		{ name: "正在学习", id: 1 },
		{ name: "已过期", id: 2 }
	])
	const tab = ref(0)
	const bookList = ref([])
	const loading = ref(false)
	const firstLoad = ref(true)
	const paging = ref<any>()
	const title = ref('') // 搜索数据
	const pageNoData = ref(0)
	const pageSizeData = ref(0)
	const goodsList = ref([])
	const selectedGoods = ref(null) // 上坡数据
	// 商品选择
	const showGoodsSelector = ref(false) // 商品价格选择弹窗
	const showState = ref(false) // 搜索分类弹窗
	const apiMap = [
		getUserCourseBuyList, // 我的课程
		getUserCourseStudyingList, // 正在学习
		getCourseExpireList // 已过期
	];
	const levelOne = ref('')
	const labelTree = ref([]) // 课程分类数据
	const tagData = ref('') // 标签数据
	const tagName = ref('')

	// 我的课程
	async function getDataList(pageNo : number, pageSize : number) {
		console.log(userStore.id);
		loading.value = true
		pageNoData.value = pageNo ?? pageNoData.value
		pageSizeData.value = pageSize ?? pageSizeData.value
		const targetApi = apiMap[tab.value];
		try {
			// 只有我的课程才传搜索框内容
			const res = await targetApi(pageNoData.value, pageSizeData.value, tab.value === 0 ? title.value : userStore.id, tagData?.value.id ?? '')
			paging.value.complete(tab.value === 0 ? res.courseList.records : res.courseList)
		} catch (error) {
			paging.value.complete(false)
			console.error('Failed to load book list:', error)
		} finally {
			firstLoad.value = false
			loading.value = false
		}
	}

	/**
	 * 切换tab
	 */
	const switchTab = (e) => {
		tab.value = e.index
		bookList.value = []
		tagData.value = ''
		getDataList()
	}

	/**
	 * 搜索
	 */
	const search = () => {
		bookList.value = []
		getDataList()
	}

	/**
	 * 加入学习
	 */
	const joinStudy = async (id : string) => {
		console.log(id, 'id');
		try {
			await addUserCourseStudyingList(userStore.id, id)
			getDataList()
		} catch (error) {
			console.error('加入学习', error)
		}
	}

	/**
	 * 取消学习
	 */
	const cancelStudy = async (id : string) => {
		try {
			await delUserCourseStudyingList(id)
			getDataList()
		} catch (error) {
			console.error('取消学习', error)
		}
	}

	/**
	 * 续费课程
	 */
	const renewal = async (id : any) => {
		const res = await getRelearnShopProductList(id)
		if (res.code === 0 && res.productList.length > 0) {
			goodsList.value = res.productList
			showGoodsSelector.value = true
		} else {
			uni.showToast({ title: '此课程暂无购买方式', icon: 'none' })
		}
	}

	/**
	 * 选择商品
	 */
	const handleGoodsSelect = (goods : IGoods) => selectedGoods.value = goods

	/**
	 * 确认购买
	 */
	const handleGoodsConfirm = () => {
		showGoodsSelector.value = false
		uni.navigateTo({
			url: `/pages/order/goodsConfirm?isRelearn=1`,
			success: () => {
				setTimeout(() => {
					uni.$emit('selectedGoods', selectedGoods.value)
				}, 100)
			}
		})
	}

	/**
	 * 关闭商品选择器
	 */
	const closeGoodsSelector = () => showGoodsSelector.value = false

	/**
	 * 打开商品分类弹窗
	 */
	const openwindow = () => {
		levelOne.value = ''
		showState.value = true
	}

	/**
	 * 获取标签树
	 */
	const getTreeList = async () => {
		try {
			const data = await getCourseMedicalTreeList()
			labelTree.value = data.labels
		} catch (error) {
			console.error('分类标签数', error)
		}
	}

	/**
	 * 获取一级标签id
	 */
	const gettagId1 = (item : any) => publicMethod(item)

	/**
	 * 获取二级标签id
	 */
	const gettagId2 = (item : any) => publicMethod(item)

	/**
	 * 获取三级标签id
	 */
	const gettagId3 = (item : any) => publicMethod(item)

	/**
	 * 公共方法
	 */
	const publicMethod = (item : { title ?: any }) => {
		console.log(item, 'item');
		tagName.value = item.title
		tagData.value = item
		showState.value = false
		getDataList()
	}

	/**
	 * 清除按钮
	 */
	const clear = () => {
		tagData.value = ''
		getDataList()
	}
	// 跳转
	const onPageJump = (url : any, id : any) => {
		uni.navigateTo({
			url: `${url}?id=${id}`
		})
	}
	onShow(() => {
		bookList.value = []
		getDataList()
	})
	onMounted(() => {
		getTreeList()
	})
</script>

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

	.courses-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx 10rpx 20rpx;

		.courses-category {
			display: flex;
			align-items: center;
			font-size: 26rpx;

			text {
				color: #2979ff;
				margin-left: 4rpx;
			}
		}
	}

	.myCourse-data {
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0px 0px 10px 0px #a7bbe4;
		display: flex;
		// border: 1px solid #2979ff;

		.myCourse-data-image {
			display: block;
			width: 260rpx;
			margin-right: 20rpx;
			height: 200rpx;
			// flex-grow: 1;
			// overflow: hidden;
			background-color: #edf3ff;

			image {
				width: 100%;
				height: 200rpx;
			}
		}

		.myCourse-data-row {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.myCourse-data-row-text {
				.title {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.introduction {
					color: #9c9c9c;
					font-size: 26rpx;
					overflow: hidden;
					margin-top: 10rpx;
					font-size: 24rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.5;
					max-height: 3em;
				}
			}

			.row-button {
				display: flex;
				flex-direction: row-reverse;
				margin-top: 10rpx;

				.button {
					margin-left: 10rpx;
				}
			}

		}
	}

	.popup-image {
		display: flex;
		justify-content: center;
		margin-top: 60rpx;

		image {
			width: 360rpx;
			height: 360rpx
		}
	}

	._text {
		text-align: center;
		padding: 20rpx 0 60rpx 0;
		color: #888;
		font-size: 36rpx;
	}

	.content-text {
		color: #1b2a32;
		padding: 20rpx 0 20rpx 60rpx;
		border-bottom: 1px solid #ebeef5;
		// line-height: 40px;

		.row {
			padding: 10rpx 0 10rpx 30rpx;

			._r {
				margin: 20rpx 20rpx 0 0;
			}
		}
	}
</style>