<template>
	<view style="padding-bottom: 60rpx;">
		<swiper class="swiper" circular autoplay="true">
			<swiper-item v-for="(pic,index) in form.photos?.split(',')" :key="index">
				<image class="cover" mode="aspectFill" :src="config.baseUrl_api + pic"></image>
			</swiper-item>
		</swiper>
		<view class="whitepobox">
			<view>{{form.name}}</view>
			<view class="pp">报到时间：{{form.reportDate?.substring(0, 10)}}</view>
			<view class="pp">培训时间：{{form.trainStart?.substring(0, 10)}} — {{form.trainEnd?.substring(0, 10)}}</view>
			<!-- <view class="pp">培训地点：{{form.address}}</view> -->
			<!-- <view class="pp">主办单位：{{form.organizer}}</view> -->
			<!-- <view class="pp">承办单位：{{form.manager}}</view> -->
		</view>

		<view class="whiteItem">
			<view class="tt"> 培训简介</view>
			<view class="pp" :class="allNow?'autoHeight':'onelineHeight'" v-html="form.introduction"></view>
			<view class="formore" @click="changeIntroductionHeight" v-show="form.introduction?.length>20">
				<view v-show="!allNow">展开详情 <uni-icons type="bottom" color='#1EC886' size="12"></uni-icons></view>
				<view v-show="allNow"> 收起 <uni-icons type="top" color='#1EC886' size="12"></uni-icons></view>

			</view>
		</view>

		<view class="whiteItem">
			<view class="qbox">
				<image class="m1" v-if="isApply == '0'" @click="goTrainForm" src="./img/btn01.png"></image>
				<image class="m1" @click="goTrainForm" v-else style="filter: grayscale(1);" src="./img/btn01.png">
				</image>
				<image class="m2" @click="goInfo(1)" src="./img/btn02.png"></image>
				<image class="m3" @click="goInfo(2)" src="./img/btn03.png"></image>
			</view>
		</view>
		<view class="whiteItem">
			<view class="tt">其他事项</view>
			<view class="myList">
				<uni-list :border="false">
					<uni-list-item :border="true" title="报名提醒" showArrow :clickable="true" @click="goIllustrate">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="./img/qt01.png" mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :border="true" title="发票开具" showArrow :clickable="true" @click="goInvoice">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="./img/qt02.png" mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :border="true" title="联系电话" showArrow :clickable="true"
						@click="callphone(form.phone)">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="./img/qt03.png" mode="widthFix"></image>
							</view>
						</template>
					</uni-list-item>
					<!-- 					<uni-list-item :border="true" title="在线客服" :clickable="true">
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" src="./img/qt04.png" mode="widthFix"></image>
							</view>
						</template>
						<template v-slot:footer>
							<button size="mini" class="kfbtn" open-type="contact" bindcontact="handleContact" @contact="contactBack" session-from="sessionFrom"> 
								<uni-icons type="forward" color="#bbb" size="16"></uni-icons>
							 </button>
						</template>
					</uni-list-item> -->

				</uni-list>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		getCurrentInstance
	} from 'vue';
	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import config from '@/config';
	import dayjs from 'dayjs'
	const app = getApp();
	const popYanZheng = ref(null);
	const loading = ref(false);
	const data = reactive({
		id: null,
		form: {},
		allNow: false,
		isApply: '0'
	})
	const {
		id,
		form,
		allNow,
		isApply
	} = toRefs(data);
	onLoad(option => {
		if (option.id) {
			id.value = option.id
		}
		if (option.isApply) {
			isApply.value = option.isApply
		}
		if (option.scene) {
			id.value = decodeURIComponent(option.scene);
		}
		app.globalData.showFirst = true
	})
	onShow(option => {
		if (app.globalData.isLogin) {
			getData()
		} else {
			app.firstLoadCallback = () => {
				getData()
			};
		}
	})
	let goPath

	function getData() {
		hotel.getTrainDetail(id.value).then(res => {
			form.value = res.data
			if(form.value.isApply){
				isApply.value = form.value.isApply
			}
		})
	}

	function goTrainForm() {
		if (isApply.value != '0') {
			uni.showModal({
				title: '提示',
				content: ' 已报名，前面个人中心查看详情 ',
				success: function(res) {
					if (res.confirm) {
						let path = `/pages_hotel/hotel/mycenter`;
						uni.navigateTo({
							url: path
						});
					}
				}
			})
			return
		}
		const today = dayjs().valueOf()
		const start = dayjs(form.value.trainStart).valueOf()
		// console.log(today,start)
		if(start<today){
			uni.showToast({
				title:'培训已过期，不能报名',
				icon:'none'
			})
			return
		}
		let path = `/pages/form/index?id=${form.value.id}`;
		uni.navigateTo({
			url: path
		});
	}

	function goInfo(type) {
		let path = `/pages_hotel/hotel/hotelDetail?id=${form.value.id}&type=${type}`;
		uni.navigateTo({
			url: path
		});
	}

	function goInvoice() {
		const remarks = encodeURIComponent(JSON.stringify(form.value.kpExplain))
		let path = `/pages_hotel/hotel/invoice?trainId=${id.value}&remarks=${remarks}&kpType=${form.value.kpType}`;

		uni.navigateTo({
			url: path
		});

	}

	function goIllustrate() {
		let path = `/pages_hotel/hotel/illustrate?trainId=${id.value}`;
		uni.navigateTo({
			url: path
		});
	}

	function callphone(number) {
		uni.makePhoneCall({
			phoneNumber: number
		});
	}

	function handleContact(e) {
		console.log(e.detail.path)
		console.log(e.detail.query)
	}

	function contactBack(e) {
		console.log(e)
	}

	function changeIntroductionHeight() {
		allNow.value = !allNow.value
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-list-item__container) {
		align-items: center;
		padding: 12rpx 30rpx;
	}

	.myList {
		margin: 30rpx 0 0;
	}

	.iconSquera {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 10rpx;
	}

	.cover {
		width: 750rpx;
		height: 360rpx;
	}

	.whitepobox {
		width: 700rpx;
		padding: 26rpx;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;
		background: #fff;
		box-sizing: border-box;
		margin: -40rpx auto 26rpx;
		position: relative;
		z-index: 1;
	}

	.whiteItem {
		width: 700rpx;
		box-sizing: border-box;
		margin: 0 auto 26rpx;
		padding: 26rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
		border-radius: 15rpx;

		.tt {
			line-height: 1;
			border-left: 4rpx solid #1EC886;
			color: #1EC886;
			padding-left: 14rpx;
		}

		.m1 {
			width: 314rpx;
			height: 225rpx;
		}

		.m2 {
			width: 315rpx;
			height: 103rpx;
			float: right;
		}

		.m3 {
			width: 315rpx;
			height: 103rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	.qbox {
		height: 225rpx;
		position: relative;
		width: 100%;
	}

	.slot-image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 30rpx;
	}

	.kfbtn {
		font-size: 30rpx;
		background: transparent;
		padding: 0 0 0 50%;
		margin-right: -10rpx;
	}

	.kfbtn::after {
		border: none;
	}

	.formore {
		border-top: 1px solid #eee;
		text-align: center;
		color: #1EC886;
		font-size: 24rpx;
		padding: 20rpx 0 0;
	}

	.autoHeight {
		height: auto;
	}

	.onelineHeight {
		height: 40rpx;
		overflow: hidden;
	}

	.myEnter {
		position: fixed;
		right: 0;
		bottom: 10%;

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

	.popYanZhengBox {
		text-align: center;

		.popup-content {
			width: 550rpx;
			height: 450rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 15rpx;
		}

		.t {
			font-weight: 500;
			font-size: 34rpx;
			color: #7B7F83;
		}

		.p {
			line-height: 1.8;
			font-size: 30rpx;
			color: #1A1A1A;
			margin-top: 50rpx;
		}

		button {
			width: 268rpx;
			height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			border: none;
			background: linear-gradient(270deg, #54E1B9, #00CAA6);
			border-radius: 40rpx;
			margin-top: 60rpx;
		}
	}
</style>