<template>
	<view class="course-center max_page">
		<view class="top-bg"></view>
		<view class="bot-bg"></view>
		<view class="course-center-body">
			<view class="body-title">
				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
				课程中心
			</view>
			<view class="input-view"  @click="toSearchPage">
				<uv-input shape="circle"
					placeholderStyle='color:#999999;font-size:28rpx' 
					placeholder="请输入课程名" 
					suffixIcon="search"
					:customStyle="customStyle"
					:suffixIconStyle="suffixIconStyle" 
					:readonly="true">
				</uv-input>
			</view>
			<view class="tabs-view">
				<uv-tabs :list="tabList" @click="changeTab" :scrollable="false"
				active-style="font-weight:bold; color:#000;"
				line-color="#06f"
				></uv-tabs>
			</view>
			<view class="list-view">
				<uv-scroll-list class="tags-view" :indicator="false">
					<uv-tags text="全部" 
						shape="circle" 
						plain 
						class="tags-item" 
						size="mini" 
						:type="activeTag === ''?'primary':'info'"
						@click="chooseTag({value:''})"
					></uv-tags>
					<uv-tags :text="item.label" 
						v-for="item in tagsList" 
						:key="item.value" 
						shape="circle" 
						plain 
						:type="activeTag === item.value?'primary':'info'"
						@click="chooseTag(item)"
						class="tags-item" size="mini"
					></uv-tags>
				</uv-scroll-list>
				<view class="course-list">
					<view class="left-type-list" v-if="'全部' === activeTab">
						<view 
						 v-for="item in courseTypeList"
						 :key="item.value"
							:class="['type-item',activeCourseType == item.value ?'is-active':'']"
							@click="changeCourseType(item)"
						>
							{{item.label}}
						</view>
					</view>
					<view class="left-type-list" v-if="'生产线'===activeTab">
						<view 
						 v-for="item in coursePrdlineList"
						 :key="item.value"
							:class="['type-item', activePrdlineType == item.value ?'is-active':'']"
							@click="changePrdLine(item)"
						>
							{{item.label}}
						</view>
					</view>
					<view class="right-course-list">
						<view 
							class="type-list" 
							v-for="item in courseListTreeShow" 
							:key="item.value"
						>
							<view 
								class="type-title" 
								v-if="item.courseList.length > 0 && showTypeName"
							>
								<!-- v-if="itemT.courseList.length>0 && " -->
								<view class="left-color"></view>
								{{item.label}}
							</view>
							<CourseItem v-for="itemC in item.courseList" :key="itemC.crsNum" :itemInfo="itemC" @clickItem="toCourseDetail(itemC)"/>
							<view 
								class="type-list"
								v-for="itemT in item.children"
								:key="itemT.value"
							>
								<view class="type-title" v-if="itemT.courseList.length>0">
									<view class="left-color"></view>
										{{itemT.label}}
								</view>
								<CourseItem v-for="itemTC in itemT.courseList" :key="itemTC.crsNum" :itemInfo="itemTC" @clickItem="toCourseDetail(itemTC)"/>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CourseItem from "@/components/course-item/course-item.vue"
	import common from '@/common/common'
	import {
		getPrdLineTypeListApi,
		getTraTagListApi,
		getCourseTypeListApi,
		queryCrsInfoByCatalogApi,
		queryCrsInfoByPrdLineApi,
		queryCrsInfoByLastnewApi,
		queryCrsInfoByPopularApi,
		queryCrsInfoByRecmdApi
} from "@/api/course.js"
import { onMounted, ref, computed } from 'vue'
	const customStyle = {
		backgroundColor: "#ffffff",
		paddingLeft: "40rpx",
		height:'60rpx',
		paddingTop: "5px",
		paddingBottom: "5px",
		border: "none"
	} 
	const suffixIconStyle = {
		color: "#2c8ef2",
		fontSize: "40rpx"
	}
	const tabsCustomStyle ={
		backgroundColor: "#ffffff",
		borderRadius: '23rpx',
	}
	const tabList = [
		{ name:'全部'},
		{ name:'热门'},
		{ name:'最新'},
		{ name:'推荐'},
		{ name:'生产线'},
	]
	const activeTab = ref('全部')
	const activeCourseType = ref('')
	const activePrdlineType = ref('')
	const activeTag = ref('')
	const courseTypeList = ref([])
	const coursePrdlineList = ref([])
	const tagsTree = ref([])
	
	// 点击标签
	const chooseTag = (item)=>{
		activeTag.value = item.value
	}
	// 点击生产线分类
	const changePrdLine = (item)=>{
		activePrdlineType.value = item.value
	}
	// 点击课程分类
	const changeCourseType =  (item)=>{
		activeCourseType.value = item.value
		
		setTimeout(()=>{
			console.log(courseListTreeShow.value)
		})
		
	}
	const showTypeName = computed(()=>{
		return (activeTab.value === '全部' && activeCourseType.value === '') || (activeTab.value === '生产线' && activePrdlineType.value === '')
	}) 
	const tagsList = computed(()=>{
		let _arr = []
		tagsTree.value.forEach(t=>{
			let _tarr = t.children || []
			_arr = _arr.concat(_tarr)
		})
		return _arr.sort((a,b)=>{
			a.required == "Y" && b.required === 'N'
		})
	})
	const courseListBase = ref([])
	const courseList = computed(()=>{
		return activeTag.value
		?courseListBase.value.filter(t=>t.tagCataList.indexOf(activeTag.value)>=0)
		:courseListBase.value
	})
	// 整理树形
	const courseListTree =  computed(()=>{
		let _arr = activeTab.value === '全部'? courseTypeList.value 
		: activeTab.value === '生产线'? coursePrdlineList.value: []
		let _idKey = activeTab.value === '全部'? 'tagId': 'prdLineId'
		
		let _tree = _arr.map(t=>{
			let _children = t.children||[]
			return {
				label: t.label,
				required: t.required,
				value:t.value,
				courseList: courseList.value.filter(k=>k[_idKey] === t.value),
				children: _children.map(k=>{
					return {
						...k,
						courseList: courseList.value.filter(m=>m[_idKey] === k.value),
					}
				})
			}
		})
		return _tree
	})
	// 过滤树形
	const courseListTreeShow =  computed(()=>{
		let _type = activeTab.value === '全部'? activeCourseType.value : activePrdlineType.value
		if(activeTab.value === '全部'|| activeTab.value === '生产线'){
			if(_type){
				return courseListTree.value.filter(t=> t.value === _type)
			}else{
				 return courseListTree.value
			}
		}else{
			return [{
				children: [],
				courseList: courseList.value,
				label: "",
				value: "333"
			}]
		}
	})
	const changeTab = (item) => {
		if(!item) return
		activeTab.value = item.name
		activeCourseType.value = ''
		activePrdlineType.value = ''
		switch (item.name){
			case '全部':
				queryCrsInfoByCatalogApi().then(res=>{
					courseListBase.value = res.body || []
				})
			break;
			case '热门':
				queryCrsInfoByPopularApi().then(res=>{
					courseListBase.value = res.body || []
				})
			break;
			case '最新':
				queryCrsInfoByLastnewApi().then(res=>{
					courseListBase.value = res.body || []
				})
			break;
			case '推荐':
				queryCrsInfoByRecmdApi().then(res=>{
					courseListBase.value = res.body || []
				})
			break;
			case '生产线':
				queryCrsInfoByPrdLineApi().then(res=>{
					courseListBase.value = res.body || []
				})
			break;
		}
	}
	// 跳转搜索页
	const toSearchPage = () => {
		common.navigateTo('/pages/search/search')
	}
	// 跳转 课程详情
	const toCourseDetail = (item) => {
		console.log(item.crsNum)
		// common.navigateTo('/pages/course/detail/' + item.crsNum)
	}
	onMounted(()=>{
		getCourseTypeListApi().then(res=>{
			courseTypeList.value = res.body||[]
		})
		getPrdLineTypeListApi().then(res=>{
			coursePrdlineList.value = res.body||[]
		})
		getTraTagListApi().then(res=>{
			tagsTree.value = res.body||[]
		})
		changeTab({name:'全部'})
	})
</script>

<style lang="scss" scoped>
	.course-center{
		position: relative;
		display: flex;
		flex-direction: column;
		.top-bg{
			background: linear-gradient(16deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
			height: 480rpx;
			width: 750rpx;
		}
		.bot-bg{
			// background-color: #F6F8FF;
			background: linear-gradient(136deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
			width: 750rpx;
			flex: 1;
		}
		.course-center-body{
			position: absolute;
			overflow: hidden;
			left:0;
			top: 0;
			height: 100%;
			width: 100%;
			padding:0 15rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.body-title{
				height: 150rpx;
				text-align: center;
				font-size: 33rpx;
				padding-top: 70rpx;
				line-height: 46rpx;
				box-sizing: border-box;
				font-weight: 500;
				color:#000;
				position: relative;
				// margin-bottom: 23rpx;
				.arrow-icon{
					position: absolute;
					left:36rpx;
					top:80rpx;
					color: #000;
				}
			}
			.input-view{
				
			}
			.tabs-view{
				background: #ffffff;
				margin-top: 23rpx;
				border-radius: 23rpx;
				padding: 6rpx 10rpx 12rpx;
				margin-bottom:15rpx;
			}
			.list-view{
				flex:1;
				overflow: hidden;
				margin-bottom: 80rpx;
				background: #ffffff;
				border-radius: 23rpx;
				display: flex;
				flex-direction: column;
				.tags-view{
					height: 84rpx;
					display: block;
					padding: 20rpx;
					box-sizing: border-box;
					white-space: nowrap;
					border-bottom: 2rpx solid #eee;
					.tags-item{
						margin-right: 30rpx;
						display: inline-block;
						::v-deep .uv-tags{
							padding: 0 20rpx;
							.uv-tags__text{
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								max-width: 200rpx;
							}
						}
					}
				}
				.course-list{
					display: flex;
					flex:1;
					overflow: hidden;
					.left-type-list{
						width: 152rpx;
						border-right: 2rpx solid #eee;
						overflow-y: auto;
						.type-item{
							height: 90rpx;
							line-height: 90rpx;
							font-size: 28rpx;
							box-sizing: border-box;
							padding: 0 18rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							&.is-active{
								background-color: rgba(44,142,242,.1);
								color: #06f;
							}
						}
					}
					.right-course-list{
						flex:1;
						overflow-y: auto;
						.type-list{
							.type-title{
								font-size: 33rpx;
								line-height: 43rpx;
								margin: 20rpx 15rpx 5rpx;
								height: 43rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-weight: 600;
								.left-color{
									width: 8rpx;
									height: 33rpx;
									margin-top: 5rpx;
									float: left;
									overflow: hidden;
									background-color: #06f;
									margin-right: 8rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>