<template>
	<view class="box">
		<view class="title">
			<view class="navSerch">
				<view class="serch">
					<uni-search-bar class="uni-mt-10" radius="30" placeholder="搜索" clearButton="auto" Button="none"
						cancelText="" v-model="name" bgColor="#F4F6FA" @confirm="initData" @blur="initData" @clear="initData" />
				</view>
			</view>
			<view class="searchLeft">
			</view>
		</view>
		<view>

			<view class="nav-box">
				<view class="nav-ul">
					<view class="nva-li" @click="nvaText(index)" :class="{nt:Nindex==index}"
						v-for="(item,index) in items" :key="index">
						{{item}}
					</view>
				</view>
			</view>

			<view class="content">
				<view class="taber">
					<view v-for="item in list" :key="item.trainId" @click="detail(item)">
						<uniList :pic="config.trainUrl_api + item.cover.replaceAll('\\', '/')" :title="item.name" 
							:card="item.signStatusStr" :tags="item.projectsStr"
							:timer="item.signTimeRange"></uniList>
					</view>
				</view>
			</view>
			<view><uni-load-more :status="status" :content-text="contentText" /></view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/config.js'
	import uniList from '@/training/components/ulist/ulist';
	import * as train from '@/training/train.js';
	import {
		onLoad,
		onReady,
		onShareAppMessage,
		onShareTimeline,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref,
		getCurrentInstance,
		reactive,
		toRefs
	} from 'vue';

	const searchValue = ref();
	const items = ref(['全部', '报名中', '培训进行中',  '已结束']);
	const current = ref(0);
	const name = ref();
	const Nindex = ref(0)
	const range = ref([{
			value: 1,
			text: '全部'
		},
		{
			value: 2,
			text: '报名中'
		},
		{
			value: 3,
			text: '进行中'
		},
		{
			value: 4,
			text: '即将开始'
		},
		{
			value: 5,
			text: '报名未开始'
		},
		{
			value: 6,
			text: '培训未开始'
		},
		{
			value: 7,
			text: '已结束'
		}
	]);
	const list = ref();
	const total = ref();
	// noMore没有更多了
	// loading加载中
	// more下来加载
	const status = ref('more');
	const flag = ref();
	const data = reactive({
		query: {
			  flag: '',
			  pageSize: 10,
			  pageNum: 1
		},
		contentText: {
			contentdown: '',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
	});
	const {
		query,
		contentText
	} = toRefs(data);

	// 加载培训列表数据
	onLoad(option => {
		initData();

	});

	function initData() {
		query.value.flag = current.value;
		train.getTrainList(query.value).then(res=>{
			list.value = res.rows;
			total.value = res.total;
		})
	}

	// 详情页
	function detail(item) {
		let path = `/training/detailPage?trainId=${item.id}`;
		uni.navigateTo({
			url: path
		});
	}

	function nvaText(index) {
		Nindex.value = index
		current.value = index
		initData()
		console.log(index);
	}



	// 下来刷新
	onPullDownRefresh(() => {
		query.value.flag = 0;
		initData();
		wx.stopPullDownRefresh();
	});

	// 上拉加载
	onReachBottom(async () => {
		console.log(list.value.length,total.value)
		if (list.value.length >= total.value) {
			status.value = 'noMore';
			return false;
		} else {
			status.value = 'loading';
			query.value.pageNum += 1;
			let res = await train.getTrainList(query.value);
			let arr = res.rows;
			list.value = list.value.concat(arr);
			total.value = res.total;
			status.value = 'noMore';
		}
	});
</script>

<style lang="scss">
	.uni-section-header {
		display: none !important;
	}

	.box {
		background-color: #fff;
	}

	.nav-box {
		overflow-x: scroll;
	}

	.nav-ul {
		display: flex;
		justify-content: space-around;
		width: 100%;

	}

	.nva-li {
		font-size: 26rpx;
		padding: 10rpx 0rpx;
		margin: 0 15rpx;

	}

	.nt {
		font-size: 30rpx;
		font-weight: 400;
		border-bottom: 4rpx solid #AD181F;
	}


	.taber {
		width: 100%;
		padding: 25rpx 30rpx;
		padding-bottom: 0;
	}

	.segmented-control__text {
		font-size: 26rpx !important;
		font-family: PingFang SC !important;
		font-weight: 400 !important;
		color: #4c5359 !important;
	}

	.segmented-control__item--text {
		border-bottom: 4rpx solid #54e1b9;
		font-size: 30rpx !important;
		font-family: PingFang SC !important;
		font-weight: 500 !important;
		color: #2b3133 !important;
	}

	.title {
		display: flex;
		justify-content: space-between;

		.navSerch {
			width:100%;height:100rpx;flex:1 1 auto;
			position: relative;

			.serch {
				width:100%;
			}
		}

		.searchLeft {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			margin-top: 25rpx;
			display: flex;
		}

		.uni-searchbar__cancel {
			display: none;
		}

		:deep(.uni-select) {
			border: 0;
			// padding-left: 20rpx;
		}

		:deep(.uni-select__input-text) {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			margin-right: 14rpx;
			width: 110rpx;
			text-align: right;
		}

		:deep(.uni-select__selector-item) {
			// padding: 0 auto;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	// 搜索框
	.search-result {
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14rpx;
		color: #666;
	}

	:deep(.uni-searchbar) {box-sizing: border-box;
	}

	.uni-searchbar__box {
		padding-right: 0rpx !important;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		width: 600rpx;
	}

	// 分段器
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30rpx;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0rpx 30rpx;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		// height: 1235rpx;
		text-align: center;
	}

	.content-text {
		font-size: 14rpx;
		color: #666;
	}

	.color-tag {
		width: 25rpx;
		height: 25rpx;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #ffffff;
	}

	.uni-list-item__container {
		padding: 12rpx 15rpx;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14rpx;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12rpx;
		color: #999;
	}
</style>