<template>
	<div class="guidecarList" style="height: 100vh;">
		<view class="guide_ComHead">
			<view style="width: 100%;background: #FFFFFF;padding-bottom:5px ;">
				<view class="g_top">
					<view class="row">
						<u-icon name="location" :size="32" color="#EE4454"></u-icon>
						<span>{{Pickcar}}</span>
						<view style="width: 2px;color: #E7E7E7;height: 20px;margin:0 10px;"></view>
					</view>
					<view class='row' style="justify-content: space-between;width: 220px;">
						<view class="topB" @click="">
							<span class='ztext'>{{STime.month}}月{{STime.day}}日</span>
							<span class='titext'>{{STime.week+' '+STime.hour+':'+STime.minute}}</span>
						</view>
						<view class="topB" style="height: 20px;align-items: center;">
							<span style='font-size: 11px;color: #1C1E1F;'>{{intervalDay}}</span>
							<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/sanjiao.png" mode="aspectFill" style="width: 55px;height: 4px;"></image>
						</view>
						<view class="topB" @click="">
							<span class='ztext'>{{ETime.month}}月{{ETime.day}}日</span>
							<span class='titext'>{{ETime.week+' '+ETime.hour+':'+ETime.minute}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="g_Second" style="position: relative;background: #fff;width: 100%;">
				<view style=" border-bottom: 1px solid rgba(0, 0, 0, 0.03);">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-height='4' active-color="#FF8585"></u-tabs>
				</view>
				<view v-if="screenshow==true" class="tanchu">
					<scroll-view :scroll-y="true" :enable-back-to-top="true" style="max-height: 321px;">
						<view class="tanchu_item" v-for="(item, index) in screenList" :key="index" @click="onItemSelect(item)">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<image v-if='current==1' style="width:15px;height:15px;margin-right: 10px;" :src="item.BrandLogo"></image>
								<span>{{item.Name}}</span>
							</view>
							<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.OrderBy && current==0'></u-icon>
							<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.CarBrandId && current==1'></u-icon>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<div style='display: flex;width: 100%;overflow: hidden;overflow-y: auto;'>
			<view v-if="screenshow==true" class="Mask" @click="screenshow=false"></view>
			<div class="left-slider" :style="{ 'height': `calc(100vh - ${scrollHeight})`,}">
				<sidebar :active="tic" bg='#FAF8F9' name="Name" active-color="#FF8585" :border="false" :list="classList" @change="changeHandler"></sidebar>
			</div>
			<div class="right-slider">
				<u-empty v-if="g.length == 0" text="暂无相关车辆信息" mode="data"></u-empty>
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" v-if="g.length > 0"
				 :style="{ 'height': `calc(100vh - ${scrollHeight})`,'width':'calc(100vw - 85px)'}">
					<view style="width: 100%;display: flex;flex-direction: column;align-items: center;padding: 10px">
						<view class="c_list_item" v-for="(x, i) in g" :key="i" @click="goDetails(x)">
							<view class="itemb">
								<view class="c_t_l">
									<image :src="x.cover_pic" mode="aspectFill" style="width: 100%;height: 100%;"></image>
								</view>
								<view class="c_t_r" :style="{'width':windowWidth-85-30-110+'px'}">
									<span class='ctr_name'>{{x.name}}</span>
									<span style='font-size: 11px;color: #111111;margin-top: 10px;font-family:aa;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								'>{{x.guidecartype}}
										· 可乘坐{{x.goods_stock}}人 · {{x.carcolorName}}</span>
								</view>
							</view>
							<view class="itemb" style="justify-content: space-between;margin-top: 10px;">
								<view class="itemb" style="height:43px ;padding-right: 3px;width: 180px;background: #FAF8F9;">
									<image :src="x.guidephoto" mode="aspectFill" style="width: 30px;height: 30px;border-radius: 15px;margin-left: 5px;"></image>
									<view style="display: flex;flex-direction: column;justify-content: space-between;height: 30px;margin-left: 8px;">
										<view class="itemb">
											<span style='font-size: 11px;color: #111111;'>{{x.guidename}}</span>
											<view style="background-image: linear-gradient( to right,#FF8585, #EE4454);color: #FFF;font-size: 10px;border-radius: 1px;margin-left: 5px;padding: 0 2px;">
												{{x.guidescore==0?'5.0':x.guidescore.toFixed(1)}}
											</view>
										</view>
										<view class="itemb" style='font-size: 11px;color: #666666;'>
											<view class="itemb">
												<image src="../../static/images/sidao/time.png" mode="aspectFill" style="width: 11px;height: 11px;margin-right: 3px;"></image>
												<span>从业{{x.guideworkyears}}年</span>
											</view>
										</view>
									</view>
								</view>
								<view style="display: flex;flex-direction: column;align-items: flex-end;">
									<view class="price">
										<text style='font-size: 11px;'>￥</text>
										<text class="numfont">{{ x.price.split('.')[0]}}</text>
										<text style='font-size: 11px;' v-if='msg.CarType==5'>/人</text>
									</view>
									<view style=" color: #999999;font-size: 11px; ">原价￥{{x.original_price}}</view>
								</view>
							</view>
							<view class="line"></view>
						</view>
					</view>
				</scroll-view>
			</div>
		</div>
	</div>
</template>

<script>
	import sidebar from "../../components/sidebar/index.vue";
	export default {
		components: {
			sidebar
		},
		data() {
			return {
				mainColor: "",
				activeStyle: "",
				pageTitle: "订车",
				classList: [],
				current: 0,
				screenshow: false,
				Pickcar: '',
				tic: 0,
				msg: {
					pageIndex: 1,
					pageSize: 15,
					Name: "",
					GoodsType: 1,
					OrderBy: 0,
					StartTime: '',
					EndTime: '',
					CarType: 0,
					LineName: '',
					LineDescription: '',
					RideNum: 0,
					CarClass: '',
					CarBrandId: 0,
					RegionIds: 0,
					IsSpell: 2,
				},
				screenList: [],
				contents: [{
						'ID': 0,
						Name: '综合排序'
					},
					{
						'ID': 1,
						Name: '价格升序'
					},
					{
						'ID': 2,
						Name: '价格降序'
					},
					{
						'ID': 3,
						Name: '评分升序'
					},
					{
						'ID': 4,
						Name: '评分降序'
					},
					{
						'ID': 5,
						Name: '最新升序'
					},
					{
						'ID': 6,
						Name: '最新降序'
					},
				],
				contents2: [], //品牌
				list: [{
					name: '综合排序'
				}, {
					name: '全部品牌'
				}],
				STime: '',
				ETime: '',
				intervalDay: '',
				address: '', //出发地址
				BrandList: [], //品牌列表
				g: [],
				page_count: 1,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				PagePath: '',
				scrollHeight: 0,
				windowWidth: 0
			};
		},
		onLoad(options) {
			if (options && options.item) {
				let item = JSON.parse(decodeURIComponent(options.item))
				this.msg.CarClass = item.CarClass
				this.msg.CarType = item.CarType
				this.msg.EndTime = item.EndTime
				this.msg.LineDescription = item.LineDescription
				this.msg.LineName = item.LineName
				this.msg.RegionIds = item.RegionIds
				this.msg.RideNum = item.RideNum
				this.msg.StartTime = item.StartTime
				this.msg.IsSpell = item.IsSpell
				this.STime = this.getTime(item.StartTime)
				this.ETime = this.getTime(item.EndTime)
				let startTime = new Date(this.msg.StartTime); // 开始时间
				let endTime = new Date(this.msg.EndTime); // 结束时间
				let usedTime = endTime - startTime; // 相差的毫秒数
				let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数
				let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间
				let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数
				if (days > 0) {
					if (leavel > 0) {
						this.intervalDay = days + 1 + '天'
					} else {
						this.intervalDay = days + '天'
					}
				} else {
					if (hours >= 6) {
						this.intervalDay = '1天'
					} else {
						this.intervalDay = '半天'
					}
				}
			}
			if (options && options.address) {
				this.address = options.address
			}
			if (options && options.Pickcar) {
				this.Pickcar = options.Pickcar
			}
			if (options && options.tic) {
				this.tic = options.tic
			}
			this.getCarClassList() //车辆类型
			this.init();
			this.getGuideCarBrandList() //车辆品牌
			this.getPagePath(); //获取详情跳转详情地址
			this.windowWidth = this.$utils.SystemInfo().windowWidth
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.activeStyle = `background:${this.mainColor};`;
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			setTimeout(() => {
				this.getHeadHeight();
			}, 500);
		},
		methods: {
			getHeadHeight() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".guide_ComHead")
					.boundingClientRect((data) => {
						that.scrollHeight = data.height + "px";
					})
					.exec();
			},
			init() {
				uni.showLoading({
					title: "加载中",
				});
				this.request2({
						url: '/api/AppletGuideCar/GetAppletGoodsPageListForZY',
						data: this.msg
					},
					res => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					}
				);
			},
			getTime(time) {
				let myDate = new Date(time);
				let obj = {}
				obj.year = myDate.getFullYear(); //年
				obj.month = myDate.getMonth() + 1; //月
				obj.day = myDate.getDate(); //日
				obj.hour = (myDate.getHours() < 10) ? "0" + myDate.getHours() : myDate.getHours(); //时
				obj.minute = (myDate.getMinutes() < 10) ? "0" + myDate.getMinutes() : myDate.getMinutes(); //分
				let days = myDate.getDay();
				obj.week = this.getweek(days) //星期几
				return obj
			},
			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 '星期日'
				}
			},
			getGuideCarBrandList() {
				this.request2({
						url: "/api/AppletGuideCar/GetGuideCarBrandList",
						data: {},
					},
					(res) => {
						this.BrandList = res.data;
						let obj = {
							Name: "全部品牌",
							ID: 0
						}
						this.BrandList.unshift(obj)
						let list = [];
						this.BrandList.forEach(x => {
							list.push(x)
						})
						this.contents2 = list
					}
				);
			},
			getCarClassList() {
				this.request2({
						url: "/api/AppletGuideCar/GetCarClassList",
						data: {},
					},
					(res) => {
						this.classList = res.data;
						let obj = {
							Name: "全部",
							Id: 0
						}
						this.classList.unshift(obj)
					}
				);
			},
			changeHandler(val) {
				this.tic = val;
				this.msg.CarClass = this.classList[val].Id;
				this.msg.pageIndex = 1;
				this.g = [];
				this.init()
			},
			change(val) {
				if (val == 0) {
					if (val == this.current && this.screenshow == true) {
						this.screenshow = false
					} else {
						this.screenshow = true
					}
					this.screenList = this.contents
				} else {
					if (val == this.current && this.screenshow == true) {
						this.screenshow = false
					} else {
						this.screenshow = true
					}
					this.screenList = this.contents2
				}
				this.current = val
			},
			onItemSelect(val) {
				console.log(val)
				if (this.current == 0) {
					this.msg.OrderBy = val.ID;
					this.list[0].name = val.Name
				} else {
					this.msg.CarBrandId = val.ID;
					this.list[1].name = val.Name
				}
				this.screenshow = false
				this.msg.pageIndex = 1;
				this.g = [];
				this.init()
			},
			getPagePath() {
				this.request2({
						url: "/api/AppletGuideCar/GetGuideCarInfoForPagePath",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.PagePath = res.data.PagePath
						}
					}
				);
			},
			goDetails(x) { //跳转商品详情
				if (this.PagePath != '') {
					uni.navigateTo({
						url: this.PagePath + '?GoodsId=' + x.id + '&address=' + this.address + '&Pickcar=' + this.Pickcar +
							'&StartTime=' + this.msg.StartTime +
							'&EndTime=' + this.msg.EndTime +
							'&RideNum=' + this.msg.RideNum

					})
				} else { //如果没有跳转地址的时候 默认
					uni.navigateTo({
						url: '/pages/guidecar/guidecarGoodsdetails?GoodsId=' + x.id + '&address=' + this.address + '&Pickcar=' + this.Pickcar +
							'&StartTime=' + this.msg.StartTime +
							'&EndTime=' + this.msg.EndTime +
							'&RideNum=' + this.msg.RideNum
					})
				}
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
		},
	};
</script>

<style>
	.guidecarList {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.guidecarList .left-slider {
		width: 85px;
		height: 100%;
		background: #f5f5f5;
	}

	.guidecarList .right-slider {
		height: 100%;
		width: 1px;
		flex: 1;
	}

	.guidecarList .g_top {
		width: 96%;
		height: 45px;
		border-radius: 22.5px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		background: #FAF8F9;
		padding: 0 20px;
		margin: 10px 2%;
	}

	.guidecarList .row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.guidecarList .topB {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.guidecarList .titext {
		font-size: 22rpx;
		color: #929292;
	}

	.guidecarList .ztext {
		font-size: 28rpx;
		color: #1C1E1F;
	}

	.guidecarList .c_list_item {
		width: 96%;
		display: flex;
		flex-direction: column;
		margin-bottom: 15px;
	}

	.guidecarList .itemb {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.c_list_item .c_t_l {
		width: 110px;
		height: 62px;
	}

	.c_list_item .c_t_r {
		display: flex;
		flex-direction: column;
		height: 62px;
		margin-left: 10px;
	}

	.c_t_r .ctr_name {
		width: 300rpx;
		font-size: 15px;
		color: #111111;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
		font-family: aa;
	}

	.guidecarList .price {
		font-size: 16px;
		color: #FF4048;
	}

	.guidecarList .line {
		width: 100%;
		height: 1px;
		margin-top: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}

	.guidecarList .Mask {
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0.3;
		position: absolute;
		left: 0;
		top: 130px;
		z-index: 999;
	}

	.guidecarList .tanchu {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFF;
		position: absolute;
		top: 41px;
		left: 0;
		z-index: 1999;
	}

	.guidecarList .tanchu_item {
		width: 94%;
		margin-left: 3%;
		height: 45px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f1f1f1;
	}

	.guidecarList .numfont {
		font-family: "oswald";
		font-weight: unset;
		font-weight: bold;
	}

	.guidecarList .guide_ComHead {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
	}
</style>