<template>
	<view class="bg">
		<swiper class="swiper" :indicator-dots="true" v-if="detail.list_images" :autoplay="true" :interval="2000" :duration="300">
		    <block v-for="(item, index) in detail.list_images.split(',')" :key="index">
		        <swiper-item>
		            <image :src="showImg(item)" mode="aspectFill" class="swiper-img"></image>
		        </swiper-item>
		    </block>
		</swiper>
		
		<view class="box">
			<view class="info">
			    <view class="title">{{ detail.title }}</view>
			    <view class="location">
			        <image src="https://static.ticket.sz-trip.com/changshu/images/venue/location.png" mode=""></image>
			        {{ detail.address }}
			    </view>
			    <view class="location" style="margin-bottom: 0">
			        <image src="https://static.ticket.sz-trip.com/changshu/images/venue/tel.png" mode=""></image>
			        {{ detail.tel }}
			    </view>
			</view>
			
			<view class="titles">场馆预约</view>
			
			<!-- 日期和分时 -->
			<DateSelector
				v-if="dateList.length > 0"
				:dateList="dateList"
				:dateIndex="dateIndex"
				:stockList="stockList"
				:stockIndex="stockIndex"
				@changeDate="changeDate"
				@changeStock="changeStock"
				@openCal="openCal"
				ref="childRef"
			/>
		</view>
		
		<view style="padding: 0 25rpx;">
			<view class="titles">场馆介绍</view>
			<view v-html="formateRichText(detail.feature_content)"></view>
			
			<view class="titles">接待时间</view>
			<view v-html="formateRichText(detail.cost_content)"></view>
		</view>
		
		<view class="fixed-btn flex-center" v-if="dateList && dateList.length > 0">
		    <view @tap="order" class="btn" >
		        参观预约
		    </view>
		</view>
		
		<!-- 日历弹框 -->
		<uni-calendar 
			ref="calendar"
			:insert="false"
			:start-date="dateList[0].date"
			:end-date="dateList[dateList.length-1].date"
			:date="dateList[0].date"
			:selected="selected"
			:clearDate="false"
			:disabledDay="disabledDay"
			@confirm="confirm"
			v-if="dateList && dateList.length > 0"
		/>
	</view>
</template>

<script>
	import DateSelector from '@/components/DateSelector.vue';
	export default {
		components: {
		    DateSelector
		},
		data() {
			return {
				id: '',
				detail: {},
				goodsInfo: '',
				skuInfo: '',
				dateList: [],
				dateIndex: null,
				price: '',
				date: '',
				isTime: false,
				stockList: [],
				stockIndex: null,
				selected: [],
				start_time: '',
				end_time: '',
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onReady() {
			this.getDetail()
		},
		methods: {
			// 获取景点详情
			getDetail() {
				this.Post({
					id: this.id
				},'/api/scenic/getScenicById').then(res => {
					if(res.data.status == 0){
						setTimeout(() => {
							uni.showToast({
								title: '商品不存在或已下架',
								icon: 'none'
							})
						},0)
						setTimeout(() => {
							this.goBack()
						},2000)
					}
					this.detail = res.data
					this.getGoodsList()
				})
			},
			// 根据景点id获取商品列表、取第一个商品下的第一个规格
			getGoodsList(){
				this.Post({
					scenic_id: this.id
				},'/api/scenic/getGoodsByScenicId').then(res => {
					if(res) {
						this.goodsInfo = res.data[0]
						this.skuInfo = res.data[0].specifications[0]
						
						// 是否配置价格日历 0否 1是
						if(!res.data[0].specifications[0].is_price_calendar) return;
						
						// 是否配置分时 0否 1是
						if(res.data[0].specifications[0].is_time_stock) {
							this.isTime = true
						}else {
							this.isTime = false
						}
						
						this.getPriceCal()
					}
				})
			},
			// 获取价格日历列表
			getPriceCal() {
				this.Post({
					specifications_id: this.skuInfo.id,
					goods_id: this.goodsInfo.id,
					limit: 60
				}, '/api/goods/getPriceCalendarListBySpecifications').then(res => {
					res.data.forEach(item => {
						if (item.store != 0) {
							this.dateList.push(item)
						}
					})
					console.log(this.dateList, this.dateList.length)
					// this.dateList = res.data
					this.dateList.forEach(item => {
						this.selected.push({
							date: item.date,
							info: '￥' + item.money / 100
						})
					})
					this.dateIndex = this.dateList.findIndex(item => item.store != 0)
					this.price = this.dateList[this.dateIndex].money
					this.date = this.dateList[this.dateIndex].date
					this.getTimeStock(this.dateList[this.dateIndex].date)
				})
			},
			// 获取规格分时库存
			getTimeStock(date) {
				if(!this.isTime) return;
				this.Post({
					specifications_id: this.skuInfo.id,
					date: date
				}, '/api/goods/getTimeStock').then(res => {
					if (res.data.length > 0) {
						this.stockList = res.data
						this.stockIndex = this.stockList.findIndex(item => item.stock_number != 0)
						console.log('this.stockIndex', this.stockIndex)
						if (this.stockIndex > -1) {
							this.start_time = this.stockList[this.stockIndex].start_time
							this.end_time = this.stockList[this.stockIndex].end_time
							this.date = this.stockList[this.stockIndex].sale_date
							this.price = this.stockList[this.stockIndex].money
						}
					}
				})
			},
			// 打开日历
			openCal(){
				this.$refs.calendar.open();
			},
			// 确定日历日期
			confirm(e){
				console.log(e)
				for (let i = 0; i < this.dateList.length; i++) {
				    if (this.dateList[i].date == e.fulldate) {
						console.log(this.dateList[i])
						this.dateIndex = i;
						this.date = e.fulldate
						this.getTimeStock(e.fulldate)
						break;
				    }
				}
			},
			// 选择日期
			changeDate(data){
				let item = data.item
				let index = data.index
				if(item.stock!=0){
					console.log(item)
					this.dateIndex = index
					this.date = item.date
					this.getTimeStock(item.date)
				}
			},
			// 选择入园时间
			changeStock(data){
				let item = data.item
				let index = data.index
				if(item.stock_number!=0){
					this.stockIndex = index
					this.date = item.sale_date
					this.start_time = item.start_time
					this.end_time = item.end_time
				}
			},
			// 预约
			order() {
				let data = {
					goodsInfo: this.goodsInfo,
					skuInfo: this.skuInfo,
					dateIndex: this.dateIndex,
					stockIndex: this.stockIndex
				}
				
				this.$store.commit('changeOrderInfo', data)
				uni.navigateTo({
					url: "/subPackages/venue/venueOrder"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		padding-bottom: 200rpx;
		background-color: #fff;
	}
	
	.swiper{
		width: 100%;
		height: 413rpx;
		display: block;
		position: relative;
		
		.swiper-img{
			width: 100%;
			height: 413rpx;
			display: block;
		}
	}
	
	.box {
		padding: 0 25rpx 30rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}
	
	.info {
	    margin-top: -50rpx;
	    position: relative;
	    z-index: 1;
	    background: #ffffff;
	    box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
	    border-radius: 13rpx;
	    padding: 30rpx;
		
		.title {
		    font-size: 31rpx;
		    color: #000;
		    margin-bottom: 20rpx;
		}
		
		.location {
		    color: #999999;
		    font-size: 24rpx;
		    margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			
			image {
				margin-right: 10rpx;
				width: 29.33rpx;
				height: 29.33rpx;
			}
		}
	}
	
	.titles {
		margin: 30rpx 0;
		font-weight: bold;
		font-size: 35rpx;
		color: #000000;
	}
	
	.date-box{
		height: auto;
		position: relative;
		
		.ticket-title{
			padding-left: 20rpx;
			border-bottom: 1rpx solid #CCCCCC;
			font-size: 33rpx;
			font-family: PingFangSC;
			font-weight: 500;
			color: #000000;
			height: 113rpx;
			line-height: 113rpx;
		}
		
		.dateList{
			height: 164rpx;
			text-align: center;
			display: flex;
			align-items: center;
			padding-right: 120rpx;
			overflow-x: auto;
			
			.date{
				width: 120rpx;
				height: 133rpx;
				border-radius: 10rpx;
				justify-content: space-around;
				background: #F5F5F5;
				margin-right: 15rpx;
				flex-shrink: 0;
				font-weight: 500;
				font-size: 27rpx;
				color: #000000;
				
				.dateNum{
					
				}
				.price{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #EE3E3B;
				}
				.noPrice{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
			
			.active{
				background: #00AEA0;
				color: #FFFFFF;
				border: none;
				.dateNum{
					color: #FFFFFF;
				}
				.price{
					color: #FFFFFF;
				}
			}
			
			.more{
				width: 120rpx;
				height: 133rpx;
				font-weight: bold;
				font-size: 27rpx;
				color: #00AEA0;
				position: absolute;
				right: -5rpx;
				padding-left: 20rpx;
				background-color: #fff;
			}
		}
		.dateList::-webkit-scrollbar {
			display: none;
		}
	}
	
	.stock-box{
		margin-top: 34rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
		.stockItem{
			width: 340rpx;
			height: 64rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			text-align: center;
			line-height: 64rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #000000;
			margin-bottom: 20rpx;
		}
		
		.active{
			background: #00AEA0;
			color: #FFFFFF;
		}
		.disabled{
			color: #999999;
		}
	}
	
	.fixed-btn {
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    height: 133rpx;
	    background: #ffffff;
	    box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1);
	    z-index: 3;
		
		.btn {
		    width: 697rpx;
		    line-height: 80rpx;
		    background: #ED1C18;
		    border-radius: 40rpx;
		    text-align: center;
		    color: #fff;
		    font-size: 31rpx;
		    font-weight: 500;
		}
	}
</style>