<template>
	<view class="jz_LineDetail" v-if="dataList.Name">
		<scroll-view scroll-y="true" style="height: 1px; flex: 1; box-sizing: border-box;" @scroll="scroll">
			<view class="jz_TopImg">
				<view class="media" :style="{ opacity: 100 - boxOption + '%' }">
					<u-swiper :list="[dataList.CoverImageList[0]]" :effect3d="false" :height="535" :interval="5000" :border-radius="0"
					 name="Url"></u-swiper>
					<view class="sharebox" v-if=" hideshare == false && shareData && shareData.IsShow && (shareData.Data.MaxShare>0|| shareData.Data.MyBuyCommission>0)"
					 :style="{top:topheight+'px'}">
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view @click="goback" :style="[titleStyle, { opacity: '100% !important' }]" style="position: fixed; top: 0; left: 0; padding-left: 6rpx">
						<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx"></u-icon>
					</view>
					<!-- #endif -->
				</view>
				<view class="top-title" :style="[titleStyle]">
					<view @click="goback">
						<!-- #ifdef MP-WEIXIN -->
						<u-icon name="arrow-left" size="44"></u-icon>
						<!-- #endif -->
					</view>
					<view style="margin-left: 30rpx;text-align: left;width: 60vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; "
					 class="name-ali">{{ dataList.Name }}</view>
				</view>
			</view>
			<view class="jz_TopPrice">
                <view class="visaDetailTag row items-center">
                    <image v-if="dataList.VisaType==1" style="width: 63rpx;height: 33rpx;"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750608043252097.png" />
                    <image v-if="dataList.VisaType==2" style="width: 63rpx;height: 33rpx;"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750608077268743.png" />
                    <template v-for="x in dataList.TypeTagList">
                        <text :key="index" v-if="x.TagTame">
                            {{ x.TagTame }}
                        </text>
                    </template>
                    <text>
                        取消需二次确认
                    </text>
                </view>
                <view style="padding: 33rpx 30rpx 51rpx 38rpx;">
                    <view class="jz_LineTitle row items-center">
                        <view class="col">
                            <text class="jz_renmin">¥</text>
                            <text class="jz_B2bPrice">
                                {{ discountPrice }}
                            </text>
                            <text style="color: #999999; font-size: 28rpx; font-weight: 400">/人</text>
                        </view>
                    </view>
                    <view class="jz_LineDetaYJDKQ" style="padding: 0rpx 0 0 0;" v-if="couponList.length>0||TotalDiscount>0">
                        <view class="jz_LineDetaYJ" v-if="TotalDiscount>0">
                            <view class="jz_LineDetaYJL">原价 ¥{{ $utils.getretailer()?dataList.VisaPrice:dataList.VisaB2CPrice }}/人</view>
                            <view class="jz_LineDetaYJR">已减{{TotalDiscount}}</view>
                        </view>
                        <view v-if="couponList.length>0" class="jz_LineDetaRDKQ">
                            <view>共{{couponList.length}}张抵扣券</view>
                            <u-icon name="arrow" size="30" color="#cecece" style="margin-left: 5px;"></u-icon>
                        </view>
                    </view>
                    <view class="jz_MainTitle">
                        <view class="jz_MainTitleR">
                            <text>{{ dataList.Name }}</text>
                        </view>
                    </view>
                </view>

				
			</view>
			<view class="line-flex col" style="padding: 30rpx; background: #fff;margin-top: 20rpx"
				v-if="createBy==0&&SaleList&&SaleList.length>1"
					@click="showSalePreviwe=true">
					<text style="font-size: 28rpx; color: #111; font-weight: 500">销售</text>
					<text style="
					font-size: 22rpx;
					color: #999;
					margin-left: 30rpx;
					flex: 1;
					"></text>
					<view class="SaleNameTetx">
						<view>
							<text v-if="SaleName">{{ SaleName }}</text>
							<text v-else style="color: #999">
								请选择
							</text>
						</view>
						<u-icon name="arrow-down" size="24"></u-icon>
					</view>
			</view>
            <view class="visaDetailDesBox">
                <view class="visaDetailDes">
                    <view class="visaDetailDesTitle">签证说明</view>
                    <view class="column">
                        <view class="row-sbas-n visaDetailNumBox">
                            <view class="visaDetailNum active1 col">
                                <view>办理时长</view>
                                <view>收齐材料后{{dataList.ManageDuration?dataList.ManageDuration:'-'}}个工作日</view>
                            </view>
                            <view class="visaDetailNum active2 col">
                                <view>入境次数</view>
                                <view>
                                    <template v-if="dataList.EntryType==1">单次</template>
                                    <template v-if="dataList.EntryType==2">多次</template>
                                    <template v-if="dataList.EntryType==3">使领馆签发次数</template>
                                </view>
                            </view>
                        </view>
                        <view class="row-sbas-n visaDetailNumBox">
                            <view class="visaDetailNum active3 col">
                                <view>停留天数</view>
                                <view>{{ dataList.StayDays?dataList.StayDays+'天':'-' }}</view>
                            </view>
                            <view class="visaDetailNum active4 col">
                                <view>签证效期</view>
                                <view>{{ dataList.VisaValidity?dataList.VisaValidity:'-' }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="visaDetailDesTitle">费用包含</view>
                    <view v-if="dataList.VisaProductInfo.FeeInclude" class="jz_TripMain">
					    <rich-text :nodes="dataList.VisaProductInfo.FeeInclude"></rich-text>
				    </view>
                    <view class="visaDetailLin" style="margin-top: 33rpx;margin-bottom: 18rpx;"></view>
                    <view class="visaDetailDesTitle">费用不含</view>
                    <view v-if="dataList.VisaProductInfo.FeeNonInclude" class="jz_TripMain">
					    <rich-text :nodes="dataList.VisaProductInfo.FeeNonInclude"></rich-text>
				    </view>
                    <view class="visaDetailLin" style="margin-top: 33rpx;margin-bottom: 18rpx;"></view>
                    <view class="visaDetailDesTitle" style="padding: 40rpx 0 34rpx 0;">签证材料</view>
                    <view v-if="dataList.VisaProductInfo.VisaMaterials" class="jz_TripMain" style="background: #F9F8F6;
                    border-radius: 12rpx;padding: 39rpx 30rpx;">
					    <rich-text :nodes="dataList.VisaProductInfo.VisaMaterials"></rich-text>
				    </view>
                    <view class="visaDetailDesTitle" style="padding: 50rpx 0 34rpx 0;">温馨提示</view>
                    <view v-if="dataList.VisaProductInfo.WarmTip" class="jz_TripMain" style="background: #F9F8F6;
                    border-radius: 12rpx;padding: 39rpx 30rpx;">
					    <rich-text :nodes="dataList.VisaProductInfo.WarmTip"></rich-text>
				    </view>
                </view>
				
            </view>
			
	

			
			

		
		</scroll-view>
        <view class="jz_orderbox">
			<view class="jz_OrderDiv">
				<view style="color: #ff3166; font-weight: bold">
					<text style="font-size: 22rpx">¥</text>
					<!-- 原b2b -->
					<text style="font-size: 40rpx;font-family: nav-font;">{{discountPrice}}</text>
					<text style="font-size: 22rpx">/人</text>
				</view>
				<view style="display: flex; align-items: center">
					<!-- #ifdef MP-WEIXIN -->
					<button @click="dataList.VisaProductInfo.DownloadMaterialsFileList.length>1?showDownload=true:downloadTripPlanHandler(dataList.VisaProductInfo.DownloadMaterialsFileList[0])" class="jz_ConButton" v-if="dataList.VisaProductInfo&&dataList.VisaProductInfo.DownloadMaterialsFileList.length>0">
						<img style="width: 36rpx; height: 38rpx" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1695376860000_131.png"
						 alt="" />
						<view style="color: #111111; font-size: 22rpx">下载文件</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button class="jz_ConButton" style="margin-right: 20rpx">
						<contact-button tnt-inst-id="QqR_ZV6m" scene="SCE01203509" icon="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png"
						 size="38rpx" :alipay-card-no="2088 + userId" :ext-info="appid">
						</contact-button>
						<view style="color: #111111; font-size: 22rpx">客服</view>
					</button>
					<!-- #endif -->
					
					<view class="jz_OrderNow" @click="goReserce">立即预定</view>
				</view>
			</view>
		</view>
		<auth v-if="showAuth&&is_show_auth==1" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<u-popup v-model="showSalePreviwe" mode="bottom" border-radius="50" length="60%" :safe-area-inset-bottom="true">
			<view>
				<view style="font-size: 17px;text-align: center;padding: 20px 0;">
					选择销售
				</view>
				<scroll-view scroll-x="true" style="width: 100%;height: 43vh;">
					<view class="SaleBox">
						<view v-for="(item,index) in SaleList" 
							:key="index"
							class="SaleText"
							@click="SelectSales(item)">
								<view>{{ item.EmName }}</view>
								<view>
									<u-radio-group v-model="SaleId" @change="SelectSales" 
									style="position: relative;top:10rpx;">
										<u-radio shape="circle" :name="item.CreateBy" :icon-size="36" 
										:active-color="mc"></u-radio>
									</u-radio-group>	
								</view>
						</view>
					</view>
				</scroll-view>
				<u-button size="80" :ripple="true" shape="circle" :custom-style="{
						backgroundColor: '#333',
						height: '80rpx',
						color: '#fff',
						fontSize: '14px',
						margin: '0 auto',
						width: '90vw',
					}" @click="showSalePreviwe=false">确定</u-button>
			</view>
		</u-popup>
		<u-popup v-model="showDownload" mode="bottom" border-radius="50" length="60%" :safe-area-inset-bottom="true">
			<view>
				<view style="font-size: 17px;text-align: center;padding: 20px 0;">
					下载签证文件
				</view>
				<scroll-view scroll-x="true" style="width: 100%;height: 43vh;">
					<view class="SaleBox">
						<view v-for="(item,index) in dataList.VisaProductInfo.DownloadMaterialsFileList" 
							:key="index"
							class="SaleText" @click="downloadTripPlanHandler(item)">
								<view>{{ item.Name }}</view>
								<view>
									<button class="jz_ConButton row items-center" style="height: 100%;" v-if="dataList.VisaProductInfo&&dataList.VisaProductInfo.DownloadMaterialsFileList.length>0">
										<img style="width: 36rpx; height: 38rpx" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1695376860000_131.png"
										alt="" />
									
									</button>	
								</view>
						</view>
					</view>
				</scroll-view>
				<u-button size="80" :ripple="true" shape="circle" :custom-style="{
						backgroundColor: '#333',
						height: '80rpx',
						color: '#fff',
						fontSize: '14px',
						margin: '0 auto',
						width: '90vw',
					}" @click="showDownload=false">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	// #ifdef MP-ALIPAY
	import parseHtml from "@/plugin/htmlparse.js";
	// #endif
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			auth,
		},
		data() {
			return {
				showDownload: false,
				pageTitle: "签证详情",
				showStartCities: false,
				crCount: 1,
				etCount: 0,
				yeCount: 0,
				etbCount: 0,
				msg: {
					pageIndex: 1,
					pageSize: 15,
				},
				dataList: {}, //数据
				delMsg: {
					Pid: 0,
				},
				d: {},
				scenicNum: 0, // 景点数量
				breakfastNum: 0, //早餐数
				lunchNum: 0, //午餐数
				dinnerNum: 0, //晚餐数
				boxOption: 0,
				titleStyle: {},
				mainColor: "",
				detailContent: "",
				customerDate: {},
				currentPrice: {},
				canCreateOrder: false,
				finishFirstLoad: false,
				showAuth: false,
				U: {},
				appid: encodeURIComponent(JSON.stringify({
					appId: "2021002181604459"
				})),
				userId: uni.getStorageSync("mall_UserInfo").UserId,
				hideshare: false,
				topheight: 0,
				shareData: null,
				isDownloading: false,
				startCities: [],
				is_show_auth: 0, //是否配置启用授权（1-开启）
				b2bUser: {}, //同行信息
				showSalePreviwe: false,
				SaleList: [],
				customer: {},
				SaleName: '',
				SaleId: 0,
				mc: '',
				couponList:[],
				maxCouponDiscount:0,
				numList: [{
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}
				],
				createBy: 0,
				progress:[
					{
						text:'1',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'2',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'3',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'4',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
						img:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png'
					},
				],
				stepNumber: 0,//当前完成单数
				UnfOddNumber: 0,//剩余完成订单数 可成为vip
				discountPrice: 0,//优惠后金额
				Discounts: 1,//福利项
				TotalDiscount: 0,//合计优惠金额
			};
		},
		watch: {
			stepNumber: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
				
				},
			},
		},
		created() {},
		onLoad(option) {
			this.mc = this.$uiConfig.mainColor;
			console.log("option",option);
			this.customer = uni.getStorageSync("b2b_user");
			if (!option.scene) {
				if (option.id) {
					this.delMsg.Pid = option.id;
				}
				if (option.createBy) {
					this.createBy = option.createBy
				}
			} else {
				let t = decodeURIComponent(option.scene).split('&')
				t.forEach(x => {
					let item = x.split('=')
					if (item.length === 2) {
						if (item[0] === 'id') {
							this.delMsg.Pid = item[1]
						} else if (item[0] === 'createBy') {
							this.createBy = item[1]
						}
					}
				})
			}
			this.getSale()
			this.getDetails();
			this.U = uni.getStorageSync("mall_UserInfo");
			this.b2bUser = uni.getStorageSync("b2b_user");
			let basedata = uni.getStorageSync("basedata");
			//判断后台是否开启自动授权
			if (basedata && basedata.mall && basedata.mall.setting && basedata.mall.setting && basedata.mall.setting.is_show_auth ==
				1) {
				this.is_show_auth = 1;
			}

			if (!this.U) {
				this.U = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			} else if (!this.b2bUser && this.is_show_auth == 1) {
				this.U = {
					nickName: "未登录",
					avatarUrl: "",
				};
				this.showAuth = true;
			}
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: 0,
					};
					that.topheight = 55 + res.statusBarHeight
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods: {
			downloadTripPlanHandler(item) {
				if (this.isDownloading) return;
				let that = this
				uni.showLoading({
					title: '这可能需要30秒，请耐心等待'
				})
				this.isDownloading = true
				let url = item.Url

				let fileName = `${item.Name.replace(/\s+/g,"").replaceAll("/","")}`
				let suffix = item.Url.split('.')
				console.log(fileName, "fileName");
				const filePath = wx.env.USER_DATA_PATH + `/${fileName}.${suffix[suffix.length-1]}`
				uni.downloadFile({
					url: url,
					filePath,
					success: (res) => {
						wx.openDocument({
							filePath: filePath,
							showMenu: true,
							success: fres => {
								uni.hideLoading()
								that.isDownloading = false
							},
							fail: fres => {
								console.log('downloadTripPlanHandler_打开失败', fres)
								that.downloadFailed('打开失败，请重试。如果仍然失败，请联系销售索要签证文件')
							},
						})
					},
					fail(err) {
						console.log("downloadTripPlanHandler_fail", err)
						that.downloadFailed('下载失败，请重试。如果仍然失败，请联系销售索要签证文件' + err)
					},
				});
			},
			downloadFailed(msg) {
				uni.showToast({
					icon: 'none',
					title: msg
				})
				this.isDownloading = false;
			},
			calcPzCouponHandler(){
				this.couponList.forEach((x)=>{
					if(x.expansionModel.denomination>0){
						x.realDenomination = x.denomination
						x.denomination =x.expansionModel.denomination
					}
				})
			},
			SelectSales(item){
				this.SaleName = item.EmName
				this.SaleId = item.CreateBy
			},
			getUserCouponList() {
				let couponParams = {
					"lineId": '', //线路ID
					"lineteamId": '', //系列ID
					"userId": this.customer.accountId, //AccountId
					"CouponsUseScope": 3, //特定使用平台(当地游=8   跟团游=2 小包团=10)
					"isExpansion": 0, //是否启动膨胀金1-是
					"CustomerType": 0, //客户类型 0-同行，1-直客
					"TCID": '',
				}
				this.apipost(
					"coupon_post_GetUserCanUseCouponList", couponParams,
					(res) => {
						if (res.resultCode == 1) {
							this.couponList = res.data
							if(this.couponList.length>0) {
								this.Discounts +=  1
							}
							this.calcPzCouponHandler()
							this.couponList.forEach(x=>{
								if(x.couponsType==1 && x.denomination>this.maxCouponDiscount) this.maxCouponDiscount=x.denomination
								if(x.couponsType==2){
									const disMoney = this.currentPrice.b2BPrice*(1-x.denomination)
									this.maxCouponDiscount = this.maxCouponDiscount<disMoney?disMoney:this.maxCouponDiscount
								}
							})
							let money = this.$utils.getretailer()?this.dataList.VisaPrice:this.dataList.VisaB2CPrice
							let maxCouponDiscount = this.maxCouponDiscount
							this.TotalDiscount = this.maxCouponDiscount
                            this.discountPrice = money-maxCouponDiscount
						}
					},
					(err) => { }
				);
			},
			
			getSale(){
				this.apipost(
					"b2b_get_GetCustomerCreateByList",
					{
						CustomerId: this.customer.customerId
					},
					(res) => {
						if (res.resultCode == 1) {
							if(res.data.length>0){
								this.SaleList = res.data
								if(res.data.length==1&&this.createBy==0){
									this.SaleName = res.data[0].EmName
									this.SaleId = res.data[0].CreateBy
								}
							}else{
								this.SaleName = ''
								this.SaleId = 0
							}
						} else {
							
						}
					},
					(err) => {
						
					}
				);
			},
			reloadUserinfo() {
				this.b2bUser = uni.getStorageSync("b2b_user");
				this.u = uni.getStorageSync("mall_UserInfo");
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			scroll(e) {
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				this.titleStyle.opacity =
					e.detail.scrollTop - 100 < 0 ?
					0 :
					Math.floor(e.detail.scrollTop - 100) / 100 > 1 ?
					1 :
					Math.floor(e.detail.scrollTop - 100) / 100;
				this.$forceUpdate();
			},
			//获取详情
			getDetails() {
				uni.showLoading()
				this.apipost(
					"b2c_get_GetB2CVisaProductInfo",
					this.delMsg,
					(res) => {
						if (res.resultCode == 1) {
							try {
								if(res.data.VisaProductInfo.FeeInclude&res.data.VisaProductInfo.FeeInclude.indexOf('<img')!=-1){
									res.data.VisaProductInfo.FeeInclude = this.imgTagAddStyle(res.data.VisaProductInfo.FeeInclude)
								}
								if(res.data.VisaProductInfo.FeeNonInclude&&res.data.VisaProductInfo.FeeNonInclude.indexOf('<img')!=-1){
									res.data.VisaProductInfo.FeeNonInclude = this.imgTagAddStyle(res.data.VisaProductInfo.FeeNonInclude)
								}
								if(res.data.VisaProductInfo.VisaMaterials&&res.data.VisaProductInfo.VisaMaterials.indexOf('<img')!=-1){
									res.data.VisaProductInfo.VisaMaterials = this.imgTagAddStyle(res.data.VisaProductInfo.VisaMaterials)
								}
								if(res.data.VisaProductInfo.WarmTip&&res.data.VisaProductInfo.WarmTip.indexOf('<img')!=-1){
									res.data.VisaProductInfo.WarmTip = this.imgTagAddStyle(res.data.VisaProductInfo.WarmTip)
								}
								this.dataList = res.data
								this.getUserCouponList()
                                // #ifdef MP-ALIPAY
								
								
								// #endif
							} catch (e) {
								console.log("getDetails_catch", e)
								uni.showToast({
									icon: "none",
									title: '信息不完善，无法完成显示'
								})
							}
							uni.hideLoading()
						} else {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '签证已下架，请查看其它签证'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							})
						}
					},
					(err) => {
						uni.hideLoading()
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						})
					}
				);
			},
			imgTagAddStyle(htmlstr){
				//正则匹配所有img标签
				//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
				//正则匹配不含style="" 或 style='' 的img标签
				var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
				//给不含style="" 或 style='' 的img标签加上style=""
				htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
				//正则匹配含有style的img标签
				var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
				//在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
				htmlstr = htmlstr.replace(regex2, "$2display:block;max-width:100%;height:auto;$3");
				return htmlstr;
			},
			//立即预定
			goReserce() {
				this.u = uni.getStorageSync("mall_UserInfo");

				if (!this.u) {
					this.u = {
						nickName: "未登录",
						avatarUrl: "",
					};
					this.showAuth = true;
					this.is_show_auth = 1;
					return;
				}
				this.b2bUser = uni.getStorageSync("b2b_user");
				if (!this.b2bUser) {
					this.u = {
						nickName: "未登录",
						avatarUrl: "",
					};
					this.showAuth = true;
					this.is_show_auth = 1;
					return;
				}
				if (this.SaleList&&this.SaleList.length>1&&this.SaleId==0&&this.createBy==0) {
					uni.showToast({
							title: "请选择销售",
							icon: "none",
					});
					this.showSalePreviwe = true;
					return;
				}
				uni.navigateTo({
					url: "/pages/visa/visa_Reserve?id=" +this.delMsg.Pid+'&CreateBy=' +(this.createBy?this.createBy:this.SaleId),
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
    @import url("@/asset/css/flex.css");
	@font-face {
		font-family: "city-font";
		src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pc81HtdOdtly.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/cHntSgti5kmY.woff") format("woff");
		font-display: swap;
	}
	.row{
		display: flex;
	}
	.items-center{
		align-items: center;
	}
	.col{
	    flex: 1;
	}
	.jz_FlightItem {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: auto;
		margin-bottom: 45rpx;
	}

	.jz_FlightTitle {
		color: #999999;
		font-size: 24rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.jz_Arrow {
		position: absolute;
		top: 17rpx;
	}

	.jz_StartDate {
		color: #999999;
		font-size: 24rpx;
		margin-top: 25rpx;
	}

	.jz_FlightBottom {
		color: #111111;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.jz_FlightIcon {
		text-align: center;
		position: relative;
		flex-shrink: 0;
	}

	.jz_LineDetail {
		background-color: #ecf1f4;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.jz_LineDetail rich-text {
		font-size: 26rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #000;
	}

	.line-flex {
		display: flex;
		align-items: center;
	}

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

	.jz_TopImg .top-title {
		line-height: 45px !important;
		font-size: 16px;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		color: #111;
		box-sizing: content-box;
		z-index: 5;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		padding-left: 6rpx;
	}

	.jz_TopImg .media {
		height: 535rpx;
		position: relative;
		z-index: 1;
	}

	.jz_TopImg .media .play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -49rpx;
		margin-left: -49rpx;
		width: 98rpx;
		height: 98rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.jz_TopImg .media .video-box {
		background-color: #111;
		height: 535rpx;
		position: relative;
	}

	.jz_TopImg .media .type-box {
		width: 100px;
		height: 50rpx;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50rpx;
		left: 50%;
		bottom: 80px;
		margin-left: -50px;
	}

	.jz_TopImg .media .media-info .type-img-box {
		background-color: rgba(255, 255, 255, 0.5);
		color: #fff;
		display: flex;
		align-items: center;
		height: 96rpx;
		width: 96rpx;
		padding: 8rpx;
		border-radius: 12rpx;
		position: relative;
	}

	.jz_TopImg .media .media-info .type-img-box image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 12rpx;
		opacity: 0.5;
	}

	.jz_TopImg .media .media-info .type-img-box .content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		justify-items: center;
	}

	.jz_TopImg .media .media-info .type-img-box text {
		font-size: 22rpx;
		font-family: pingfang;
		margin-left: 6rpx;
	}

	.jz_TopImg .media .media-info {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.35);
		top: 287rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 50rpx;
	}

	.jz_TopImg .media .media-info .mi-left {
		flex: 1;
	}

	.jz_TopPrice {
		width: 100%;
		height: auto;
		background-color: #fff;
		position: relative;
		margin-top: -110rpx;
		border-radius: 60rpx 60rpx 0px 0px;
        overflow: hidden;
		z-index: 2;
	}

	.jz_LineTitle {
		font-size: 25rpx;
		color: #ff3166;
	}

	.jz_MainTitle {
		color: #111111;
		font-size: 36rpx;
		font-weight: 600;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-top: 10rpx;
	}
	.jz_MainTitleL{
		
	}
	.jz_MainTitleL img{
		max-width: 88rpx;
		max-height: 100rpx;
		display: block;
		position: relative;
		top: 8rpx;
		right: 15rpx;
	}
	.jz_MainTitleR{
		width: 1px;
		flex: 1;
		font-size: 36rpx;
		line-height: 1.5;
        font-weight: bold;
        line-height: 54rpx;
	}
	.jz_Maidian {
		color: #999999;
		font-size: 28rpx;
		margin-top: 22rpx;
	}

	.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;
		text-align: center;
		display: block;
		width: 70px;
		margin-right: 14px;
		flex-shrink: 0;
		white-space: nowrap;
		overflow: hidden;
		background: #ecf1f463;
	}

	.jz_StartList.active {
		border-color: #111;
		background: rgba(0, 0, 0, 0.07);
	}

	.jz_StartList.active .jz_StartTop {
		background-color: #000;
		color: #fff;
	}

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

	.jz_B2bPrice {
		font-size: 45rpx;
		font-weight: 800;
		font-family: nav-font;
	}

	.jz_Service {
		width: 100%;
		background-color: #fff;
		padding: 30px;
		font-size: 28rpx;
		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: 28rpx;
		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: 28rpx;
		line-height: 20px;
	}

	.jz_Canyin {
		color: #999999;
		font-size: 28rpx;
		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: 28rpx;
		line-height: 20px;
	}

	.jz_StartHoubu {
		color: #111;
		font-size: 20rpx;
		font-weight: 500;
		margin: 10rpx 0;
	}

	.jz_orderbox {
		/* height: 160rpx; */
		/* position: fixed; */
		background-color: #fff;
		/* bottom: 0; */
		/* width: 100vw;
		left: 0; */
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		box-shadow: 0px 0px 30rpx 0px rgba(36, 36, 36, 0.2);
	}

	.jz_OrderDiv {
		width: 90%;
		height: 100rpx;
		background-color: #fff;
		margin: auto;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 10rpx 30rpx 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: 600;
		font-size: 28rpx;
		border-radius: 16rpx;
	}

	.jz_OrderNow.disable {
		background-color: #ecf1f4;
		color: #111;
	}

	.jz_ConButton {
		background-color: #fff;
		height: 40px;
		line-height: 18px;
		margin-top: 3px;
	}

	.jz_ConButton::after {
		border: none !important;
		height: auto !important;
	}

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

	.name-ali {
		/*  #ifdef MP-ALIPAY */
		box-sizing: border-box;
		padding-left: 30rpx;
		/* #endif */
	}

	.sharebox {
		position: absolute;
		top: 57px;
		right: 0;
		z-index: 99;
	}

	.is_share {
		width: 125px;
		height: 38px;
		border-top-left-radius: 22.5px;
		border-bottom-left-radius: 22.5px;
		background: #111;
		opacity: 0.8;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 5px;

	}

	.time-line-box {
		display: flex;
		margin-top: 10px
	}

	.time-line-box .left .icon {
		width: 31px;
		height: 31px;
		border-radius: 31px;
		color: #FFF;
		line-height: 31px;
		text-align: center;
		font-size: 28rpx;
	}

	.time-line-box .left {
		margin-right: 20rpx;
		position: relative;
		min-height: 50px;
	}

	.time-line-box .left .icon::after {
		background-color: inherit;
		width: 3px;
		position: absolute;
		top: 33px;
		left: 14px;
		bottom: 0;
		display: block;
		content: ' ';
	}

	.time-line-box .right {
		width: 1px;
		flex: 1;
	}

	.time-line-box .right .subtitle {
		font-size: 12px;
		margin-bottom: 8px;
		opacity: .6;
		text-transform: uppercase;
		letter-spacing: 1px;
		/* font-weight: 700; */
	}

	.time-line-box .right .title {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.25px;
		margin-bottom: 16px;
		line-height: inherit;
		font-family: microsoft yahei ui light;
	}

	.time-line-box .right .card {
		background-color: #ecf1f4;
		padding: 10px;
		border-radius: 8px;
	}

	.time-line-box .right .card p {
		margin-bottom: 10px;
	}

	.time-line-box .right .card strong {
		font-weight: normal;
	}

	.time-line-box .right .tag-play {
		display: flex;
		align-items: center;
	}

	.time-line-box .right .tag-play .tag-play-box {
		display: flex;
		align-items: center;
		border-radius: 8rpx !important;
		overflow: hidden;
	}

	.time-line-box .right .tag-play .tag-play-box .remark {
		background-color: #1d1d1d;
		padding: 0px 4px;
		font-size: 12px;
		color: #FFF;
	}

	.time-line-box .right .tag-play .tag-play-box .play-time {
		padding: 0px 4px;
		font-size: 12px;
		background: rgb(240, 189, 134);
		color: #1d1d1d;
	}

	.time-line-box .right .sec-images {
		margin: 10px 0 0 0;
		height: 10vh;
		display: flex;
		align-items: center;
		border-radius: 8px;
		overflow: hidden;
	}

	.time-line-box .right .sec-images image {
		width: 1px;
		flex: 1;
		height: 10vh;
		margin-right: 1px;
	}
	.SaleNameTetx{
		display: flex;
	}
	.SaleNameTetx view{
		margin-right: 15rpx;
	}
	.SaleBox{
		padding: 0 20px;
	}
	.SaleText{
		height: 80rpx;
		line-height: 77rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
	}
	.jz_LineDetaCZ{
		height: 36rpx;
		background: #FFE5EC;
		border-radius: 0rpx 6rpx 6rpx 8rpx;
	}
	.jz_LineDetaCZL{
		width: 112rpx;
		height: 36rpx;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463439143641.png')no-repeat;
		background-size: 100% auto;
	}
	.jz_LineDetaCZR{
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #FF3166;
		line-height: 70rpx;
		padding-right: 10rpx;
		padding-left: 5rpx;
	}
	.jz_LineDetaYJDKQ{
		display: flex;
		padding: 18rpx 0 0 0;
	}
	.jz_LineDetaFL{
		width: 1px;
		flex: 1;
		display: flex;
		align-items: center;
	}
	.jz_LineDetaFLJf{
		padding: 1rpx 8rpx;
		border-radius: 6rpx;
		border: 1rpx solid #FFE5EC;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #FF3166;
	}
	.jz_LineDetaCZ.jz_LineDetaCZL{
		flex: auto;
	}
	.jz_LineDetaYJ{
		display: flex;
		align-items: center;
		width: 1px;
		flex: 1;
	}
	.jz_LineDetaYJL{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #ACACAC;
		text-decoration: line-through
	}
	.jz_LineDetaYJR{
		font-family: PingFang SC;
		font-size: 28rpx;
		color: #FF3166;
		margin-left: 15rpx;
	}
	.jz_LineDetaRDKQ{
		font-family: PingFang SC;
		font-weight: 100;
		font-size: 24rpx;
		color: #949494;
		display: flex;
		align-items: center;
	}
	.jz_LineDetaRDKQ view{
		font-size: 24rpx;
		color: #949494;
	}
	.jz_LineDetaSC{
		width: 100%;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732463500511302.png')no-repeat;
		background-size: 100% auto;
		display: flex;
		padding: 5rpx;
		margin-top: 18rpx;
	}
	.jz_LineDetaSCL{
		height: 90rpx;
		background: linear-gradient(90deg, #FE3D49, #FB2E1F);
		border-radius: 16rpx 45rpx 45rpx 16rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 23rpx;
	}
	.jz_LineDetaSCLDl{
		font-family: PingFang SC;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		margin-right: 10rpx;
	}
	.jz_LineDetaSCLDl view{
		position: relative;
		top: 13rpx;
	}
	.jz_LineDetaSCQM{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 56rpx;
		color: #FFFFFF;
		line-height: 70rpx;
	}
	.jz_LineDetaSCR{
		color: #fff;
		margin-left: 13rpx;
		padding: 10rpx 0;
		letter-spacing: .1rpx;
	}
	.jz_LineDetaSCRTitle{
		font-family: PingFang SC;
		font-weight: 200;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.jz_LineDetaSCRText{
		font-family: PingFang SC;
		font-weight: 100;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-top: 5rpx;
	}
	.jz_LineDetaQTS{
		display: flex;
		align-items: center;
		padding: 18rpx 0 0 0;
	}
	.jz_LineDetaQTSImg{
		width: 26rpx;
		height: 29rpx;
		display: inline-block;
		margin-right: 6rpx;
	}
	.jz_LineDetaQTSText{
		font-size: 24rpx;
		color: #000;
		font-weight: 800;
		display: flex;
	}
	.jz_LineDetaQTSTextRed{
		color: rgba(255, 49, 102, 1);
	}
	.jz_LineDetaVipPr{
		margin-top: 16rpx;
		position: relative;
		left: -20rpx;
	}
	.jz_LineDetaVip{
		width: 100%;
		height: 120rpx;
		background: linear-gradient(90deg, #3F423F, #313131);
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		padding: 15rpx 0 6rpx 0;
		margin-top: 18rpx;
		margin-bottom: 18rpx;
	}
	.jz_LineDetaVipTop{
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #E2C27A;
		letter-spacing: .1rpx;
		display: flex;
		align-content: center;
		padding: 0 34rpx;
	}
	.jz_LineDetaVipTop img{
		width: 21rpx;
		height: 21rpx;
		display: inline-block;
		margin-left: 5rpx;
	}
	.jz_LineDetaVPB{
		display: flex;
		
	}

	.jz_LineDetaVPBBox{
		display: flex;
		align-items: center;
		width: 1px;
		flex: 1;
	}
	.jz_LineDetaVPBN{
		width: 30rpx;
		height: 30rpx;
		background: #2E2E2E;
		border-radius: 50%;
		text-align: center;
		line-height: 28rpx;
		font-family: DIN Black;
		font-weight: bold;
		font-size: 24rpx;
		color:  #494949;;
	}
	.jz_LineDetaVPBLine{
		flex: 1;
		height: 10rpx;
		background: #2E2E2E;
	}
	.jz_LineDetaVPBBoxI{
		position: relative;
		flex: 1;
	}
	.jz_LineDetaVPBBoxI img{
		width: 87rpx;
		height: 99rpx;
		position: absolute;
		bottom: -35rpx;
		right: 20rpx;
		z-index: 2;
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBN{
		background: linear-gradient(270deg, #C99E59, #FFFFB3);
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBLine{
		background: #C99E59;
		color: #583F2C;
	}
	.VPBLRadiusL{
		border-radius: 20rpx 0 0 20rpx ;
	}
	.VPBLRadiusR{
		border-radius: 0 20rpx 20rpx 0;
	}
	.jz_LineDetaVPBY{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}
	.jz_LineTitleL{
		padding: 0 15rpx 3rpx 0;
		background: #000;
		border-radius: 17rpx;
		display: flex;
		margin-right: 20rpx;
	}
	.jz_LineTitleLImg{
		position: relative;
		margin-right: 40rpx;
	}
	.jz_LineTitleLImg img{
		width: 38rpx;
		height: 41rpx;
		position: absolute;
		top: -6rpx;
	}
	.jz_LineTitleLText{
		font-family: PingFang SC;
		font-size: 24rpx;
		color: #E2C27A;
	}
    .visaDetailTag{
        background: #F8F1E3;
        height: 93rpx;
        padding: 0 47rpx;
    }
    .visaDetailTag text{
        display: inline-block;
        padding: 8rpx 10rpx;
        background: #EEE1C2;
        border-radius: 6rpx;
        font-weight: bold;
        font-size: 24rpx;
        color: #EFAD3D;
        margin-left: 30rpx;
    }
    .visaDetailDesBox{
        background: #fff;
        margin-top: 20rpx;
		padding-bottom: 40rpx;
    }
    .visaDetailDes{
        padding: 0 41rpx;
    }
    .visaDetailDesTitle{
        font-family: PingFang SC;
        font-weight: 800;
        font-size: 36rpx;
        color: #080A09;
        padding: 31rpx 0 32rpx 0;
    }
    .visaDetailNumBox{
        margin-bottom: 25rpx;
    }
    .visaDetailNumBox:last-child{
        margin-bottom: 18rpx;
    }
    .visaDetailNum{
        width: 322rpx;
        height: 154rpx;
        padding: 34rpx 18rpx 48rpx 30rpx;
        margin-right: 12rpx;
    }
    .visaDetailNum:last-child{
        margin-right: 0;
        margin-left: 12rpx;
    }
    .visaDetailNum view:first-child{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #B99846;
    }
    .visaDetailNum view:last-child{
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #080A09;
        margin-top: 22rpx;
    }
    .visaDetailNum.active1{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750606939597449.png')no-repeat;
        background-size: 100% 100%;
    }
    .visaDetailNum.active2{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750607949104673.png')no-repeat;
        background-size: 100% 100%;
    }
    .visaDetailNum.active3{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750607991473060.png')no-repeat;
        background-size: 100% 100%;
    }
    .visaDetailNum.active4{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638750607899480991.png')no-repeat;
        background-size: 100% 100%;
    }
    .visaDetailLin{
        border-bottom: 1rpx solid #F2F2F2;
    }
</style>
