<template>
	<view class="bg">
		<view class="top-box" >
			<view class="top-left">
				<view class="text-overflow">{{ pInfo.title }}</view>
				<view style="margin-top: 20rpx;">
					<view class="left-subtitle" v-if="allSeldDate.length > 0">{{allSeldDate[seldDateIndex].date}} {{ShowDateDay(new Date(allSeldDate[seldDateIndex].date).getDay())}}</view>
					<view class="left-subtitle"  v-if="timesArr.length > 0">{{ timesArr[seldTimeIndex].start_time }}-{{ timesArr[seldTimeIndex].end_time }} 入园</view>
				</view>
			</view>
			<view @click="showSkuPopup = true" v-if="this.sInfo.ticket_type != 2">修改 ></view>
		</view>
		
		 <view class="num-box" v-for="(skuItem,skuIndex) in pInfo.specifications" :key="skuIndex">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view class="left-title text-overflow">{{skuItem.title}}</view>
				<view class="left-price">{{skuItem.price / 100}}</view>
				<view class="num-right">
					<view class="btn-num" v-if="!skuItem.originate_order_id && !skuItem.gp_id" :class="{no:skuItem.originate_order_id}" @click="delNumber(skuItem)" :style="{color: skuItem.buyNum > 1 ? '#fff': '', backgroundColor: skuItem.buyNum > 1 ? '#0B898E' : ''}">-</view>
					<view class="num-span">{{ skuItem.buyNum }}</view>
					<view class="btn-num" v-if="!skuItem.originate_order_id && !skuItem.gp_id" :class="{no:skuItem.originate_order_id}" @click="addNumber(skuItem)" style="color: #fff;background: #0B898E;">+</view>
				</view>
			</view>
			<view class="num-subtitle text-overflow" v-if="skuItem.display_tags" @click="showNoticePopup = true">
				<view class="num-span" v-for="(tagSku,tagSkuIndex) in skuItem.display_tags.split(',').slice(0, 2)" :key="tagSkuIndex">{{ tagSku }} |</view>
				<view class="num-span">预订须知 ></view>
			</view>
		</view>
		
		<view class="people-box" >
			<view class="people-box-sku" v-for="(skuItem,skuIndex) in pInfo.specifications.filter(v=>v.buyNum>=1)" :key="skuIndex">
				<view>{{skuItem.title}}</view>
				<view v-for="(person,personIndex) in skuItem.selPeople" :key="personIndex">
						<view v-if="person.id">123</view>
						
						<view v-else>点击添加出行人信息</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pInfo: {specifications: []}, // 当前商品
				sInfo: {sku_model: {}}, // 当前门票

				minSeldDate: new Date().Format('yyyy-MM-dd'),
				maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 3, 0).Format('yyyy-MM-dd'),
				calendarParam: {
					stratDate:'',endDate: '', selected: []
				},
				allSeldDate: [],
				seldDateIndex: 0,
				timesArr: [],
				seldTimeIndex: 0,
				
				buyNum: 0
			}
		},
		onLoad(options) {
			// this.getList();
			
			uni.$on("updateDataByConnect",this.getDataByConnect)
		},
		
		onShow() {
			this.handlePageData()
		},
		
		onUnload () {
			uni.$off("updateDataByConnect",this.getDataByConnect)
		},
		methods: {
			getDataByConnect(data) {
				if (data.msgType == "updateTicketBookingOrder") {
					uni.setStorageSync('tempData', JSON.stringify(data.data));
					
					// this.pInfo = data.data.pInfo
					// this.sInfo = data.data.sInfo
					// this.minSeldDate=data.data.minSeldDate
					// this.maxSeldDate = data.data.maxSeldDate
					// this.calendarParam = data.data.calendarParam
					// this.allSeldDate = data.data.allSeldDate
					// this.seldDateIndex = data.data.seldDateIndex
					// this.timesArr = data.data.timesArr
					// this.seldTimeIndex = data.data.seldTimeIndex 
				}
			},
			
			handlePageData () {
				let data = uni.getStorageSync('tempData');
				try{
					data = JSON.parse(data)
					this.pInfo = data.pInfo
					this.sInfo = data.sInfo
					this.minSeldDate=data.minSeldDate
					this.maxSeldDate = data.maxSeldDate
					this.calendarParam = data.calendarParam
					this.allSeldDate = data.allSeldDate
					this.seldDateIndex = data.seldDateIndex
					this.timesArr = data.timesArr
					this.seldTimeIndex = data.seldTimeIndex 
					
				} catch(e){
					console.log(e)
				}
			},
			
			
			// 减少数量
			delNumber(skuItem) {
				if (skuItem.buyNum <= 0) {
					return
				}
				// if(this.buyNum == this.seldPeople.length) {
				// 	this.allSeldPeople.forEach(item => {
				// 		if(item.id == this.seldPeople[this.seldPeople.length -1].id) {
				// 			item.is_seld = false
				// 			item.selected = false
				// 		}
				// 	})
				// 	this.seldPeople.pop()
				// }
				skuItem.buyNum -= 1
				skuItem.selPeople.pop()
				// this.removeSeldCoupon()
			},
			// 增加数量
			addNumber(skuItem) {
				skuItem.buyNum += 1
				// if(this.max_num && this.buyNum > this.max_num){
				// 	this.buyNum = this.max_num
				// 	this.$toast("本产品单笔限购"+this.max_num+"份")
				// }
				if (Array.isArray(skuItem.selPeople)) {
					skuItem.selPeople.push({})
				} else {
					skuItem.selPeople = [{}]
				}
			},
			
			// 选择时段
			changeTime(item, index) {
				if(item.stock_number > 0) {
					this.seldTimeIndex = index
				}
			},
			// 选择日期
			clickTab(item, index) {
				this.seldDateIndex = index
				this.getTimes()
			},
			confirmCalendar (val) {
				let index = this.allSeldDate.find(v=>v.date == val.fulldate)
				if (index) {
					this.clickTab({},index)
				}
			},
			// 获取价格日历
			getDays() {
				let that = this
				that.Post({
					url: '',
					start_date: that.minSeldDate,
					end_date: that.maxSeldDate,
					sku_id: that.skuInfo.id
				},'https://api.cloud.sz-trip.com/api/product/product_date_price').then(function (result) {
					let res = result.data
					if (res) {
						that.allSeldDate = res
						// 初始化选择项目
						for (let i = 0; i < that.allSeldDate.length; i++) {
							if (that.allSeldDate[i].stock > 0) {
								that.seldDateIndex = i
								break;
							}
							// that.allSeldDate[i].price = that.sInfo.price
						}
						that.openPop()
						that.getTimes()
					}
				})
			},
			getTimes() {
				let that = this
				// 判断是否是分时的，不是就不需要去请求了的
				if (!that.skuInfo.sku_model.is_time_stock) {
					return
				}
				if (that.seldDateIndex < 0) {
					return;
				}
				that.seldTimeIndex = -1
				that.Post({
					url: '',
					date: that.allSeldDate[that.seldDateIndex].date,
					sku_id: that.allSeldDate[that.seldDateIndex].sku_id ? that.allSeldDate[that.seldDateIndex].sku_id : that.skuInfo.id
				},'https://api.cloud.sz-trip.com/api/product/product_timestock_price').then(function (result) {
					let res = result.data
					if (res) {
						that.timesArr = res
						for (let i = 0; i < that.timesArr.length; i++) {
							if (that.timesArr[i].stock_number > 0) {
								that.seldTimeIndex = i
								break;
							}
						}
					}
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg{
		min-height: 100vh;
		padding: 20rpx;
		background-color: rgb(247, 247, 247);
	}
	
	.top-box {
	    width: 100%;
	    background: #FFFFFF;
	    border-radius: 18rpx;
	    padding: 20rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-weight: 500;
	    font-size: 36rpx;
	    color: #0B898E;
	
	    .top-left {
	        display: flex;
	        flex-direction: column;
	        justify-content: space-between;
	        font-weight: bold;
	        font-size: 45rpx;
	        color: #000000;
	        flex: 1;
			width: 1rpx;
	
	        .left-subtitle {
	            font-weight: 400;
	            font-size: 36rpx;
	            color: #666666;
	        }
	    }
	}

.num-box {
    width: 100%;
    // height: 3.22rem;
    background: #FFFFFF;
    border-radius: 18rpx;
    display: flex;
    justify-content: space-between;
	flex-direction: column;
	margin: 20rpx 0;
	padding: 20rpx;

    .num-left {
        width: 100%;
        // padding: .5rem 0 .6rem .32rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-weight: 400;
        font-size: 27rpx;
        color: #666666;

        .left-title {
            font-weight: bold;
            font-size: 45rpx;
            color: #000000;
            width: 450rpx;
        }

        .left-price {
            font-weight: 500;
            font-size: 45rpx;
            color: #D62828;
        }
        .left-price::before {
            font-size: 27rpx;
            content: '￥';
        }


    }
	.num-subtitle {
	    font-weight: 400;
	    font-size: 27rpx;
	    color: #0B898E;
	    width: 100%;
		display: flex;
	}
    .num-right {
        font-weight: 500;
        font-size: 36rpx;
        color: #000000;
        display: flex;
        text-align: center;

        .num-span {
            width: 90rpx;
            line-height: 63rpx;
        }

        .btn-num {
            width: 63rpx;
            height: 63rpx;
            line-height: 63rpx;
            background: rgba(135,205,147,0);
            border-radius: 50%;
            border: 1px solid #999999;
            font-weight: 500;
            font-size: 45rpx;
            color: #999999;
        }
    }
}

.people-box{
	width: 100%;
	// height: 3.22rem;
	
	
	.people-box-sku{
		width: 100%;
		background: #FFFFFF;
		border-radius: 18rpx;
		// display: flex;
		// justify-content: space-between;
		margin: 20rpx 0;
		padding: 20rpx;
	}
}
</style>
