<style>
	.jz_LineDetail {
		background-color: #ECF1F4;
		margin-bottom:70px;
	}

	.jz_TopImg {
		width: 100%;
		height: 500rpx;
	}

	.jz_TopPrice {
		width: 100%;
		height: auto;
		background-color: #fff;
		position: relative;
		top: -20px;
		border-top-left-radius: 45rpx;
		border-top-right-radius: 45rpx;
		padding: 45rpx;
	}

	.jz_LineTitle {
		font-size: 25rpx;
		color: #FF3166;
		margin-bottom: 10px;
	}

	.jz_MainTitle {
		color: #111111;
		font-size: 36rpx;
		font-weight: 800;
		line-height: 28px;
	}

	.jz_Maidian {
		color: #999999;
		font-size: 24rpx;
		margin-top: 15px;
		line-height: 23px;
	}

	.jz_Price {
		font-size: 30rpx;
		color: #FF3166;
	}

	.jz_Price_Title {
		color: #000000;
		margin: 10px 0;
		font-weight: bold;
	}

	.jz_Price_Hui {
		color: #9cf;
		margin-left: 8px;
	}

	.jz_flex {
		display: flex;
		justify-content: space-between;
	}

	.jz_TripDays {
		width: 100%;
		height: auto;
		padding: 45rpx;
		margin-top: 15px;
		background-color: #fff;
	}

	.trip_JZtype {
		display: inline-block;
		padding: 3px 5px;
		border: 1px solid #257BF1;
		margin-right: 10px;
		color: #257BF1;
		font-size: 13px;
		border-radius: 3px;
	}

	.jz_StartList {
		height: 150rpx;
		border-radius: 20rpx;
		border: 1px solid #E2E2E2;
		text-align: center;
		display: block;
		width: 70px;
		margin-right: 14px;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.jz_renmin {
		font-size: 12px;
		font-weight: bold;
	}

	.jz_B2bPrice {
		font-size: 23px;
		font-weight: bold;
	}

	.jz_Service {
		width: 100%;
		background-color: #fff;
		padding: 30px;
		font-size: 24rpx;
		margin-top: -5px;
	}

	.jz_Serflex {
		display: flex;
	}

	.jz_Stitle {
		color: #999999;
		margin-right: 41rpx;
	}

	.jz_StartTop {
		width: 100%;
		height: 40rpx;
		background-color: #ECF1F4;
		color: #999999;
		text-align: center;
		line-height: 40rpx;
		font-size: 22rpx;
	}

	.jz_Dian {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #111111;
		margin-right: 23rpx;
		position: relative;
		top: -2px;
	}

	.jz_ZhaiTitle {
		color: #1F1F1F;
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}

	.jz_ZhaiInner {
		color: #6E6E6E;
		font-size: 24rpx;
		margin: 22rpx 0 0 30rpx;
	}

	.jz_Zhankai {
		width: 220rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #1F1F1F;
		font-size: 24rpx;
		border-radius: 8rpx;
		border: 1px solid #111111;
		margin: 40rpx auto;
	}

	.jz_TripMain {
		position: relative;
		overflow: hidden;
	}

	.jz_TripTitle {
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		background: linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx;
	}

	.jz_TripLeft {
		font-size: 32rpx;
	}

	.jz_TripRight {
		color: #111111;
		font-size: 22rpx;
	}

	.jz_TripLine {
		position: absolute;
		width: 4rpx;
		height: 100%;
		background-color: #111111;
		left: 24rpx;
		top: 90rpx;
	}

	.jz_RightInner {
		margin-left: 50rpx;
	}

	.jz_Place {
		position: relative;
		color: #111111;
		font-size: 24rpx;
		margin: 30rpx 0;
		font-weight: bold;
		display: flex;
	}

	.jz_ComDian {
		width: 18rpx;
		height: 18rpx;
		background-color: #DFBE6E;
		border-radius: 50%;
		position: absolute;
		left: -17.6px;
		top: 4px;
	}

	.jz_ImgDiv {
		width: 612rpx;
		height: 376rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.jz_ImgDiv img {
		width: 100%;
		height: 100%;
	}

	.jz_Rermark {
		color: #999999;
		font-size: 23rpx;
		line-height: 20px;
	}

	.jz_Canyin {
		color: #999999;
		font-size: 23rpx;
		margin-right: 44rpx;
		flex-shrink: 0;
	}

	.jz_CanInner {
		color: #111111;
		font-size: 26rpx;
	}

	.jz_ArrowImg {
		width: 25rpx;
		height: 5rpx;
		margin: 0 5px;
		position: relative;
		top: -3px;
	}

	.jz_Fenzhong {
		color: #999999;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.jz_Jinddian {
		margin: 23rpx 0 31rpx 0;
		color: #999999;
		font-size: 23rpx;
		line-height: 20px;
	}

	.jz_StartHoubu {
		color: #E73828;
		font-size: 20rpx;
		margin: 10px 0;
	}
	.jz_OrderDiv{
		position: fixed;
		width:90%;
		height:100rpx;
		background-color: #fff;
		margin:auto;
		bottom:20px;
		padding:20rpx;
		left:40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
		border-radius: 16px;
		z-index:999;
	}
	.jz_OrderNow{
		width:190rpx;
		height:80rpx;
		background-color: #111111;
		text-align: center;
		line-height: 80rpx;
		color:#fff;
		font-weight: bold;
		font-size:28rpx;
		border-radius: 16rpx;
	}
	.jz_ConButton{
		background-color: #fff;
		height:40px;
		line-height: 18px;
		margin-top:3px;
	}
	.jz_ConButton::after{
		border: none!important;
		height:auto!important;
	}
</style>
<template>
	<div class="jz_LineDetail">
		<view class="jz_TopImg">
			<swiper indicator-dots :autoplay="false" :interval="1000" style="height:100%;">
				<block v-for="(item,cindex) in getCoverImg(dataList.imgCover)" :key="cindex">
					<swiper-item>
						<!--<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
				   :autoplay="false" loop muted show-play-btn :enable-progress-gesture="true" 
				   :controls="true" :show-progress="true" :show-mute-btn="true" objectFit="cover"></video>-->
						<image style="width:100%;height:100%;" :src="item.Url" mode="aspectFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="jz_TopPrice">
			<view class="jz_LineTitle">
				<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{dataList.currentPriceInfo.b2BPrice}}</text>
				<text style="color:#999999;font-size:14px;">/人起</text>
			</view>
			<view class="jz_MainTitle">
				<text v-if="dataList.title">{{dataList.title}}</text>
			</view>
			<view class="jz_Maidian" v-text="dataList.productRecommend">

			</view>
		</view>
		<view class="jz_Service">
			<view class="jz_Serflex">
				<view class="jz_Stitle">保障</view>
				<view style="color:#111111;display:flex;align-items:center">
					<img style="width:16px;height:14px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png"
					 alt="" />
					<view style="margin-left:5px;">更改则赔付·承诺不加价·取消则赔付</view>
				</view>
			</view>
			<view class="jz_Serflex" style="margin-top:40rpx;">
				<view class="jz_Stitle">服务</view>
				<view style="color:#111111;display:flex;align-items:center">
					<img style="width:15px;height:15px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dagou.png"
					 alt="" />
					<view style="margin-left:5px;">成团保障</view>
				</view>
			</view>
		</view>
		<view class="jz_TripDays">
			<view style="margin-bottom:40px;">
				<span style="display: inline-block;position: relative;">
					<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">
						<text v-if="dataList.startCityName">{{dataList.startCityName}}</text>出发
					</text>
					<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
				</span>
			</view>
			<view style="display:flex;overflow-x: auto;">
				<view class="jz_StartList" v-for="(item,pindex) in dataList.priceList" @click="getDayInfo(item)" :key="pindex">
					<view class="jz_StartTop">{{getMonth(item.startDate)}} 余{{item.remainNum}}</view>
					<view class="jz_StartHoubu">
						{{item.isSubstitution==1?'可候补':'不可候补'}}
					</view>
					<view style="color:#FF3166;font-size:26rpx;">￥{{item.b2BPrice}}</view>
				</view>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">摘要</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>住宿
			</view>
			<view class="jz_ZhaiInner">
				{{dataList.nightNum}}晚酒店
			</view>
			<template v-if="dataList.feature&&dataList.feature.shopRemarkText!=null&&dataList.feature.shopRemarkText!=''">
				<view class="jz_ZhaiTitle">
					<text class="jz_Dian"></text>购物
				</view>
				<view class="jz_ZhaiInner">
					{{dataList.feature.shopRemarkText}}
				</view>
			</template>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>景点
			</view>
			<view class="jz_ZhaiInner">
				{{scenicNum}}个人气景点
			</view>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>餐食
			</view>
			<view class="jz_ZhaiInner">
				含{{breakfastNum}}早餐 <text style="margin:0 20px;">{{lunchNum}}午餐</text> {{dinnerNum}}晚餐
			</view>
			<view class="jz_Zhankai" style="display:none;">展开全部</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">行程概要</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<view class="jz_TripLine"></view>
				<view v-for="(item,index) in dataList.dayList" :key="index">
					<view class="jz_TripTitle">
						<view class="jz_TripLeft">第{{getDays(index+1)}}天</view>
						<view class="jz_TripRight"></view>
					</view>
					<view class="jz_RightInner">
						<view v-for="(subItem,SubIndex) in item.dayArray" v-if="subItem.type==7" :key="SubIndex">
							<view class="jz_Place">
								<view class="jz_ComDian"></view>
								<text>{{subItem.childItem.title}}</text>
							</view>
						</view>
						<template v-for="(subItem,index2) in item.dayArray" v-if="subItem.type==2">
							<view class="jz_ImgDiv" :key="index2">
								<img mode="aspectFill" :src="subItem.childItem.imaArray[0].url" alt="">
							</view>
							<view class="jz_Place" style="align-items: center;">
								<view class="jz_ComDian"></view>
								<text class="jz_Canyin">景点</text>
								<text class="jz_CanInner">
									{{subItem.childItem.couponsName}}
									<text class="jz_Fenzhong">
										<template v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">约</template>
										<template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template>
										<template v-if="subItem.childItem.playTimeMinutes">{{subItem.childItem.playTimeMinutes}}分钟</template>
									</text>
								</text>
							</view>
							<view class="jz_Jinddian">
								{{subItem.childItem.descriptionText}}
							</view>
						</template>
						<view class="jz_Place">温馨提示</view>
						<view class="jz_Rermark">
							<template v-for="(subItem,sIndex) in item.dayArray" v-if="subItem.type==6">
								<text :key="sIndex">{{subItem.childItem.descriptionText}}</text>
							</template>
						</view>
						<view class="jz_Place">
							<view class="jz_ComDian"></view>
							<text class="jz_Canyin">餐饮</text>
							<text class="jz_CanInner">
								<template v-for="(subItem,sIndex2) in item.dayArray" v-if="subItem.type==4">
									<text style="margin-right:20px;" :key="sIndex2" v-if="subItem.childItem.useDinnerType=='1'">{{subItem.childItem.dinnerName}}</text>
									<text style="margin-right:20px;" v-if="subItem.childItem.useDinnerType=='2'">{{subItem.childItem.dinnerName}}</text>
									<text v-if="subItem.childItem.useDinnerType=='3'">{{subItem.childItem.dinnerName}}</text>
								</template>
							</text>
						</view>
						<view class="jz_Place">
							<view class="jz_ComDian"></view>
							<text class="jz_Canyin">酒店</text>
							<text class="jz_CanInner">
								<template v-for="(subItem,sIndex3) in item.dayArray" v-if="subItem.type==3">
									<text :key="sIndex3">{{subItem.childItem.hotelName}}<text v-if="index!=dataList.dayList.length-1" style="margin:0 5px;">/</text></text>
								</template>
								<text v-if="index!=dataList.dayList.length-1">或同级</text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="jz_OrderDiv">
			<view style="color:#FF3166;font-weight:bold;">
				<text style="font-size:22rpx;">¥</text>
				<text style="font-size:40rpx;">{{dataList.currentPriceInfo.b2BPrice}}</text>
				<text style="font-size:22rpx;">/起</text>
			</view>
			<view style="display:flex;">
				<button open-type="contact" class="jz_ConButton">
					<img style="width:36rpx;height:38rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png" alt="" />
					<view style="color:#111111;font-size: 22rpx;">客服</view>
				</button>
				<view class="jz_OrderNow" @click="goReserce()">立即预定</view>
			</view>
		</view>
	</div>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: '线路详情',
				msg: {
					pageIndex: 1,
					pageSize: 15
				},
				dataList: {}, //数据
				delMsg: {
					tcid: 0,
					configId: 0
				},
				scenicNum: 0, // 景点数量
				breakfastNum: 0, //早餐数
				lunchNum: 0, //午餐数
				dinnerNum: 0 //晚餐数
			};
		},
		created() {

		},
		onLoad(option) {
			if (option.tcid && option.configId) {
				this.delMsg.tcid = option.tcid;
				this.delMsg.configId = option.configId;
				this.getDetails();
			}

		},
		methods: {
			//获取详情
			getDetails() {
				this.apipost(
					"b2b_get_GetB2BTravelInfoNoDesV1",
					this.delMsg,
					res => {
						console.log(res, '详情');
						if (res.resultCode == 1) {
							this.dataList = res.data;
							this.scenicNum = 0;
							this.dataList.dayList.forEach(x => {
								x.dayArray.forEach(y => {
									if (y.type == 2) {
										this.scenicNum++;
									}
									if (y.type == 4 && y.childItem.useDinnerType == 1) {
										this.breakfastNum++;
									}
									if (y.type == 4 && y.childItem.useDinnerType == 2) {
										this.lunchNum++;
									}
									if (y.type == 4 && y.childItem.useDinnerType == 3) {
										this.dinnerNum++;
									}
								})
							})
						} else {

						}
					},
					null
				);
			},
			//转换图片格式
			getCoverImg(imgCover) {
				if (imgCover) {
					return JSON.parse(imgCover)
				}
			},
			//返回天数
			getDays(day) {
				if (day < 10) {
					return '0' + day
				} else {
					return day
				}
			},
			//返回月 日
			getMonth(day) {
				if (day) {
					let Myday = day.split('-');
					return Myday[1] + '-' + Myday[2]
				}
			},
			//点击切换
			getDayInfo(item){
				this.delMsg.tcid = item.tcid;
				this.delMsg.configId = item.configID;
				this.getDetails();
			},
			//立即预定
			goReserce(){
				let myCurrentInfo = this.dataList.currentPriceInfo;
				myCurrentInfo.startCityName = this.dataList.startCityName;
				let imgCover = JSON.parse(this.dataList.imgCover);
				if(imgCover.length>0){
					myCurrentInfo.CoverImg = imgCover[0].Url;
				}
				let myCurr = JSON.stringify(myCurrentInfo);
				console.log(myCurrentInfo,'myCurrentInfo');
				uni.navigateTo({
					url: "/pages/jiuzhai/jz_Reserve?currentPriceInfo="+encodeURIComponent(myCurr)
				});
			}
		},
	};
</script>
