<style scoped lang="scss">
	.bookaCarList {
		width: 100%;
		height: 100vh;
		font-family: PingFang SC;
		background: #FFF;

		.mask {
			width: 100%;
			height: 100%;
			background: rgba(17, 17, 17, 0.4);
			position: fixed;
			top: 0;
			left: 0;
		}

		.box-top {
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			padding: 0 15px;

			.box-top-b {
				width: 100%;
				height: 45px;
				background: #ECF1F4;
				border-radius: 23px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15px;

				.box-top-b-l {
					width: calc((100vw - 30px - 30px - 30px)/2);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: center;

				}

			}
		}

		.box-rili {
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			padding: 0 10px;
			position: relative;
			box-shadow: 0px 5px 15px 0px rgba(36, 36, 36, 0.06);

			.box-rili-scroll {
				width: 100%;
				overflow-x: auto;
				display: flex;
			}

			.box-rili-item {
				// width: 50px;无效
				height: 50px;
				border-radius: 10px;
				font-size: 13px;
				color: #111111;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 8px;
			}

			.box-rili-item2 {
				color: #FFF;
				background: #111111;
			}

			.porili {
				width: 120rpx;
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;
				background: #FFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.scr-box {
			width: 100%;
			box-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.14);
			border-radius: 10px;
			margin-top: 15px;

			.scr-box-top {
				width: 100%;
				padding: 15px;

				.s-t-t {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 15px;
					font-weight: 800;
					color: #111111;
					line-height: 35px;
				}
			}

			.s-c-box {}

			.s-c-o {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.s-c-l {
				flex: 1;
				width: 1px;
				display: flex;
				align-items: flex-start;
			}

			.s-c-r {
				width: 80px;
			}

			.chufatime {
				width: 44px;
				font-size: 11px;
				font-weight: 500;
				color: #111111;
				line-height: 25px;
			}

			.setoutdian {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: #111111;
				margin-top: 10px;
				margin-right: 2px;
			}

			.s-c-place {
				font-size: 12px;

				font-weight: bold;
				color: #111111;
				line-height: 25px;
				width: calc(100vw - 60px - 44px - 5px - 80px - 2px);
			}

			.prices {
				color: #FF3166;
				font-size: 16px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.sold {
				color: #111111;
				font-size: 11px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.shuxian {
				width: 1px;
				height: 10px;
				background: #111111;
				margin-left: 46px;
			}

			.s-b-box {
				width: 100%;
				padding: 15px;
				background: #F4F6F7;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				position: relative;

				.s-b-box-l {
					display: flex;
					align-items: flex-start;
					font-size: 11px;
					color: #999999;
					margin-top: 10px;


				}

				.s-b-box-r {
					width: 60px;
					height: 30px;
					border: 1px solid #111111;
					border-radius: 5px;
					font-size: 13px;
					color: #111111;
					text-align: center;
					line-height: 30px;
				}

				.s-b-box-posi {
					width: 100%;

					position: absolute;
					left: 0;
					top: -6px;

					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.screenbottom {
			width: calc(100vw - 40px);
			height: 50px;
			border-radius: 8px;
			position: fixed;
			left: 20px;
			bottom: 30px;
			box-shadow: 0px 5px 15px 0px rgba(36, 36, 36, 0.2);
			display: flex;
			align-items: center;
			background: #FFF;
			z-index: 9;

			.screenbottom-item {
				width: calc((100vw - 40px - 2px)/3);
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
				color: #6E6E6E;
				font-weight: 500;
			}

			.screenbottom-sx {
				width: 1px;
				height: 25px;
				background: rgba(17, 17, 17, 0.3);
			}
		}

		.popup-box {
			width: 100%;
			background: #FFF;

			.picker-view {
				width: 750rpx;
				height: 300rpx;
				margin-top: 20rpx;
			}
			.item{
				height: 50px;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
			.btn{
				width: 100%;
				height: 40px;
				margin: 30px 0;
				padding: 0 28px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
			}
			.btn-item1{
				width: 300rpx;
				height: 40px;
				border-radius: 10px;
				border: 1px solid #111111;
				font-size: 14px;
				color: #111111;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn-item2{
				width: 300rpx;
				height: 40px;
				font-size: 14px;
				color: #FFFFFF;
				background: #111111;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}
		.kongbai{
			width: 100%;
			
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 14px;
			color: #999999;
			
		}

	}
</style>
<template>
	<view class="bookaCarList">
		<view class="box-top">
			<view class="box-top-b">
				<view class="box-top-b-l">
					{{carMsg.StartCityName}}
				</view>
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png"
					mode="aspectFill" style="width: 20px;height: 20px;"></image>
				<view class="box-top-b-l">
					{{carMsg.ArriveCityName}}
				</view>
			</view>
		</view>
		<view class="box-rili">
			<view class="box-rili-scroll">
				<view class="box-rili-item" :class="{'box-rili-item2':msg.Q_Date == x.date}"
					v-for="(x,y) in topdateList" :key='y' @click="choicedatelist(x)">
					<span style='width: 50px;display: inline-block;text-align: center;'>{{x.showdate}}</span>
					<span>{{x.week}}</span>
				</view>
			</view>
			<view class="porili" @click="showcalendar = true">
				<image
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dingcherilitubiao.png"
					mode="aspectFill" style="width: 48rpx;height: 48rpx;"></image>
			</view>
		</view>
		<view class="kongbai" v-if="g.length == 0" >
			<image
				src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dingchekongbai.png"
				mode="aspectFill" style="width: 110px;height: 117px;margin-top: 180rpx;"></image>
				<span style='margin-top: 20px;'>真遗憾，没有相关数据</span>
				
		</view>
		<view style="height: calc(100% - 130px);" v-if="g.length > 0">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%;width: 100%">
				<view style="padding: 0 15px;">
					<view class="scr-box" v-for="(x,y) in g" :key='y'>
						<view class="scr-box-top">
							<view class="s-t-t">
								<image
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcchufa.png"
									mode="aspectFill" style="width: 13px;height: 11px;"></image>
								<span style='margin-left: 5px;'>{{x.StartCityName}}</span>
								<span style='margin:0 5px;'>-</span>
								<span>{{x.ArriveCityName}}</span>
							</view>
							<view class="s-c-box" v-if="x.show==false">
								<view class="s-c-o">
									<view class="s-c-l">
										<view class='chufatime'>{{x.SiteList[0].AboutTime}}</view>
										<view class="setoutdian"></view>
										<view class="s-c-place">{{x.SiteList[0].Name}}</view>
									</view>
									<view class="s-c-r prices">
										<span style='margin-top: 3px;font-size: 11px;'>￥</span>
										<span style='font-weight: bold;'>{{$utils.getretailer()==true? x.Price:x.B2CPrice}}</span>
										<span style='margin-top: 3px;font-size: 11px;'>起</span>
									</view>
								</view>
								<view class="shuxian"></view>
								<view class="s-c-o">
									<view class="s-c-l">
										<view class='chufatime'>
											{{x.SiteList[x.SiteList.length-1].AboutTime!=null && x.SiteList[x.SiteList.length-1].AboutTime!=''?x.SiteList[x.SiteList.length-1].AboutTime:''}}
										</view>
										<view class="setoutdian" style="background: #DFBE6E;"></view>
										<view class="s-c-place">{{x.SiteList[x.SiteList.length-1].Name}}</view>
									</view>
									<view class="s-c-r sold">
										<span v-if='x.SurplusNum>0 && x.ProductState==1'>余位:{{x.SurplusNum}}</span>
										<span v-if='x.ProductState==2'>已售罄</span>
									</view>
								</view>
							</view>
							<view class="s-c-box" v-if="x.show == true ">
								<view v-for='(item,index) in x.SiteList' :key='index'>
									<view class="s-c-o">
										<view class="s-c-l">
											<view class='chufatime'>
												{{item.AboutTime!=null && item.AboutTime!=''?item.AboutTime:''}}
											</view>
											<view class="setoutdian" v-if="x.SiteList.length-1 !=index"></view>
											<view class="setoutdian" v-else style="background: #DFBE6E;"></view>
											<view class="s-c-place">{{item.Name}}</view>
										</view>
										<view class="s-c-r prices" v-if="index==0">
											<span style='margin-top: 3px;font-size: 11px;'>￥</span>
											<span style='font-weight: bold;'>{{$utils.getretailer()==true? x.Price:x.B2CPrice}}</span>
											<span style='margin-top: 3px;font-size: 11px;'>起</span>
										</view>
										<view class="s-c-r sold" v-if="index==x.SiteList.length-1">
											<span v-if='x.SurplusNum>0 && x.ProductState==1'>余位:{{x.SurplusNum}}</span>
											<span v-if='x.ProductState==2'>已售罄</span>
										</view>
									</view>
									<view class="shuxian" v-if='index!=x.SiteList.length-1'></view>
								</view>
							</view>
						</view>
						<view class="s-b-box">
							<view class="s-b-box-posi" v-if="x.SiteList.length>2">
								<u-icon v-if='x.show == false' name="arrow-down" color="#111111" size="30"
									@click="getlistshow(y)" />
								<u-icon v-if='x.show == true' name="arrow-up" color="#111111" size="30"
									@click="getlistshow(y)" />
							</view>
							<view class="s-b-box-l">
								<image
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dctixing.png"
									mode="aspectFill" style="width: 9px;height: 13px;"></image>
								<view style='margin-left: 3px;width: calc(100vw - 60px - 80px);'>{{x.Description}}
								</view>
							</view>
							<view class="s-b-box-r" v-if="x.ProductState==1" @click="yuding(x)">
								预定
							</view>

						</view>
					</view>
				</view>

				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
					bg-color="#FFF" />
				<view style="width: 100%;height: 90px;"></view>

			</scroll-view>
		</view>
		<view class="screenbottom">
			<view class="screenbottom-item" @click="goscreen(0)">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcchufa.png"
					mode="aspectFill" style="width: 20px;height: 16px;"></image>
				<span>出发地点</span>
			</view>
			<view class="screenbottom-sx"></view>
			<view class="screenbottom-item" @click="goscreen(1)">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcdaoda.png"
					mode="aspectFill" style="width: 23px;height: 16px;"></image>
				<span>到达地点</span>
			</view>
			<view class="screenbottom-sx"></view>
			<view class="screenbottom-item" @click="goscreen(2)">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcchufatime.png"
					mode="aspectFill" style="width: 16px;height: 16px;"></image>
				<span>出发时间</span>
			</view>
		</view>
		<view class="mask" v-if="showcalendar"></view>
		<calendar :is-show="showcalendar" :start-date='msg.Q_Date' @callback="getDate" @closeback='getclose'
			:init-month='3' />
		<u-popup v-model="screenshow" mode='bottom' ref="onlyhover">
			<view class="popup-box">
				<view class="popup-box-t">

					<u-tabs style='width: 100%;' :is-scroll="false" name="name" :list="popuplist"
						:active-color="mainColor" :current="popupcurrent" @change="popupchange" :show-bar="false"
						:activeFontSize="34" :inactive-color="secondary" :bold="true" height="100" duration="0"
						font-size="28"></u-tabs>
					
				
					<picker-view v-show="popupcurrent==0"  @change="getpopupcu1" class="picker-view">
						<picker-view-column>
							<view class=" item" v-for="(item,index) in DepartList" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
					<picker-view v-show="popupcurrent==1"  @change="getpopupcu2" class="picker-view">
						<picker-view-column>
							<view class=" item" v-for="(item,index) in ArriveList" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
					<picker-view v-show="popupcurrent==2"  @change="getpopupcu3" class="picker-view">
						<picker-view-column>
							<view class=" item" v-for="(item,index) in alltime" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>

					<view class="btn">
						<view class="btn-item1" @click="chongzhi">重置</view>
						<view class="btn-item2" @click="queren">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import Calendar from './components/Calendar.vue'
	
	export default {
		components: {
			Calendar,
			auth
			
		},
		data(options) {
			return {
				showAuth:false,
				screenshow: false,
				startDate: '',
				pageTitle: "去订车",
				showcalendar: false,
				mainColor: '',
				
				u:{},
				msg: {
					pageIndex: 1,
					pageSize: 20,
					StartCityId: 0,
					StartCityType: 0,
					ArriveCityId: 0,
					ArriveCityType: 0,
					Q_Date: '',
					StartCityName: '',
					ArriveCityName: '',
					StartDate: '',
					EndDate: '',
				},
				carMsg: {},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				page_count: 1,
				status: "loadmore",
				g: [],
				topdateList: [],
				DepartList: [], //出发点数组
				ArriveList: [], //到达点数组
				alltime: [],//时间数组
				popuplist: [{
					name: '出发地点'
				}, {
					name: '到达地点'
				}, {
					name: '出发时间'
				}],
				popupcurrent: 0,
				SMsg:{
					depart:'',
					Arrive:'',
					StartDate:'',
					EndDate:'',
				},
				
			}
			
			
		},
		onLoad(options) {
			
			if (options && options.carMsg) {
				//对象解码
				this.carMsg = JSON.parse(decodeURIComponent(options.carMsg))
				this.msg.StartCityId = this.carMsg.StartCityId;
				this.msg.StartCityType = this.carMsg.StartCityType;
				this.msg.ArriveCityId = this.carMsg.ArriveCityId;
				this.msg.ArriveCityType = this.carMsg.ArriveCityType;
				this.msg.Q_Date = this.carMsg.Q_Date;
			}
			
			this.mainColor = this.$uiConfig.mainColor;
			this.gettimeList()
			this.init();
			this.getSelectCarSiteList()
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});

		},
		methods: {
			yuding(x){
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
				  this.u = {
					nickName: "未登录",
					avatarUrl: ""
				  };
				  this.showAuth = true;
				}	else{
					uni.navigateTo({
						url: '/pages/guidecar/specialCarReserve?Id='+x.Id +'&Date='+this.msg.Q_Date
						
					})
				}
				
			},
			popupchange(e) { //tab事件
				this.popupcurrent = e;
			},
			goscreen(type) { //筛选的弹出
				this.screenshow = true;
				this.popupcurrent = type;
			},
			getlistshow(index) { //点击是否展开全部
				this.g[index].show = !this.g[index].show
			},
			gettimeList() {
				var date1 = new Date();
				var date2 = new Date(date1);
				date2.setDate(date1.getDate() + 60);
				let nowtime = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
				let htime = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
				this.topdateList = this.getDayAll(nowtime, htime)
				this.startDate = nowtime

			},
			getDayAll(starDay, endDay) { //根据2个时间段获取之间的所有日期
				var arr = [];
				var dates = [];
				// 设置两个日期UTC时间
				var db = new Date(starDay);
				var de = new Date(endDay);
				// 获取两个日期GTM时间
				var s = db.getTime() - 24 * 60 * 60 * 1000;
				var d = de.getTime() - 24 * 60 * 60 * 1000;

				// 获取到两个日期之间的每一天的毫秒数
				for (var i = s; i <= d;) {
					i = i + 24 * 60 * 60 * 1000;
					arr.push(parseInt(i))
				}
				// 获取每一天的时间  YY-MM-DD
				for (var j in arr) {
					var time = new Date(arr[j]);
					var year = time.getFullYear(time);
					var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1));
					var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
					var YYMMDD = year + '-' + mouth + '-' + day;
					let showweek = time.getDay();
					let week = this.getweek(showweek)
					if (j == 0) {
						week = '今天'
					} else if (j == 1) {
						week = '明天'
					} else if (j == 2) {
						week = '后天'
					}
					let obj = {
						showdate: mouth + '/' + day,
						date: YYMMDD,
						week: week
					}
					dates.push(obj)
				}
				return dates
			},
			setData:function(obj){
				let that = this;
				let keys = [];
				let val,data;
				Object.keys(obj).forEach(function(key){
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2,index){
						if(index+1 == keys.length){
							that.$set(data,key2,val);
						}else{
							if(!data[key2]){
								that.$set(data,key2,{});
							}
						}
						data = data[key2];
					})
				});
			},
			//获取回调的日期数据
			getDate(date) {
				this.msg.Q_Date = date.startStr.dateStr;
				this.showcalendar = false;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init()
			},
			getclose() {
				this.showcalendar = false;

			},
			getweek(day) { //根据值返回当前时间的星期几
				if (day == 1) {
					return '周一'
				} else if (day == 2) {
					return '周二'
				} else if (day == 3) {
					return '周三'
				} else if (day == 4) {
					return '周四'
				} else if (day == 5) {
					return '周五'
				} else if (day == 6) {
					return '周六'
				} else if (day == 0) {
					return '周日'
				}
			},
			choicedatelist(x) {
				this.msg.Q_Date = x.date;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init()

			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {

					this.status = "nomore";
				}
			},
			init() {
				uni.showLoading({
					title: '加载中...'
				})
				this.request2({
						url: '/api/AppletCar/GetAppletCarCustomPageList',
						data: this.msg
					},
					res => {
						uni.hideLoading()
						if (res.resultCode == 1) {
							let data = res.data.pageData;
							data.map(x => { // 添加一个对象
								x.show = false
							})
							this.g = this.g.concat(data);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			getSelectCarSiteList() {
				this.request2({
						url: '/api/AppletCar/GetAppletSelectCarSiteList',
						data: {
							StartCityId: this.msg.StartCityId,
							StartCityType: this.msg.StartCityType,
							ArriveCityId: this.msg.ArriveCityId,
							ArriveCityType: this.msg.ArriveCityType,
							Q_Date: this.msg.Q_Date,
							StartCityName: '',
							ArriveCityName: '',
							StartDate: '',
							EndDate: '',
						}
					},
					res => {
						this.DepartList = res.data.DepartList;
						this.ArriveList = res.data.ArriveList;
						this.DepartList.unshift('不限')
						this.ArriveList.unshift('不限')
						this.alltime =['不限', '00:00-03:00', '03:00-06:00', '06:00-09:00', '09:00-12:00',
					'12:00-15:00', '15:00-18:00', '18:00-21:00', '21:00-24:00'
				]
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			chongzhi(){
				this.msg.StartCityName = '';
				this.msg.ArriveCityName = '';
				this.msg.StartDate = '';
				this.msg.EndDate = '';
				this.msg.pageIndex = 1;
				this.g = [];
				this.init();
				this.screenshow = false;
				this.$forceUpdate()
				this.DepartList= [], //出发点数组
				this.ArriveList= [], //到达点数组
				this.alltime= [],//时间数组
				this.getSelectCarSiteList()
			},
			queren(){
				this.msg.StartCityName = this.SMsg.depart;
				this.msg.ArriveCityName = this.SMsg.Arrive;
				this.msg.StartDate = this.SMsg.StartDate;
				this.msg.EndDate = this.SMsg.EndDate;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init();
				this.screenshow = false
			},
			getpopupcu1(e) {
				
				let value = e.detail.value[0];
				if(value==0){
					this.SMsg.depart = ''
				}else{
					this.SMsg.depart = this.DepartList[value]
				}
			},
			getpopupcu2(e) {
				
				let value = e.detail.value[0];
				if(value==0){
					this.SMsg.Arrive = ''
				}else{
					this.SMsg.Arrive = this.ArriveList[value]
				}
				
			},
			getpopupcu3(e) {
				
				let value = e.detail.value[0];
				if(value==0){
					this.SMsg.StartDate = ''
					this.SMsg.EndDate = ''
				}else{
					this.SMsg.StartDate = (this.alltime[value]).split('-')[0]
					this.SMsg.EndDate = (this.alltime[value]).split('-')[1]
				}
				
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  // this.showAuth=false;
			  this.init();
			
			},
			//关闭登录窗口
			gbAuth(){
				this.showAuth = false;
			},

		}
	}
</script>
