<style>
	.jz_Line {}

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

	.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;
		margin: 0 30rpx;
		border-bottom: 1px solid #f1f1f1;
		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;
	}

	.jz_Content .search-box {
		height: 88rpx;
		background: #ECF1F4;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		padding: 19rpx 30rpx;
		margin: 0 30rpx;
	}

	.jz_Content .search-box .date {
		height: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
		line-height: 50rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
	}

	.jz_Content .team-box {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.jz_Content .team-box:after {
		content: "";
		flex: auto;
	}

	.jz_Content .team-box .team {
		width: calc(50% - 30rpx);
		background: #ECF1F4;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		padding: 20rpx;
		margin-top: 30rpx;
		margin-right: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jz_Content .team-box .team.active {
		background: #111111;
		color: #FFFFFF;
	}

	.jz_Content .team-box .team .team-content {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.jz_Content .start-range-box {
		background: #ECF1F4;
		border-radius: 10rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.jz_Content .start-range-box .date-box {
		flex: 1;
		font-weight: 400;
	}

	.jz_Content .start-range-box .split-box {
		color: #bbb;
		font-size: 24rpx;
		margin: 0 20rpx
	}

	.jz_Content .start-range-box .date-box.right view {
		text-align: right;
	}

	.jz_Content .start-range-box .date-box .label {
		color: #bbb;
		font-size: 24rpx;
	}

	.jz_Content .start-range-box .date-box .chosen-date {
		color: #111;
		font-size: 28rpx;
		font-weight: 600;
	}

	.jz_Content .start-city {
		display: inline-block;
		position: relative;
	}

	.jz_Content .start-city text {
		position: relative;
		z-index: 2;
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 500;
		color: #111;
	}

	.jz_Content .start-city::after {
		background-color: #DFBE6E;
		height: 6px;
		bottom: 2px;
		left: 0;
		right: 0;
		position: absolute;
		z-index: 1;
		display: block;
		content: ' ';
	}

	.jz_Content .price {
		margin-top: 10rpx;
		font-weight: 500;
		color: #111111;
		font-size: 20rpx;
		text-align: right;
	}

	.jz_Content .price .money {
		font-size: 36rpx;
		color:#FF3166;
	}
</style>
<template>
	<div class="jz_Line">
		<view class="jz_Content">
			<view class="search-box">
				<view class="date" @click="showBranch=true">
					<u-icon name="location" color="#111" size="24"></u-icon>
					<text style="margin-left: 20rpx;">{{currentBrachName}}</text>
				</view>
				<view style="width: 1px; flex: 1;">
					<u-search placeholder="目的地名称" v-model="msg.searchKey" @search="getList(1)" input-align="left" :value="msg.searchKey" text-color="#111"
					 bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
				</view>
			</view>
			<view>
				<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
					<u-dropdown-item v-model="msg.orderBy" :title="optionsTitle[0]" :options="orderBys" @change="changeOrderBy">
					</u-dropdown-item>
					<u-dropdown-item :title="optionsTitle[1]">
						<view class="slot-content" style="padding: 30rpx;padding-top:0;background-color: #FFF;">
							<scroll-view scroll-y="true" style="max-height: 50vh;">
								<template v-for="(x,i) in lineList">
									<view style="padding-top:30rpx">
										<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">{{x.DestinationName}}</text>
									</view>
									<view class="team-box">
										<view v-for="(y,yi) in x.Teams" :key="i" class="team" :class="{'active':msg.team.indexOf(y.TeamId)!=-1}"
										 @click="setTeams(i,yi)">
											<view class="team-content">{{y.TeamName}}</view>
										</view>
									</view>
								</template>
							</scroll-view>
							<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
								<view style="flex:1;margin-right: 30rpx;">
									<u-button :custom-style="btnStyle" @click="clearTeams">清除</u-button>
								</view>
								<view style="flex:1;">
									<u-button :custom-style="btnStyle2" @click="changeTeams">完成</u-button>
								</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item :title="optionsTitle[2]">
						<view class="slot-content" style="padding: 30rpx;padding-top:0;background-color: #FFF;">
							<scroll-view scroll-y="true" style="max-height: 50vh;">
								<view style="padding-top:30rpx">
									<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">行程天数</text>
								</view>
								<view class="team-box">
									<view v-for="x in days" class="team" style="width:calc(25% - 30rpx);" :class="{'active':msg.days.indexOf(x.day)!=-1}"
									 @click="setDays(x.day)">{{x.name}}</view>
								</view>
								<view style="padding-top:30rpx">
									<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">出发日期</text>
								</view>
								<view class="start-range-box" @click="showTimePopup=true">
									<view class="date-box">
										<view class="label">最早出发日期</view>
										<view class="date" style="font-weight: 400;" v-if="msg.startDate==''">选择日期</view>
										<view class="date" v-else>{{msg.startDate}}</view>
									</view>
									<view class="split-box">-至-</view>
									<view class="date-box right">
										<view class="label">最晚出发日期</view>
										<view class="date" style="font-weight: 400;" v-if="msg.endDate==''">选择日期</view>
										<view class="date" v-else>{{msg.endDate}}</view>
									</view>
								</view>
							</scroll-view>

							<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
								<view style="flex:1;margin-right: 30rpx;">
									<u-button :custom-style="btnStyle" @click="clearDayAndDate">清除</u-button>
								</view>
								<view style="flex:1;">
									<u-button :custom-style="btnStyle2" @click="changeDayAndDate">完成</u-button>
								</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item v-model="msg.startCityId" :title="optionsTitle[3]" :options="startCitys" @change="changeStartCity">
					</u-dropdown-item>
				</u-dropdown>
			</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>
								<view class="jz_Right">
									<view class="jz_LineName">{{item.title}}</view>
									<view class="jz_Recommend">
										{{item.productRecommend}}
									</view>
									<view style="margin:10px 0;display: flex;align-items: center;">
										<view class="start-city" style="margin-right: 20rpx;" v-if="item.startCityName">
											<text>{{item.startCityName}}出发</text>
										</view>
										<view>
											<u-tag mode="plain" border-color="#DFBE6E" color="#DFBE6E" :text="`${item.dayNum}天`" size="mini"></u-tag>
										</view>
									</view>
									<view class="price" style="display:flex;justify-content: space-between;align-items: center;">
										<view style="font-size:24rpx;color:#999999;">
											最近团期：{{item.startDate}}
										</view>
										<view>
											<text>￥</text>
											<text class="money">{{item.b2CPrice}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</template>
		</view>
		<u-picker mode="time" v-model="isShowDate" @confirm='getStratDate' :params="params"></u-picker>
		<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
			<canlendar @finish="chosenDateResult"></canlendar>
		</u-popup>
		<u-picker mode="selector" v-model="showBranch" :default-selector="[0]" :range="branchList" @confirm='changeBranch'
		 range-key="BName"></u-picker>
	</div>
</template>
<script>
	import canlendar from "./components/time/index.vue"
	export default {
		components: {
			canlendar
		},
		data() {
			return {
				pageTitle: '线路',
				showTimePopup: false,
				msg: {
					pageIndex: 1,
					pageSize: 15,
					orderBy: "",
					team: [],
					days: ['<100'],
					startDate: '',
					endDate: '',
					startCityId: -1,
					companyId: 0,
					searchKey: '', //搜索数据
					priceOrderByField:2,
					PlaceIds: ''
				},
				time: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				btnStyle: {
					borderRadius: '16rpx',
					color: '#111',
					fontSize: '30rpx',
					width: '100%',
					border: "1px solid #111",
					background: "#FFF"
				},
				btnStyle2: {
					borderRadius: '16rpx',
					color: '#fff',
					fontSize: '30rpx',
					width: '100%',
					background: "#111"
				},
				dataList: [], //数据

				value1: 1,
				isShowDate: false,
				orderBys: [],
				lineList: [],
				days: [{
						name: "不限",
						day: '<100'
					},
					{
						name: "2日以下",
						day: '<=2'
					},
					{
						name: "3日",
						day: '=3'
					},
					{
						name: "4日",
						day: '=4'
					},
					{
						name: "5日",
						day: '=5'
					},
					{
						name: "6日",
						day: '=6'
					},
					{
						name: "7日",
						day: '=7'
					},
					{
						name: "8日以上",
						day: '>=8'
					}

				],
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				startCitys: [],
				screenshow: false,
				status: "加载中",
				page_count: 0,
				branchList: [],
				currentBrachName: "",
				showBranch: false,
				optionsTitle: [
					"推荐排序",
					"线路玩法",
					"天数日期",
					"出发城市"
				],
				CityId:0
			};
		},
		created() {
			this.getLineQuery();
			uni.setNavigationBarTitle({
				title: "精品旅游线路"
			})
		},
		onLoad(option) {
		  if(option&&option.LineTeamIds){			  
			// this.msg.LineTeamIds = option.LineTeamIds
			let NewArr=[];
			NewArr = option.LineTeamIds.split(",");
			if(NewArr.length>0){
				NewArr.forEach(x=>{
					this.msg.team.push(parseInt(x));
				})
			}
		  }
		  if(option&&option.PlaceIds){
		    this.msg.PlaceIds = option.PlaceIds
		  }
		  this.research();
		},
		methods: {
			//获取查询条件
			getLineQuery() {
				this.apipost(
					"b2b_get_GetMiniAppTravelQuery", {},
					res => {
						if (res.resultCode == 1) {
							this.orderBys = res.data.OrderByList;
							this.branchList = res.data.SiteList;
							this.startCitys = res.data.CityList;
							this.lineList = res.data.linePlaceList;
							this.msg.companyId = this.branchList[0].BId;
							this.currentBrachName = this.branchList[0].BName;
							this.CityId = this.branchList[0].CityId;
							
							let temp = ''
							if(this.msg.team.length>0){
								if(this.lineList.length>0){
									this.lineList.forEach(x => {
										x.Teams.forEach(y => {
											if (this.msg.team.indexOf(y.TeamId) != -1) {
												temp += y.TeamName + ","
											}
										})
									})
									this.optionsTitle[1] = temp==''?'线路玩法':temp;
								}
							}
						}
					},
					null
				);
			},
			changeBranch(val) {
				this.msg.companyId = this.branchList[val].BId
				this.currentBrachName = this.branchList[val].BName
				this.CityId = this.branchList[val].CityId;
				this.research();
			},
			setDays(day) {
				if (day == '<100') {
					this.msg.days = ['<100']
				} else {
					if (this.msg.days.indexOf('<100') != -1) {
						this.msg.days.splice(this.msg.days.indexOf('<100'), 1)
					}
					let temp = this.msg.days.indexOf(day)
					if (temp == -1) {
						this.msg.days.push(day)
					} else {
						this.msg.days.splice(temp, 1)
					}
				}
			},
			clearDayAndDate() {
				this.msg.days = ['<100']
				this.optionsTitle[2] = '天数日期'
				this.msg.startDate = ''
				this.msg.endDate = ''
				this.$forceUpdate()
				this.$refs.uDropdown.close();
				this.research();
			},
			changeDayAndDate() {
				let temp = ''
				if (this.msg.days.indexOf("<100") == -1) {
					this.msg.days.forEach(x => {
						this.days.forEach(y => {
							if (y.day == x) {
								temp += y.name + ","
							}
						})
					})
				}
				if (this.msg.startDate != '') {
					temp += "最早:" + this.msg.startDate + ","
				}
				if (this.msg.endDate != '') {
					temp += "最早:" + this.msg.endDate + ","
				}
				this.optionsTitle[2] = temp == '' ? '天数日期' : temp
				this.$forceUpdate()
				this.$refs.uDropdown.close();
				this.research();
			},
			chosenDateResult(obj) {
				this.msg.startDate = obj.start;
				this.msg.endDate = obj.end;
				this.showTimePopup = false
			},
			clearTeams() {
				this.msg.team = []
				this.optionsTitle[1] = '线路玩法'
				this.$forceUpdate()
				this.$refs.uDropdown.close();
				this.research();
			},
			changeTeams() {
				if (this.msg.team.length == 0) {
					this.optionsTitle[1] = '线路玩法'
				} else {
					let temp = ''
					this.lineList.forEach(x => {
						x.Teams.forEach(y => {
							if (this.msg.team.indexOf(y.TeamId) != -1) {
								temp += y.TeamName + ","
							}
						})
					})
					this.optionsTitle[1] = temp
				}
				if(this.optionsTitle[1]==''){
					this.optionsTitle[1] = '线路玩法'
				}
				this.$forceUpdate()
				this.$refs.uDropdown.close();
				this.research();
			},
			setTeams(x, y) {
				let id = this.lineList[x].Teams[y].TeamId
				let temp = this.msg.team.indexOf(id)
				if (temp == -1) {
					this.msg.team.push(id)
				} else {
					this.msg.team.splice(temp, 1)
				}
				this.$forceUpdate();
			},
			changeOrderBy(index) {
				let temp = this.orderBys.find(x => {
					if (x.value == index) {
						return x
					} else {
						return false
					}
				})
				this.optionsTitle[0] = temp.label
				this.msg.orderBy = temp.value
				this.$forceUpdate()
				this.research();
			},
			changeStartCity(index) {
				if (index == -1) {
					this.optionsTitle[3] = "出发城市"
					this.msg.startCity = -1
				} else {
					let temp = this.startCitys.find(x => {
						if (x.value == index) {
							return x
						} else {
							return false
						}
					})
					this.optionsTitle[3] = temp.label + "出发"
					this.msg.startCity = temp.value
				}
				this.$forceUpdate()
				this.research();
			},
			open(index) {
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				this.$refs.uDropdown.highlight(index);
			},
			research() {
				this.msg.pageIndex = 1;
				this.dataList = [];
				this.getList();
			},
			//获取数据
			getList(type) {
				if(type==1){
					this.dataList=[];
					this.msg.pageIndex=1;
				}
				uni.showLoading({
					title:'加载中',
					icon:'none'
				})
				this.apipost(
					"b2b_get_GetB2BTravelPageList",
					this.msg,
					res => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.dataList = this.dataList.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
						}
					},
					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 + '&cityId=' + this.CityId
				});
			},
			//获取第一张图
			getImgs(imgObj) {
				let imgArr = JSON.parse(imgObj);
				if (imgArr && imgArr.length > 0) {
					return imgArr[0].Url
				}
			}
		},
	};
</script>
