<template>
	<view class="buyNotice">
		<scroll-view scroll-y="true" style="width: 100%;height: 100%; padding: 44rpx 0;" @scroll="scroll">
			<view class="notice-box">
				<view class="base-info">
					<image class="left" :src="imgBaseUrl+coverImg" mode="aspectFit"></image>
					<view class="right">
						<view class="name">
							{{TicketData.TicketSubName}}({{TicketData.TicketName}})
						</view>
						<view class="evaluate">
							<u-rate size="24rpx" inactive-color="#FFF" :current="score" active-icon="star" disabled active-color="#F8632F"></u-rate>
							<view class="rate">
								{{score}}
								<text v-if="score===1||score===2||score===3||score===4||score===5">.0</text>
							</view>
							<view class="comment">
								{{TicketData.CommentCount}}人评论
								<u-icon name="arrow-down" color="#6E6E6E" size="24rpx"></u-icon>
							</view>
						</view>
						<view class="sell">
							已售{{TicketData.SaleCount}}票
						</view>
					</view>
				</view>
				<view class="detail-info">
					<view class="ticket-title">
						购买须知
						<text class="ticket-title-bg"></text>
					</view>
					<view class="detail-info-item" v-if="TicketData.SubscribeTime">
						<view class="item-name">
							可订时间
						</view>
						<view class="item-desc">
							可订今日
						</view>
					</view>
					<view class="detail-info-item" v-if="TicketData.OutTicket">
						<view class="item-name">
							出票速度
						</view>
						<view class="item-desc">
							平均2秒出票
						</view>
					</view>
					<view class="detail-info-item" v-if="TicketData.ChangeTickets">
						<view class="item-name">
							无需换票
						</view>
						<view class="item-desc">
							无需换票，持【身份证】直接进入
						</view>
					</view>
					<!-- 退票政策 -->
					<view class="method" v-if="TicketData.ReturnPriceList">
						<view class="method-title">
							<image class="title-bg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/tuipiaozhengce-bg.png"></image>
							<view class="title-text">退票政策</view>
						</view>
						<view v-for="(item,index) in TicketData.ReturnPriceList" :key="index" v-if="TicketData.IsWorryFreeRefund===0"
						 class="tuipaio-item">
							<view class="tuipiao-name">{{item.title}}</view>
							<view class="tuipiao-desc">{{item.Dec}}</view>
						</view>
						<view v-for="(item,index) in TicketData.ConditionPriceList" :key="index" v-if="TicketData.IsWorryFreeRefund===1"
						 class="tuipaio-item">
							<view class="tuipiao-name">{{item.title}}</view>
							<view class="tuipiao-desc">{{item.Dec}}</view>
						</view>
					</view>
					<!-- 使用说明 -->
					<view class="use-desc" v-if="TicketData.UseInstructionsList.length>0">
						<view class="ticket-title">
							使用说明
							<text class="ticket-title-bg"></text>
						</view>
						<view v-for="(item,index) in TicketData.UseInstructionsList" :key="index">
							<view class="detail-info-item">
								<view class="item2-name">
									{{item.title}}
								</view>
								<view class="item-desc">
									{{item.Dec}}
								</view>
							</view>
						</view>
					</view>
					<!-- 费用说明 -->
					<view class="cost-desc">
						<view class="ticket-title">
							费用说明
							<text class="ticket-title-bg"></text>
						</view>
						<view v-for="(item,index) in TicketData.PriceInstructionsList" :key="index">
							<view class="detail-info-item">
								<view class="item2-name">
									{{item.title}}
								</view>
								<view class="item-desc">
									{{item.Dec}}
								</view>
							</view>
						</view>
							
					</view>
					<!-- 其他信息 -->
					<view class="other-desc">
						<view class="ticket-title">
							其他信息
							<text class="ticket-title-bg"></text>
						</view>
						<view v-for="(item,index) in TicketData.OtherDescList" :key="index">
							<view class="detail-info-item">
								<view class="item2-name">
									{{item.title}}
								</view>
								<view class="item-desc">
									{{item.Dec}}
								</view>
							</view>
						</view>
					</view>
					<view class="detail-btn">
						<view class="price">
							<text class="price-pre">￥</text>
							{{TicketData.HPriceB}}
						</view>
						<view class="btn" @click="success">
							立即预订
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {
			coverImg: {
				type: String,
				default: ""
			},
		
			score: {
				type: Number,
				default: 1
			},
			
			TicketData: {
				type: Object,
				default: {}
			},

		},
		data() {
			return {
				checkTicketNavIndex: 1,
				imgBaseUrl: "http://192.168.20.214:8130"
			}
		},
		watch: {
			TicketData: {
				handler(val) {
					console.log('购票须知', this.TicketData)
					this.$forceUpdate();
				}
			}
		},
		methods: {
			goUrl() {
				uni.navigateTo({
					url: "/pages/ticketCoupons/imgList?id=" + this.ID,
				})
			},


			scroll(e) {

			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			success(){
				this.$emit("success")
			}


		}

	}
</script>

<style lang="scss" scoped>
	.buyNotice {
		width: 100vw;
		height: 70vh;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
	}

	.notice-box {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 45rpx 45rpx 0 45rpx;
		background-color: #FFFFFF;
		height: 70vh;
		z-index: 10;

		.base-info {
			// height: 175rpx;
			display: flex;
			padding-bottom: 35rpx;
			border-bottom: 1rpx solid #E7E7E7;

			.left {
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
			}

			.right {
				margin-left: 50rpx;

				.name {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1B1D1E;
					margin-bottom: 20rpx;
				}

				.evaluate {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.rate {
						margin: 0 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #6E6E6E;
					}

					.comment {
						display: flex;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #6E6E6E;
					}
				}

				.sell {
					width: 150rpx;
					height: 40rpx;
					background-color: #ECF1F4;
					border-radius: 4rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		.detail-info {
			.ticket-title {
				// width: 70rpx;
				height: 50rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1F1F1F;
				background-color: transparent;
				// line-height: 44rpx;
				position: relative;
				margin: 40rpx 0;

				.ticket-title-bg {
					width: 70rpx;
					height: 10rpx;
					background-color: #DFBE6E;
					border-radius: 4px;
					position: absolute;
					left: 0;
					bottom: 6rpx;
					z-index: 1;
					opacity: 0.6;
				}
			}

			.detail-info-item {
				display: flex;
				margin-bottom: 30rpx;

				.item-name {
					width: 120rpx;
					height: 40rpx;
					background-color: #111111;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #DFBE6E;
					margin-right: 45rpx;
					text-align: center;
					line-height: 38rpx;
				}
				.item2-name {
					width: 120rpx;
					height: 40rpx;
					background-color: #ECF1F4;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
					margin-right: 45rpx;
					text-align: center;
					line-height: 38rpx;
				}

				.item-desc {
					width: 500rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #111111;
				}
			}

			.method {
				// width: 660rpx;
				height: 225rpx;
				background-color: #FCF8F0;
				border-radius: 4rpx;
				position: relative;
				margin-top: 40rpx;
				padding: 60rpx 0 0 25rpx;
				margin-bottom: 50rpx;

				.method-title {
					width: 120rpx;
					height: 60rpx;
					position: absolute;
					top: -20rpx;
					left: 15rpx;
					text-align: center;

					.title-bg {
						width: 120rpx;
						height: 60rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
					}

					.title-text {
						width: 100%;
						text-align: center;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 10;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 40rpx;
						color: #FFF;
					}

				}

				,
				.tuipaio-item {
					display: flex;
					flex-wrap: wrap;
					padding-left: 25rpx;
					margin-bottom: 25rpx;
					.tuipiao-name {
						height: 40rpx;
						background-color: #FFFFFF;
						border: 1rpx solid #DFBE6E;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #DFBE6E;
						text-align: center;
						margin-right: 25rpx;
						padding: 0 10rpx;
						line-height: 38rpx;
					}

					.tuipiao-desc {
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
				}
			}
			.detail-btn{
				height: 80rpx;
				margin: 35rpx 0;
				margin-bottom: 80rpx;
				padding-right: 55rpx ;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.price{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #D91818;
					.price-pre{
						font-size: 22rpx;
					}
				}
				.btn{
					width: 300rpx;
					height: 80rpx;
					background-color: #111111;
					border-radius: 20rpx;
					margin-left: 45rpx;
					text-align: center;
					line-height: 78rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
		

	}
</style>
