<template>
	<view class="page-movie" v-if="info">
		
		<uni-nav-bar :fixed="true"  height="180rpx " title="活动详情" color="#FFF"  left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
		
		<view class="movie-bg">
			<view class="move-content">
				<!-- 影剧信息 -->
				<view class="section1">
					<view class="movie-img">
						<image :src="info.imageUrl" mode="aspectFill" class="img"></image>
					</view>
					<view class="intro">
						<view class="title">{{info.name}}</view>
						<view class="tips">{{info.tips}}</view>
					 
					</view>
					<view class="price">
						<text class="sign">￥</text>{{info.price}}
					</view>
				</view>
				<!-- 联系地址 -->
				<view class="section2">
					<view class="address">
						<block v-if="plan!=null">
						
						<view class="part">
							 <view class="icon">
								  <uni-icons custom-prefix="custom-icon" type="calendar" size="20" color="#bd3c3c"></uni-icons>
							</view>
							<view class="text">
								日期：{{plan.startDate}} - {{plan.endDate}} ({{plan.startTime}} - {{plan.endTime}})
							</view> 
						</view>
						</block>
						<block v-else>
							<view class="part">
								 <view class="icon">
									 <uni-icons custom-prefix="custom-icon" type="calendar" size="20" color="#bd3c3c"></uni-icons> 
								</view>
								<view class="text">
									时间：暂无时间按排
								</view> 
							</view>
						
						</block>
						<view class="part" @click="onOpenMap">
							<view class="icon">
								<uni-icons custom-prefix="custom-icon" type="location" size="20" color="#bd3c3c"></uni-icons>
							</view>
							<view class="text" >
								地点:{{info.address}}
							</view>
						</view>
					</view>
					<view class="customer">
						<view class="icon">
							<button open-type="contact" hover-class="none" style="background: none;"><uni-icons custom-prefix="custom-icon" type="chat" size="20" color="#bd3c3c"></uni-icons> </button>
						</view>
						<view class="name">客服</view>
					</view>
				</view>
				
				<!-- 主持人 -->
			 
				<view class="section3">
					<ChairMan :type="info.type" :info="performer"></ChairMan> 
				</view>
				<!-- 拼车中 -->
				<view class="section4"  v-if="info.type=='1' && plan!=null">
					<view class="spare">
						<view class="status">
							<view class="txt">拼车中</view>
							<view class="status1">
								接受拼车中
							</view>
							 
						</view>
						<view class="time">
							<view class="part">
								<view class="txt">截止拼车</view>
								<view class="result">当前预约人数：</view>
							</view>
							<view class="part">
								<view class="txt">
									<view>{{plan.zcDate}}</view>
									<view>{{plan.startTime}}-{{plan.endTime}}</view>
								</view>
								
								<view class="result">{{plan.reqQty}}/{{plan.allowReqQty}}</view>
							</view>
						</view>
					</view>
					<view class="btns">
						<button class="btn-share" open-type="share" hover-class="none" >分享拼车</button>
					</view>
				</view>
				
				
				
				<view class="section4"  v-if="info.type=='2'">
					<view class="spare">
						<view class="status">
							
							<view class="status1">
								接受预约中
							</view>
							 
						</view>
						<view class="time" v-if="plan!=null">
							<view class="part"> 
								<view class="result" style="padding-left:10px;padding-top: 20px;"><text>当前预约人数：{{plan.reqQty+info.underLineQty}}/{{plan.allowReqQty+info.underLineQty}}人</text></view>
							</view> 
						</view>
					</view>
					<view class="btns">
						<button class="btn-share" open-type="share" hover-class="none" >分享活动</button>
					</view>
				</view>
			<!-- 	<view class="section5" v-if="info.perFormerList.length>0">
					<view class="header-list">
						<block v-for="(it,index) in info.perFormerList">
							<view class="user">
								<image :src="it.image"   class="img"></image>
							</view> 
						</block> 
					</view>
				</view> -->
				<!-- 角色介绍 -->
				<!-- <view class="section6">
					<view class="title">角色介绍</view>
					<view class="users">
						<view class="user">
							<view class="img">
								<image src="../../../static/temp/temp.png" class="icon"></image>
							</view>
							<view class='name'>姓名</view>
						</view>
						<view class="user">
							<view class="img">
								<image src="../../../static/temp/temp.png" class="icon"></image>
							</view>
							<view class='name'>姓名</view>
						</view>
					</view> 
				</view> -->
				
				<view class="section7">
					<view class="title">活动介绍</view>
					<view class="content">  
						<rich-text :nodes="info.content"></rich-text> 
					</view>
					<view class="title" v-if="info.comments.length>0">往期活动</view>
					<view class="content1" style="width:100%!important;">
						<block  v-for="(it,index) in info.comments" :key="index">
						 
							 
								<image :src="it" mode="widthFix" style="width:100%!important; " ></image>
							 
						</block>
					</view> 
				</view>
				
			</view>
			
			<view class="footer">
				<view class="footer-left">
					<!-- <view class="step-qty">
						<uni-number-box  />
					</view>
					<view class="intro">
						单人限购2张
					</view> -->
				</view>
				<view class="right">
					<text class="text" @click="onOpenTimer">{{ info.type === 1 ? '确认拼场' : (info.type === 2 ? '预约活动' : '') }}</text>
				</view>
			</view>
		</view>
		
		
		<uni-popup ref="calenderPop">
			<view class="times">
				<view class="calender-box">
					<uni-calendar 
					class="uni-calendar--hook" 
					:lunar="true" 
					:selected="planSelected" 
					:showMonth="true"
					:startDate="startDate"
					 @change="onChangeCalender" 
					/>
				</view> 
			</view> 
		</uni-popup>
		
		<map id="map" ref="map" style="display: none;"  v-if="info && info.id>0" :show-location="true" :latitude="info.latitude" :longitude="info.longitude"></map>
			 
		
		
		<!-- <uni-popup ref="yyForm">
			<view class="yyform-item" v-if="currentReq!=null">
				<view class="item">
					<view class="caption">预约日期：</view>
					<view class="text">
						<uni-data-select
						      :value="dataForm.yyDate"
						      :localdata="planListItem"
						      @change="onChangeYYDate"
						    ></uni-data-select>
					</view> 
				</view>
				<view class="item">
					<view class="caption">预约人数：</view>
					<view class="text">
						<uni-easyinput type="number" v-model="dataForm.yyQty" value="1" placeholder="请输入预约人数"></uni-easyinput> 
					</view> 
				</view>
				<view class="item">
					<view class="caption">预约人姓名：</view>
					<view class="text">
						<uni-easyinput type="text" v-model="dataForm.yyname"   placeholder="请填写预约人姓名"></uni-easyinput> 
					</view> 
				</view>
				<view class="item">
					<button class="btn">提交预约</button>
				</view>
			</view> 
			
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	const app = getApp();
	let hideLoading = true;
	import ChairMan from "@/components/ChairMan/ChairMan.vue"
	import {rebuildHtml} from "@/utils/util.js"
	

	export default {
		components:{
			ChairMan,
		},
		computed: {
			...mapState(['store_id','systemInfo'])
		},
		data() {
			return {
				movieId:0,
				info:null,
				performer:null,
				plan:[],
				planList:[],
				planSelected:[],
				startDate:'',
				currentReq:null,
				planListItem:[],
				longitude:'',
				latitude:'',
				dataForm:{ 
					zcId:0,
					reqDate:'',
					userId:0,
				},
			};
		},
		onLoad(option){
			this.movieId=option.id||0;
			this.dataForm.zcId=this.movieId;
			this.dataForm.userId=uni.getStorageSync("user_id");
			console.log(this.dataForm.userId);
			
		},
		onReady() {
			setTimeout(()=>{
				this.initMovieInfo(); 
			},300);
		},
		methods:{
			
			
			onChangeYYDate(e){
				
			},
			//切换日期
			onChangeCalender(e){ 
				let _this=this;   
				if(e.extraInfo?.data!=undefined){
					if(e.extraInfo.data.count.readyQty<=e.extraInfo.data.count.totalQty){ 
						 _this.dataForm.reqDate=e.extraInfo.date;
						 // #ifdef MP-WEIXIN
							 if(_this.dataForm.userId<=0){
								 uni.showToast({
									title:"用户信息不存在",
									icon:'none'
								 });
								 return false;
							 }  
							 _this.confirmCreateReq();  
						 // #endif
						// #ifndef MP-WEIXIN
						uni.showToast({
							title:'请使用小程序提交',
							icon:'none'
						})
						// #endif
					}
				} 
			}, 
			onOpenMap(e){
			  let _this=this; 
			  console.log(_this.info);
			  _this._mapContext = uni.createMapContext("map", _this); 
			  _this._mapContext.openMapApp({
				  longitude:parseFloat(_this.info.longitude),
				  latitude:parseFloat(_this.info.latitude),
				  destination:_this.info.address,
				  success:(res)=>{
					  console.log("success");
				  },
				  fail:(res)=>{
					  console.log("fail");
					  
				  },
				  complete:(res)=>{
					  console.log(_this.info);
				  }
			  }) 
			
			},
			confirmCreateReq(){
				let _this=this; 
				uni.showModal({
					title:'确认预约',
					content:'您是否确认提交预约信息',
					cancelText:"取消",
					confirmText:"确认",
					success:(confirm)=>{ 
						if(confirm.confirm){
							_this.$http.request('zc/createReq',_this.dataForm, "", "", true).then(res => { 
								
									if(res.code==200){
										if(res.data.payStatus=='2'){
											//末支付
											// #ifdef MP-WEIXIN
											wx.requestPayment({
												timeStamp: res.data.timeStamp,
												nonceStr: res.data.nonceStr,
												package: res.data.package,
												signType: res.data.signType,
												paySign: res.data.paySign,
												success: (res) => { 
													uni.showToast({
														title:'您的预约申请已成功提交',
														icon:'success',
														success: (res) => {
															_this.$refs.calenderPop.close();
														}
													})	
												},
												fail: (res) => {
													uni.showToast({
														title:'支付失败',
														icon:'error',
													})
												}
											})
											
											// #endif
											
										}else{
											
											uni.showToast({
												title:'您的预约申请已成功提交',
												icon:'success',
												success: () => {
													_this.$refs.calenderPop.close();
												}
											})
										}
										
										
									}
								
															 
							}).catch(err => {})  
						} 
					}
				})
				
				
			},
			onBack(e){
				uni.navigateBack(-1);
			}, 
			onOpenTimer(e){
				if(this.plan==null){
					uni.showToast({
						title:"活动已过期,或暂无计划",
						icon:"error"
					})
					return;
				}
				
				
				this.$refs.calenderPop.open('bottom');
				let d=new Date();
				this.startDate=d.getFullYear()+"-"+(d.getMonth()+1)+'-'+d.getDate();
				this.loadPlanList();
			},
			
			//加载计划列表
			loadPlanList(){
				let _this=this;
				_this.$http.request('zc/plan', { 
					zcId:_this.info.id,
				}, "", "", hideLoading).then(res => {  
					_this.planList=res.data.dataList; 
					_this.planSelected=res.data.dataList.map(res=>{
						let info=res.count.readyQty>=res.count.totalQty?"已约满":"可预约"+res.count.readyQty+"/"+res.count.totalQty;  
						return {
							date:res.date,
							info:info,
							data:{
								...res,
								custom:'已预约'+res.count.readyQty+"/"+res.count.totalQty+"人",
								name:'预约信息'
							}
						}
					})  
				}).catch(err => {})
			},
			//加载活动信息
			initMovieInfo(){
				let _this=this;
				_this.$http.request('zc/info', { 
					id:this.movieId
				}, "", "", hideLoading).then(res => {  
					_this.info=res.data.info;  
				 
					_this.performer=res.data.perFormer;
					_this.plan=res.data.plan; 
					
					_this.info.content=_this.info.content.replace(/\<img/gi, '<img style="width:100%";height:auto')
					_this.info.comments=_this.info.comments.replace(/\<img/gi, '<img style="width:100%";height:auto')
					
			 
				}).catch(err => {})
			},
		}
		
	}
</script>

<style lang="scss">
@import './movie.scss';
</style>
