<template>
	<view class="box">
		<view class="image"><img class="img" :src="form.cover" mode="aspectFill" /></view>
		<view class="nav">
			<view class="nav-title">{{ form.trainName }}</view>
			<view class="nva-center">
				<view class="nav-card color" v-if="state == '报名中'">{{ state }}</view>
				<view class="nav-card color1" v-if="state == '进行中'">{{ state }}</view>
				<view class="nav-card color2" v-if="state == '即将开始'">{{ state }}</view>
				<view class="nav-card color3" v-if="state == '已结束'">{{ state }}</view>
				<view class="nav-card color4" v-if="state == '报名未开始'">{{ state }}</view>
				<view class="nav-card color4" v-if="state == '培训未开始'">{{ state }}</view>

				<view class="nav-timer">报名截止：{{ filterTime(form.enrollEndTime) }}</view>
			</view>
		</view>
		<view class="conter">
			<uni-segmented-control
				activeColor="#000"
				:current="current"
				:values="items"
				@clickItem="onClickItem"
				styleType="text"
			></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<view class="conter-top">
						<view class="text">报名须知</view>
						<view>
							<view class="text-content" :class="height ? 'hidden' : ''">{{ form.enrollNotice }}</view>
						</view>
						<view class="examine" @click="move" v-if="showMore">
							{{ flag ? '查看更多' : '收起' }}
							<uni-icons type="right" color="#1ec886" v-if="flag"></uni-icons>
							<uni-icons type="top" color="#1ec886" v-else></uni-icons>
						</view>
					</view>
					<view class="conter-middle">
						<view class="text">组委会</view>
						<view class="text-group">
							<view class="text-g-left">主办单位：</view>
							<view class="text-g-right">{{ form.organizer }}</view>
						</view>
						<view class="text-group">
							<view class="text-g-left">承办单位：</view>
							<view class="text-g-right">{{ form.undertaker }}</view>
						</view>
						<view class="text-group">
							<view class="text-g-left">联系电话：</view>
							<view class="text-g-right">{{ form.contactUs }}</view>
						</view>
					</view>
					<view class="conter-bottom">
						<view class="text">项目</view>
						<view class="nav-bar" @click="trainFN('bottom')">
							<view class="nav-bar-text">培训科目</view>
							<view class="nav-bar-icon"><uni-icons type="forward"></uni-icons></view>
						</view>
						<view class="nav-bar" @click="examinationFN('bottom')">
							<view class="nav-bar-text">考试科目</view>
							<view class="nav-bar-icon"><uni-icons type="forward"></uni-icons></view>
						</view>
					</view>
				</view>
				<view v-show="current === 1"><trainnSchedule :scheduleList="scheduleList" /></view>
			</view>
		</view>
		<view class="buttonBox" v-if="current == 0">
			<view class="conter-button">
				<view class="button" v-if="false" @click="registered()">已报名</view>
				<view
					class="button"
					v-if="
						state != 0 &&
							state != 1 &&
							state != 5 &&
							signStatusStr != '报名结束' &&
							signStatusStr != '报名未开始'
					"
					@click="applyFN()"
				>
					我要报名
				</view>
				<view class="info" v-if="signStatusStr == '报名结束'">报名结束</view>
				<view class="info" v-if="signStatusStr == '等待审核'">已报名</view>
				<view class="blue" v-if="signStatusStr == '报名未开始'">报名未开始</view>
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="title">
					<view class="titel-left">{{ text }}</view>
					<view class="title-right" @click="shut">
						<uni-icons class="icons" type="closeempty"></uni-icons>
					</view>
				</view>
				<view class="popup-check" v-for="item in trainList" :key="item.id">
					{{ item.projectName }} &nbsp;（{{ item.isNecessary == 1 ? '必选' : '非必选' }}）
				</view>
			</view>
		</uni-popup>
	</view>
</template>

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

const items = ref(['详情', '日程']);
const current = ref(0);
const show = ref(true);
const showMore = ref(false);
const popup = ref();
const state = ref();
const signStatusStr = ref();
const id = ref();
const userList = ref();
const type = ref('center');
const trainList = ref();
const text = ref();
const scheduleList = ref();
const height = ref();
const flag = ref(true);
const status = ref();
const tiem = ref(new Date().getTime());
const newTime = ref();
const data = reactive({
	addForm: {},
	form: {}
});
const { addForm, form } = toRefs(data);

onLoad(option => {
	const item = JSON.parse(decodeURIComponent(option.item));
	id.value = item.trainId;
	status.value = item.status;
	initData();
});

function filterTime(num) {
	if (num) return num.slice(0, 16);
}

// 获取详情数据
async function initData() {
	addForm.value.id = id.value;
	let res = await train.trainParticulars(addForm.value);
	form.value = res.data;
	signStatusStr.value = res.data.signStatusStr;
	state.value = res.data.signStatus;
	newTime.value = new Date(res.data.enrollEndTime).getTime();
	userList.value = res.data.userList[0];
	scheduleList.value = res.data.scheduleList;
	setTimeout(() => {
		getbox();
	}, 50);
}

function change(e) {
	show.value = e.show;
}

// 培训
async function trainFN(val) {
	text.value = '培训科目';
	popup.value.open(val);
	trainList.value = form.value.trainProjectsList;
}

// 考试
function examinationFN(val) {
	text.value = '考试科目';
	popup.value.open(val);
	trainList.value = form.value.examProjectsList;
}

// 分段器
function onClickItem(e) {
	if (current.values != e.currentIndex) {
		current.value = e.currentIndex;
	}
}
// 已报名
function registered() {
	uni.showToast({
		title: '已报名，请不要重复报名！',
		duration: 2000,
		icon: 'error'
	});
	return false;
}

// 获取容器高度
function getbox() {
	const query = wx.createSelectorQuery();
	query
		.select('.text-content')
		.boundingClientRect(function(rect) {
			height.value = rect.height;
			if (rect.height > 60) {
				showMore.value = true;
			} else {
				showMore.value = false;
			}
		})
		.exec();
}

// 查看更多与收起
function getShow() {
	if (height.value > 60) {
		// 显示查看更多
		showMore.value = true;
		// 固定容器高度
	} else {
		// 隐藏查看更多
		showMore.value = false;
	}
}

// 点击查看更多
const move = () => {
	// 1.文字 icon 转换
	// 2.容器高度自适应
	flag.value = !flag.value;
	if (!flag.value) {
		height.value = undefined;
	} else {
		height.value = 60;
	}
};

function applyFN() {
	let path = '/pages/train/apply/apply?data=' + [id.value, status.value];
	wx.redirectTo({
		url: path
	});
}

// 关闭弹框
function shut() {
	popup.value.close();
}
</script>

<style lang="scss">
.box {
	background-color: #f7f8fa;

	.image {
		padding: 25rpx;
		height: 320rpx;
		background: #fff;
		border-radius: 15rpx;

		.img {
			width: 100%;
			height: 320rpx;
			border-radius: 15rpx;
		}
	}

	.nav {
		padding: 30rpx 25rpx;
		background-color: #fff;

		.nav-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.nva-center {
			display: flex;
			margin-top: 25rpx;
			margin-bottom: 25rpx;

			.nav-card {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				height: 32rpx;
				width: 94rpx;
				line-height: 32rpx;
				border-radius: 16rpx 16rpx 16rpx 0rpx;
			}

			.color {
				background: linear-gradient(270deg, #54e1b9, #00caa6);
			}

			.color1 {
				background: linear-gradient(270deg, #be8efb, #a76df4);
			}

			.color2 {
				background: linear-gradient(270deg, #fea449, #ffb95f);
			}

			.color3 {
				background: linear-gradient(270deg, #d9d9d9, #bcbcbc);
			}

			.color4 {
				background: linear-gradient(270deg, #40d8ee, #53a7f6);
			}

			.nav-timer {
				margin-left: 13rpx;
				height: 23rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #7b7f83;
				sline-height: 56rpx;
			}
		}
	}

	.buttonBox {
		background-color: #fff;
		width: 100%;

		.conter-button {
			width: 100%;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 10rpx 0;

			.button {
				margin: 0 auto;
				height: 80rpx;
				width: 500rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 80rpx;
				background: linear-gradient(270deg, #54e1b9, #00caa6);
				border-radius: 40rpx;
			}

			.info {
				margin: 0 auto;
				height: 80rpx;
				width: 500rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 80rpx;
				background: linear-gradient(270deg, #d9d9d9, #bcbcbc);
				border-radius: 40rpx;
			}
			.blue {
				margin: 0 auto;
				height: 80rpx;
				width: 500rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 80rpx;
				background: linear-gradient(270deg, #40d8ee, #53a7f6);
				border-radius: 40rpx;
			}
		}
	}

	// 分段器
	.conter {
		.conter-top {
			margin-top: 14rpx;
			min-height: 250rpx;
			padding: 25rpx;
			background-color: #fff;
			border-radius: 15rpx;

			.more {
				height: 200rpx !important;
				overflow: hidden;
			}

			.examine {
				display: flex;
				justify-content: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1ec886;
			}

			// 点击加载更多
			.text {
				height: 29rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 36rpx;
				text-align: left;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #eee;
				margin-bottom: 20rpx;
			}

			// 超出3行将隐藏
			.hidden {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				line-height: 40rpx; //行高方便计算
			}

			.text-content {
				overflow: hidden;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #4c5359;
				word-break: break-all;
				line-height: 40rpx;
				text-align: left;
			}

			.uni-list-item {
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #eee;
				font-size: 14px;
			}

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

			.uni-list-item__content-title {
				font-size: 14px;
				color: #666;
			}
		}

		.conter-middle {
			height: 240rpx;
			padding: 25rpx;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 25rpx;

			.text {
				height: 29rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 36rpx;
				text-align: left;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #eee;
				margin-bottom: 20rpx;
			}

			.text-group {
				display: flex;

				.text-g-left {
					height: 48rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #4c5359;
					line-height: 48rpx;
				}

				.text-g-right {
					height: 48rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #2b3133;
					line-height: 48rpx;
				}
			}
		}

		.conter-bottom {
			height: 217rpx;
			padding: 25rpx;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 25rpx;

			.text {
				height: 29rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 36rpx;
				text-align: left;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #eee;
			}

			.nav-bar {
				display: flex;
				justify-content: space-between;
				padding-bottom: 30rpx;
				padding-top: 20rpx;
				border-bottom: 1rpx solid #eee;

				.nav-bar-text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #2b3133;
				}

				.nav-bar-icon {
					font-size: 28rpx;
					color: #95a1a6;
				}
			}
		}

		.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;
		}

		width: 100%;

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

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

		.uni-padding-wrap {
			padding: 0px 30rpx;
		}

		.content {
			padding: 0 30rpx;
		}

		.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: 12px 15px;
			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: 1px;
			border-bottom-color: #eee;
		}

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

	.popup-content {
		padding: 50rpx !important;
		min-height: 500rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

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

			.titel-left {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.title-right {
				.uni-icons {
					font-size: 60rpx !important;
					color: #5a5a5a !important;
				}
			}
		}

		.popup-check {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #4c5359;
			border-top: 1rpx solid #e6e6e6;
			padding-top: 35rpx;
			padding-bottom: 35rpx;
		}
	}
}
</style>