<template>
	<view class="content">
		<z-nav-bar title="名医精彩" bgColor="#5188e5" fontColor="#fff" :backState="2000"></z-nav-bar>
		<view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
			<view class="cateList flexbox">
				<common-sticky itemStyle="width:33.3%; height: 38px;font-size:24rpx;" :list="tabsList" label="title"
				:currentCateIndex="currentCateIndex" @handleselectCate="ordersTabCLi"></common-sticky>
			</view>
			<view class="name_search">
				<uni-easyinput
					v-model="courseName"
					prefixIcon="search" 
					placeholder="按姓名/课程搜索" 
					placeholderClass="name-placeholder"
					class="center-input"
				/>
				<button @click="getListData(taihumedId, true)">查询</button>
			</view>
		</view>
		<scroll-view scroll-y="true"
			:scroll-top="scrollTop"
			@scrolltolower="loadMore"
			style="height: calc(100vh - 300rpx); margin-top: 185rpx; padding-bottom: 140rpx;"
			v-if="show==true">
			<view class="doctors_list" id="top">
				<view class="doctors_item" v-for="(item,index) in list" :key="index" @click="goToDetail(item)">
					<view class="flex">
						<view class="flex">
							<image v-if="item.squareImage" :src="item.squareImage" class="item_image" mode="aspectFit"></image>
							<image v-else src="../../static/logo_zi.png" class="item_image" mode="aspectFit"></image>
							
							<view class="item_right" v-if="currentCateIndex!=2">
								<view class="item_top">
									<text class="item_name" v-if="item.taihuTalent&&item.taihuTalent.length>0">{{item.taihuTalent[0].name}}</text>
								</view>
								<text class="item_con">{{item.title}}</text>
							</view>
							
							<view class="item_right" v-else>
								<view class="item_top">
									<text class="item_name">{{item.title}}</text>
								</view>
								<text class="item_con">{{ item.taihuTalent.map(talent => talent.name).join(' ') }}</text>
							</view>
						</view>
					</view>
					
					<view class="list_item_bt">
						<view class="list_item_price" v-if="item.courseCatalogueEntityList.length==1">
							<text v-if="item.courseCatalogueEntityList[0].halfFee==0">免费</text>
							<text v-else>¥{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
						</view>
						<view class="list_item_price" v-if="item.courseCatalogueEntityList.length>1">
							<text v-for="(v,i) in item.courseCatalogueEntityList" :key="i">
								{{formatContent(v.title)}}<text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
							</text>
							<text v-if="item.courseCatalogueEntityList[0].halfFee==0" style="padding-left: 20rpx;">免费</text>
							<text v-else style="margin-left: 20rpx;">各{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
						</view>
						<text class="list_item_study">了解课程</text>
					</view>
				</view>
			</view>
			<text v-show="showText&&count>list.length" class="show-more">加载更多</text>
			<text v-show="noMore" class="no-more">没有更多了</text>
		</scroll-view>
		<text class="null_text" v-else>{{null_text}}</text>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
	data() {
		return {
			tabsList: [],
			currentCateIndex: 0,
			list: [],
			null_text: '',
			
			current: 1,
			limit: 10,
			courseName: '',
			taihumedId: null,
			
			timer: null,
			showText: false,
			noMore: false,
			show: null,
			count: 0,
			scrollTop: 0,  //滚动位置
			isRefreshing: false,  //刷新状态
		}
	},
	onPullDownRefresh() {
		this.isRefreshing = true;
		console.log("下拉刷新");
		
		setTimeout(() => {
			this.current = 1;
			this.list = [];
			this.noMore = false;
			
			this.getListData(this.tabsList[this.currentCateIndex].id);
			uni.stopPullDownRefresh();
			this.isRefreshing = false;
			console.log("下拉刷新已停止");
		}, 800);
	},
	onLoad() {
		uni.hideTabBar();
		this.getTabData();
	},
	onShow() {
		
	},
	methods: {
		//判断显示‘上/中/下’
		formatContent(content) {
		  const keywords = ["上部", "中部", "下部"];
		  let result = [];
			
		  // 判断是否包含关键字
		  keywords.forEach((keyword) => {
			if (content.includes(keyword)) {
			  result.push(keyword.substring(0, 1));
			}
		  });
		  return result.join("");
		},
		//获取tab数据
		getTabData() {
			this.$http.request({
				url: 'taihumed/course/getCourseTaihumedList',
				method: "POST",
				data: {},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if (res.list&&res.list.length>0) {
					this.tabsList = res.list;
					this.taihumedId = this.tabsList[0].id;
					this.getListData(this.taihumedId);
				}
			});
		},
		//获取列表数据
		getListData(taihumedId, type) {
			if(type){
				this.current = 1;
				this.list = [];
				this.noMore = false;
			}
			if(this.noMore){
				return false;
			};
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'taihumed/course/getCourseToTaihumedList',
				method: "POST",
				data: {
					current: this.current,
					limit: this.limit,
					taihumedId: taihumedId,
					userName: '',
					courseName: this.courseName
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				uni.hideLoading();
				
				this.count = res.pageRes.total;  //总数
				let length = res.pageRes.records.length;
				if (res.pageRes.records&&length>0) {
					this.show = true;
					//如果返回的数据少于每页数量，表示没有更多数据
					if(this.count==length||length < this.limit){
						this.noMore = true;
					}
					this.list = [...this.list, ...res.pageRes.records];
					this.current += 1;  //更新页码
					//显示提示语
					this.showText = true;
					
					if(this.current==2||type){
						this.scrollTop = 0
						this.$nextTick(() => {
							this.scrollTop = 0.1;  // 确保触发滚动
						})
					}
				}else{
					this.show = false;
					this.null_text = '暂无数据';
				}
			});
		},
		//加载更多
		loadMore(){
			this.getListData(this.taihumedId);
		},
		//切换tab状态
		ordersTabCLi(data, index) {
			this.currentCateIndex = index;
			this.courseName = '';
			this.taihumedId = data.id;
			//重置
			this.list = [];
			this.noMore = false;
			this.show = false;
			this.count = 0;
			this.current = 1;
			this.getListData(this.taihumedId);
		},
		//详情
		goToDetail(item){
			if (this.isRefreshing) return;
			uni.navigateTo({
				url: `/pages/curriculum/index?navTitle=${item.title}&title=${item.title}&id=${item.id}`
			});
		},
		
	},
}
</script>

<style lang="scss" scoped>
@import '@/static/mixin.scss';
.content{
	height: 100%;
	overflow: auto;
	background-color: #fff;
}
.doctors_list{
	margin: 0 30rpx 20rpx;
}
.doctors_item{
	border: 1rpx solid $themeColor;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	padding: 25rpx 25rpx 60rpx;
	display: flex;
	align-items: center;
	position: relative;
}
.item_image{
	display: block;
	width: 200rpx;
	height: 200rpx;
	flex-shrink: 0;
	background: #f3f3f3;
}
.item_right{
	width: calc(100% - 200rpx);
	margin-left: 30rpx;
	padding-bottom: 20rpx;
}
.item_top{
	display: flex;
	align-items: center;
	line-height: 40rpx;
}
.item_name{
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}
.item_title{
	font-size: 32rpx;
	color: #333;
}
.item_con{
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-top: 10rpx;
	line-height: 40rpx;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.null_text{
	display: block;
	text-align: center;
	font-size: 30rpx;
	color: #999;
	padding-top: 300rpx;
}
.doctors_module{
	width: 100%;
	position: fixed;
	z-index: 99;
	left: 0;
}
.cateList{
	background: #f3f3f3;
}
.flex{
	 display: flex; 
	 align-items: center; 
	 width: 100%;
}

.name_search{
	background-color: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	
	/deep/.is-input-border{
		background-color: #f3f3f3;
		border-radius: 50rpx;
		height: 60rpx;
		line-height: 30rpx;
		padding: 15rpx;
		font-size: 28rpx;
		color: #666;
	}
	/deep/.uni-easyinput__content-input{
		
	}
	.name-placeholder{
		font-size: 28rpx;
		text-align: center;
		color: #666;
	}
	
	button{
		background-color: $themeBgColor;
		font-size: 26rpx;
		line-height: 36rpx;
		border-radius: 15rpx;
		color: #fff;
		padding: 5rpx 20rpx;
		margin-left: 15rpx;
	}
}
.show-more,.no-more{
	display: inline-block;
	width: 100%;
	font-size: 24rpx;
	padding-top: 5rpx;
	color: #ccc;
	text-align: center;
}


.list_item_study{
	line-height: 48rpx;
	background: $themeBgColor;
	color: #fff;
	border-radius: 40rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
}
.list_item_bt{
	display: flex;
	align-items: center;
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
}
.list_item_price{
	font-size: 30rpx;
	font-weight: 500;
	margin-right: 30rpx;
	color: red;
	line-height: 54rpx;
}
</style>