<template>
  <div class="guidecarList" style="height: 100%;">
	  <div class='g_top'>
		<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="../../static/images/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>
						
	  </div>
	  <view style="padding: 10px 0 0;position: relative;background: #fff;width: 100%;height: 55px;">
		  <view style=" border-bottom: 1px solid #E2E2E2;">
		  		  <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs>
		   </view>
		   <view v-if="screenshow==true" class="tanchu" >
			   <scroll-view 
			   :scroll-y="true"
			   :enable-back-to-top="true"
			    style="max-height: 283px;">
				   <view class="tanchu_item" v-for="(item, index) in screenList" :key="index" @click="onItemSelect(item)">
				   	<span>{{item.Name}}</span>
				   	<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>
	
	  <div style='display: flex;width: 100%;'>
		  <view v-if="screenshow==true" class="Mask"  @click="screenshow=false"></view>
		  <div class="left-slider">
		    <sidebar
		      :active="tic"
		      name="Name"
		      :active-color="mainColor"
		      :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 - (44px+10px+50px)) ;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">
								<span class='ctr_name'>{{x.name}}</span>
								<span style='font-size: 11px;color: #111111;'>{{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="width: 200px;background: #FAF8F9;height:43px ;">
								<image :src="x.guidephoto" mode="aspectFill" style="width: 30px;height: 30px;border-radius: 15px;"></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}}
										</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>
											<image src="../../static/images/sidao/time.png" mode="aspectFill" style="width: 9px;height: 11px;margin-left: 5px;margin-right: 3px"></image>
											<span>{{x.guidetelephone}}</span>
										</view>
									</view>
								</view>
							</view>
							<view style="display: flex;flex-direction: column;align-items: flex-end;">
								<view class="price" :style="{ color: mainColor }">￥{{x.price}}/天</view>
								<view  style=" color: #999999;font-size: 11px; ">总价￥{{x.price*msg.RideNum}}</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,
	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
	  },
	  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:'',
	  BrandList:[],//品牌列表
	  g: [],
	  page_count: 1,
	  status: "loadmore",
	  loadText: {
	    loadmore: "轻轻上拉，加载更多",
	    loading: "努力加载中",
	    nomore: "没有更多了",
	  },
    };
  },

  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
		}
	
	if(options && options.STime){
		this.STime = JSON.parse(decodeURIComponent(options.STime))
	}
	if(options && options.ETime){
		this.ETime = JSON.parse(decodeURIComponent(options.ETime))
	}
	if(options && options.intervalDay){
		this.intervalDay = options.intervalDay
	}
	if(options && options.tic){
		this.tic = options.tic
	}
	this.getCarClassList()//车辆类型
	this.init();
	this.getGuideCarBrandList()//车辆品牌
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.activeStyle = `background:${this.mainColor};`;
	uni.setNavigationBarTitle({
	  title: this.pageTitle,
	});
	
  },
  methods: {
	  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";
					 }
		  		}
		  	}
		  );
	  },
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){
	   console.log(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
	   }
	   
	   console.log(this.screenList)
	   this.current= val
   },
   onItemSelect(val){
	   if(this.current==0){
		   this.msg.OrderBy = val.ID;
	   }else{
		   this.msg.CarBrandId = val.ID
	   }
	   this.screenshow = false
	   this.msg.pageIndex=1;
	   this.g = [];
	   this.init()
	   
   },
   goDetails(x){//跳转商品详情
	   uni.navigateTo({
	   	url:'/pages/guidecar/guidecarOrderdetails?GoodsId='+x.id
	   })
   },
   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 {
  /* padding: 10px; */
  height: 100%;
  width: 1px;
  flex: 1;
}
.g_top{
	width: 92%;
	height: 45px;
	border-radius: 22.5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	background: #FAF8F9;
	padding: 0 20px;
}
.guidecarList .topB{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* align-items: center; */
	}
	.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;
		
	}
	.guidecarList .itemb{
		display: flex;flex-direction: row;align-items: center;
	}
	.c_list_item .c_t_l{
		width: 111px;
		height: 62px;
	}
	.c_list_item .c_t_r{
		display: flex;
		flex-direction: column;
		height: 62px;
		padding:5px 10px;
		justify-content: space-around;
	}
	.c_t_r .ctr_name{
		width: 300rpx;
		font-size: 15px;
		color: #111111;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
	}
	.c_t_r .price{
		font-size: 14px;
		color: #ff4544;
	}
	.guidecarList .line{
		width: 100%;
		height: 1px;
		margin-top: 10px;
		background: #E2E2E2;
	}
	.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: 55px;left: 0;z-index: 1999;
		
	}
	.guidecarList .tanchu_item{
		width: 94%;
		margin-left: 3%;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E2E2E2;
	}
</style>
