<template>
	<!-- 政策详情 -->
	<view class="policyDetail">
		<view class="tab-box">
			<u-tabs :list="typeList" :current="active" name="Name" :is-scroll="false" @change="changeHandler"
				:active-color="mainColor" bg-color="#FFF" :bar-style="barStyle" height="100"></u-tabs>
		</view>
		
		<view class="officialNotice">
			<view class="title" id="notice">
				官方公告信息
			</view>
			<view class="desc">
				<rich-text :nodes="details.TicketNotice" class="policyDetail-richText" v-if="details.TicketNotice">></rich-text>
				<text v-if="!details.TicketNotice">暂无公告</text>
			</view>

			<view class="title">
				开放时间
			</view>
			<view class="desc">
				<view v-for="(item,index) in details.OpenTimeList" :key="index">
					<view class="open-date" v-if="item.StartDay&&item.EndDay">
						{{item.StartDay}}~<text v-if="item.IsNextYear===1">次年</text>{{item.EndDay}}
					</view>
					<view class="open-item" v-if="item.StartDay&&item.EndDay">
						<view class="BusinessStartWeek">
							<text v-if="item.BusinessStartWeek===0">不限</text>
							<text v-if="item.BusinessStartWeek===1">周一</text>
							<text v-if="item.BusinessStartWeek===2">周二</text>
							<text v-if="item.BusinessStartWeek===3">周三</text>
							<text v-if="item.BusinessStartWeek===4">周四</text>
							<text v-if="item.BusinessStartWeek===5">周五</text>
							<text v-if="item.BusinessStartWeek===6">周六</text>
							<text v-if="item.BusinessStartWeek===7">周七</text>
						</view>~
						<view class="BusinessEndWeek">
							<text v-if="item.BusinessEndWeek===0">不限</text>
							<text v-if="item.BusinessEndWeek===1">周一</text>
							<text v-if="item.BusinessEndWeek===2">周二</text>
							<text v-if="item.BusinessEndWeek===3">周三</text>
							<text v-if="item.BusinessEndWeek===4">周四</text>
							<text v-if="item.BusinessEndWeek===5">周五</text>
							<text v-if="item.BusinessEndWeek===6">周六</text>
							<text v-if="item.BusinessEndWeek===7">周七</text>
						</view>
						<view class="Businesstime" v-if="item.StartTime&&item.EndTime">
							{{item.StartTime}}~{{item.EndTime}},
							<text v-if="item.StopTime">{{item.StopTime}}停止入场</text>
						</view>
					</view>

				</view>
			</view>
			<view class="title" id="buyTicket">
				购票须知
			</view>
			<view class="desc">
				<rich-text :nodes="details.BookingInfo"></rich-text>
			</view>
			<view class="title" id="tip">
				温馨提示
			</view>
			<view class="desc">
				<rich-text :nodes="details.About"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				mainColor: "#DFBE6E",
				barStyle: {
					width: '50rpx ',
					height: '6rpx !important',
					backgroundColor: '#DFBE6E !important',
					borderRadius: '3rpx !important',
				},
				typeList: [{
					Id: 0,
					Name: '官方公告'
				}, {
					Id: 1,
					Name: '购票须知'
				}, {
					Id: 2,
					Name: '温馨提示'
				}],
				richText: "",
				ID: 0,
				details: {},
			}

		},
		onLoad(options) {
			this.ID = options.id
			this.getDetail()
		},
		onPageScroll(res){
			console.log(res.scrollTop);//距离页面顶部距离
		},
		methods: {
			changeHandler(i) {
				this.active = i;
				let toID=""
				if(i===0){
					toID="#notice"
				}else if(i==1){
					toID="#buyTicket"
				}else if(i==2){
					toID="#tip"
				}
				uni.pageScrollTo({
					selector:toID,
				    duration: 300,
					success:res=>{
						
					}
				});
			},
			//获取详情
			getDetail() {
				this.request2({
						url: '/api/AppletDining/GetTicketCouponsDetails',
						data: {
							ID: this.ID,
						}
					},
					res => {
						if (res.resultCode == 1) {
							// res.data.ScenicSpotTag = res.data.ScenicSpotTag.split(',')
							// res.data.GeographicTag = res.data.GeographicTag.split(',')
							this.details = res.data;
						}
					}
				);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tab-box{
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
	}
	.policyDetail {
		margin-top: 100rpx;
		.officialNotice {
			padding: 0 45rpx 0rpx;

		}

		.title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #111111;
			margin-bottom: 45rpx;
		}

		.desc {
			margin-bottom: 60rpx;

			.open-date {
				// width: 660rpx;
				height: 60rpx;
				background-color: #F4F4F4;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #4B4949;
				line-height: 58rpx;
				padding: 0 30rpx;
			}

			.open-item {
				display: flex;
				height: 60rpx;
				background-color: #FFFFFF;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #4B4949;
				line-height: 58rpx;
				padding: 0 30rpx;
				border: 1rpx solid #F4F4F4;

				.Businesstime {
					margin-left: 20rpx;
				}
			}
		}
	}
	.policyDetail-richText p{
		font-size: 26rpx !important;
		font-weight: 500 !important;
	}
</style>
