<style>
	.jz_Line {}

	.jz_Content {
		margin: 30rpx 30rpx 0 30rpx;
	}

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

	.jz_TuDiv {
		width: 220rpx;
		height: 280rpx;
		border-radius: 12px;
		overflow: hidden;
		position: relative;
	}

	.jz_TuDiv .jz_TuBigImg {
		width: 100%;
		height: 100%
	}

	.jz_Right {
		width: 432rpx;
		margin-top: 5px;
		font-size: 14px;
		position: relative;
	}

	.jz_LineName {
		color: #111111;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: 600;
	}

	.jz_Canhoubu {
		color: #FF3166;
		margin-left: 10px;
	}

	.jz_redType {
		color: #FF3166;
	}

	.jz_TuDivBotm {
		position: absolute;
		width: 100%;
		height: 18px;
		text-align: center;
		bottom: 0;
		color: #fff;
		font-size: 12px;
		line-height: 18px;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.op_remark {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.jz_ListMain {
		padding-bottom: 10px;
		border-bottom: 1px solid #E2E2E2;
		margin-bottom: 10px;
	}

	.jz_TuDivBotm img {
		width: 12px;
		height: 12px;
		margin-right: 5px;
	}

	.jz_calederImg {
		width: 16px;
		height: 16px;
		position: relative;
		top: 2px;
		margin-right: 5px;
	}

	.jz_Sort {
		width: 100%;
		margin: 20px 0;
	}

	.jz_SortItem {
		display: inline-block;
		width: 25%;
		text-align: center;
	}

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

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

	.Jz_Mask {
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0.3;
		position: absolute;
		left: 0;
		top: 130px;
		z-index: 999;
	}
	.jz_Recommend{
		color:#999999;
		font-size:24rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-top:10px;
		line-height: 20px;
	}
</style>
<template>
	<div class="jz_Line" >
		<view class="jz_Content">
			<u-search placeholder="目的地,旅游线路" shape="round" v-model="searchKey" input-align="left" :value="searchKey" text-color="#111"
			 :show-action="false"></u-search>
			<view class="jz_Sort">
				<view class="jz_SortItem">价格</view>
				<view class="jz_SortItem">团期</view>
				<view class="jz_SortItem" @click="screenshow=true">线路</view>
				<view class="jz_SortItem" @click="isShowDate=true">日期</view>
			</view>
			<view v-if="screenshow==true" class="Jz_tanchu">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" style="max-height: 321px;">
					<view class="Jz_tanchu_item" v-for="(item, index) in lineList" :key="index" @click="onItemSelect(item)">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<span>{{item.label}}</span>
						</view>
						<u-icon name="success" :color="mainColor" size="30"></u-icon>
					</view>
				</scroll-view>
			</view>
			<view v-if="screenshow==true" class="Jz_Mask" @click="screenshow=false"></view>
			<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
			<template v-else>
				<view style="height: calc(100vh - 120px);overflow: hidden;">
					<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
						<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index" @click="goJzDetail(item.tcid,item.configId)">
							<view class="jz_List">
								<view class="jz_TuDiv">
									<img class="jz_TuBigImg" mode="aspectFill" :src="getImgs(item.imgCover)" alt="" />
									<view class="jz_TuDivBotm">
										<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/address.png" />成都出发
										{{item.dayNum}} 天
									</view>
								</view>
								<view class="jz_Right">
									<view class="jz_LineName">{{item.title}}</view>
									<view class="jz_Recommend">
										{{item.productRecommend}}
									</view>
									<view style="margin:10px 0">
										<img class="jz_calederImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}
										<text class="jz_Canhoubu">
											{{item.isSubstitution==0?'不可候补':'可以候补'}}
										</text>
									</view>
									<view style="margin-bottom:10px">余位：{{item.surplus}}</view>
									<view style="color:#FF3166;position: absolute;right:0;bottom:0">
										<text style="font-size:20rpx;">¥</text>
										<text style="font-size:40rpx;">{{item.b2BPrice}}</text>
										<text style="font-size:20rpx;">起</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</template>
		</view>
		<u-picker mode="time" v-model="isShowDate" @confirm='getStratDate' :params="params"></u-picker>
	</div>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: '线路',
				msg: {
					pageIndex: 1,
					pageSize: 15
				},
				time: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				dataList: [], //数据
				searchKey: '', //搜索数据
				value1: 1,
				isShowDate: false,
				lineList: [{
						label: '出境日本线',
						value: 1,
					},
					{
						label: '国内线',
						value: 2,
					}
				],
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				screenshow: false,
				status: "加载中",
				page_count:0
			};
		},
		created() {
			this.getList();
		},
		methods: {
			//获取数据
			getList() {
				this.apipost(
					"b2b_get_GetB2BTravelPageList",
					this.msg,
					res => {
						if (res.resultCode == 1) {
							this.dataList = this.dataList.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
						} else {

						}
					},
					null
				);
			},
			//获取日期
			getStratDate(val) {
				console.log(val, 'val');
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				this.msg.pageIndex++;
				this.status = "loading";
				this.getList();
			  } else {
				this.status = "nomore";
			  }
			},
			//跳转至详情
			goJzDetail(tcid,configId){
				uni.navigateTo({
					url: "/pages/jiuzhai/jz_LineDetail?tcid=" + tcid +'&configId='+configId
				});
			},
			//获取第一张图
			getImgs(imgObj){
				let imgArr = JSON.parse(imgObj);
				if(imgArr&&imgArr.length>0){
					return imgArr[0].Url
				}
			}
		},
	};
</script>
