<style>
	.jz_LineDetail {
		background-color: #ECF1F4;
	}

	.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 {
		width: 22%;
		height: 150rpx;
		border-radius: 20rpx;
		border: 1px solid #E2E2E2;
	}

	.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;
	}

	.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;
	}

	.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;
	}

	.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;
	}

	.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: 10rpx;
	}

	.jz_Jinddian {
		margin-top: 23rpx;
		color: #999999;
		font-size: 23rpx;
		line-height: 20px;
	}
</style>
<template>
	<div class="jz_LineDetail">
		<view class="jz_TopImg">
			<swiper indicator-dots :autoplay="false" :interval="1000" style="height:100%;">
				<block v-for="(item, index) in getCoverImg(dataList.imgCover)" :key="index">
					<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.priceList[0].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;justify-content: space-between;">
				<view class="jz_StartList">
					<view class="jz_StartTop"></view>
				</view>
				<view class="jz_StartList">

				</view>
				<view class="jz_StartList">

				</view>
				<view class="jz_StartList">

				</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">
				2晚4钻酒店
			</view>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>购物
			</view>
			<view class="jz_ZhaiInner">
				无购物
			</view>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>景点
			</view>
			<view class="jz_ZhaiInner">
				51个景点，含23个人气景点
			</view>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>餐食
			</view>
			<view class="jz_ZhaiInner">
				成人含2早餐2午餐2晚餐 儿童含2早餐2午餐2晚餐
			</view>
			<view class="jz_Zhankai">展开全部</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">
					<view class="jz_TripTitle">
						<view class="jz_TripLeft">第{{getDays(index+1)}}天</view>
						<view class="jz_TripRight">2020-03-11</view>
					</view>
					<view class="jz_RightInner">
						<view v-for="subItem in item.dayArray">
							<view class="jz_Place" v-if="subItem.type==7">
								<view class="jz_ComDian"></view>
								<text>{{subItem.childItem.title}}</text>
							</view>
							<view class="jz_ImgDiv">
								<template v-if="subItem.type==2">
									<img :src="subItem.childItem.imaArray[0].url" alt="">
								</template>
							</view>
							<view class="jz_Place">
								<view class="jz_ComDian"></view>
								<text class="jz_Canyin">景点</text>
								<text class="jz_CanInner">
									<template v-if="subItem.type==2">
										{{subItem.couponsName}}
										<text class="jz_Fenzhong">
											约<template v-if="subItem.playTimeHour">{{subItem.playTimeHour}}小时</template>
											<template v-if="subItem.playTimeHour">{{subItem.playTimeMinutes}}分钟</template>
										</text>
									</template>
								</text>
							</view>
							<view class="jz_Place">温馨提示</view>
							<view class="jz_Rermark">
								<template v-if="subItem.type==6">
									{{subItem.childItem.descriptionText}}
								</template>
							</view>
							<view class="jz_Place">
								<view class="jz_ComDian"></view>
								<text class="jz_Canyin">餐饮</text>
								<text class="jz_CanInner">
									<template v-if="subItem.type==4&&subItem.useDinnerType==1">{{subItem.dinnerName}}</template>
									<template v-if="subItem.type==4&&subItem.useDinnerType==2">{{subItem.dinnerName}}</template>
									<template v-if="subItem.type==4&&subItem.useDinnerType==3">{{subItem.dinnerName}}</template>
								</text>
							</view>
							<view class="jz_Place">
								<view class="jz_ComDian"></view>
								<text class="jz_Canyin">酒店</text>
								<text class="jz_CanInner">
									<template v-if="subItem.type==3">{{subItem.hotelName}}</template>
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: '线路详情',
				msg: {
					pageIndex: 1,
					pageSize: 15
				},
				dataList: {}, //数据
				delMsg: {
					tcid: 0,
					configId: 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;
						} else {

						}
					},
					null
				);
			},
			//转换图片格式
			getCoverImg(imgCover) {
				if (imgCover) {
					return JSON.parse(imgCover)
				}
			},
			//返回天数
			getDays(day) {
				if (day < 10) {
					return '0' + day
				} else {
					return day
				}
			}
		},
	};
</script>
