<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="pic"></image>
			</swiper-item>
		</swiper>
		<view class="whitepobox">
			<view>{{form.name}}</view>
			<view class="pp">培训时间：{{form.hdStart?.substring(0, 10)}} — {{form.hdEnd?.substring(0, 10)}}</view>
			<view class="pp">培训地点：{{form.address}}</view>
			<view class="pp">报道时间：{{form.address}}</view>
			<view class="pp">主办单位：{{form.address}}</view>
			<view class="pp">承办单位：{{form.address}}</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="form.isJdView == 1" @click="gohotelList" src="./img/btn01.png"></image>
				<image class="m1" v-else  style="filter: grayscale(1);" src="./img/btn01.png"></image>
				<image class="m2" v-if="form.isCarView == 1" @click="gocarList" src="./img/btn02.png"></image>
				<image class="m2" v-else style="filter: grayscale(1);" src="./img/btn02.png"></image>
				<image class="m3" v-if="form.isFoodView == 1" @click="gomealList" src="./img/btn03.png"></image>
				<image class="m3" v-else style="filter: grayscale(1);" 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>


	<view class="myEnter" @click="goMycenter"><image src="./img/user.png" mode="aspectFill"></image></view>

		<uni-popup class="popYanZhengBox" ref="popYanZheng" type="center">
			<view class="popup-content">
				<view class="t">温馨提示</view>
				<view class="p">该微信未绑定系统内手机号，绑定手机号后正常使用。</view>
				<button class="start" type="default" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">绑定手机号</button>
			</view>
		</uni-popup>
</template>

<script setup>
	import {
		reactive,
		toRefs,ref,
		getCurrentInstance
	} from 'vue';
	import * as hotel from '@/common/hotel.js';
	import * as loginServer from '@/common/login.js';
	import {
		getWxUser,
		getWxUserPhone
	} from '@/common/login.js';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline,onPullDownRefresh
	} from '@dcloudio/uni-app';
	const app = getApp();
	const popYanZheng = ref(null);
	const loading = ref(false);
	const data = reactive({
		id: null,
		form:{},
		allNow:false
	})
	const {
		id,form,allNow
	} = toRefs(data);
	onLoad(option => {
		if (option.id) {
			id.value = option.id
		}
		if(option.scene){
			id.value = decodeURIComponent(option.scene);
		}
		app.globalData.showFirst = true
	})
	onShow(option => {
		if (app.globalData.isLogin) {
			getData()
		} else {
			app.firstLoadCallback = () => {
				getData()
			};
		}
	})
	onPullDownRefresh(() => {
		getData()
	})
	let goPath
	let currUser
	function checkUserPhone(path) {
		currUser = uni.getStorageSync('currUser')
		if(!currUser){
			loginServer.pcLogin().then(()=>{
				currUser = uni.getStorageSync('currUser')
				if (currUser.phonenumber) {
					// debugger
						return true
					} else {
						popYanZheng.value.open()
						goPath = path
						return false;
					}
			});
		} else {
			if (currUser.phonenumber) {
				return true
			} else {
				popYanZheng.value.open()
				goPath = path
				return false;
			}
		}
	}
	function decryptPhoneNumber(res) {
		// console.log(res)
		loading.value = true
		if (res.detail.errMsg.indexOf('ok') > -1) {
			getWxUserPhone(res.detail).then((data) => {
				console.log(data)
				popYanZheng.value.close()
				uni.redirectTo({
					url: goPath
				})
			}).finally(() => {
				loading.value = false
			});
		} else {
			loading.value = false
		}
	}
	
	function getData() {
		hotel.getTrainDetail(id.value).then(res => {
			form.value = res.data
			app.globalData.carStart = res.data.carStart
			app.globalData.carEnd = res.data.carEnd
			app.globalData.foodStart = res.data.foodStart
			app.globalData.foodEnd = res.data.foodEnd
		})
	}

	function gohotelList() {
		let path = `/pages_hotel/hotel/hotelList?id=${id.value}`;
		if (checkUserPhone(path)) {
			uni.navigateTo({
				url: path
			});
		}
	}
	function gocarList() {
		let path = `/pages_hotel/car/index?activeId=${id.value}`;
		if (checkUserPhone(path)) {
			uni.navigateTo({
				url: path
			});
		}
	}
	function gomealList() {
		let path = `/pages_hotel/eat/index?activeId=${id.value}`;
		if (checkUserPhone(path)) {
			uni.navigateTo({
				url: path
			});
		}
	}
	function goInvoice(){
		const remarks  = encodeURIComponent(JSON.stringify(form.value.remarks))
		let path = `/pages_hotel/hotel/invoice?activeId=${id.value}&remarks=${remarks}&kpType=${form.value.kpType}`;
		if (checkUserPhone(path)) {
			uni.navigateTo({
				url: path
			});
		}
	}
	function goIllustrate(){
		let path = `/pages_hotel/hotel/illustrate?activeId=${id.value}`;
		if (checkUserPhone(path)) {
			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
	}
	function goMycenter(){
		let path = `/pages_hotel/hotel/mycenter`;
		if (checkUserPhone(path)) {
			uni.navigateTo({
				url: path
			});
		}
	}
</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>