<template>
	<view class="hotel-list">
		<view class="search-box">
			<view style="width: 1px; flex: 1;">
				<u-search placeholder="目的地/景点/主题" v-model="msg.Name" input-align="left" :value="searchObj.searchKey"
					text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false" @search="searchList" @clear="searchList"></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="orderOptions" @change="getList" style="justify-content: center;">
				</u-dropdown-item>
				<!-- 景点类型 -->
				<u-dropdown-item  :title="optionsTitle[1]" v-model="msg.FoodTypeIds" :options="classOptions" @change="getList">
					
						<!-- <Cascade :dataList="typeList"></Cascade> -->
					
				</u-dropdown-item>
				<!-- 筛选 -->
				<u-dropdown-item  :title="optionsTitle[2]" >
				<view class="slot-content">
				     <!-- <view class="u-text-center u-content-color">其他自定义内容</view>-->
					 <view class="slot-btn" :class="{'check-btn':msg.IsFree!=-1}" @click="changeScreen('IsFree')">是否免费</view>
					 <view class="slot-btn" :class="{'check-btn':msg.IsSameDayBuy!=-1}" @click="changeScreen('IsSameDayBuy')">是否闪入园</view>
					 <view class="slot-btn" :class="{'check-btn':msg.IsWorryFreeRefund!=-1}" @click="changeScreen('IsWorryFreeRefund')">是否无忧退款</view>
					 <view style="flex:1;margin-right: 30rpx;">
					 	<u-button :custom-style="btnStyle" @click="resetPrice">重置</u-button>
					 </view>
					 <view style="flex:1;">
					 	<u-button :custom-style="btnStyle2" @click="surePrice">完成</u-button>
					 </view>
				</view> 
					 
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="95%" :safe-area-inset-bottom="true">
			<canlendar @finish="chosenDateResult"></canlendar>
		</u-popup>
		<scroll-view
		  :scroll-y="true"
		  :enable-back-to-top="true"
		  :enable-flex="true"
		  @scrolltolower="lower"
		  style="height: calc(100% - 224rpx); padding-bottom: 0px;"
		>
		  <view class="ticket-list">
			<view v-for="(item,index) in dataList" :key="item.ID" class="ticket-list-item" @click="goDetail(item.ID)">
				
				<image class="left-box" :src="item.CoverImg" mode="aspectFit"></image>
				
				<view class="right-box">
					<view class="ticket-name">
						{{item.Name}}
					</view>
					<view class="rate-box">
						<u-rate   inactive-color="#FFF" :current="item.ScoreNum" active-icon="star" disabled active-color="#FEB969"></u-rate>
						<view class="rate">
						   {{item.ScoreNum}}
						   <text v-if="item.ScoreNum===1||item.ScoreNum===2||item.ScoreNum===3||item.ScoreNum===4||item.ScoreNum===5">.0</text>
						</view>
					</view>
					<view class="address">
						{{item.Address}}
					</view>
					<view class="tag-box">
						<view v-for="(_item,_index) in item.ScenicSpotTag" :key="_index">
							<u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini" class="tag" v-if="_item"></u-tag>
						</view>
						<view v-for="(_item,_index) in item.GeographicTag" :key="_index">
							<u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini" class="tag" v-if="_item"></u-tag>
						</view>
					</view>
					<view class="SalesPrice">
						<text class="SalesPrice-pre">￥</text>{{$utils.getretailer()==true? item.B2BPrice:item.B2CPrice}}<text class="SalesPrice-nex">起</text>
					</view>
				</view>
			</view>
		  </view>
		<u-loadmore
		   :status="status"
		   :load-text="loadText"
		   :font-size="24"
		   :margin-top="20"
		   :margin-bottom="20"
		   bg-color="#FFF"
		 />
		</scroll-view>
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
		  <u-loading mode="flower" size="48"></u-loading>
		  <Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
		</view>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				dataList:[],//列表数据
				typeList:[],//景点类型列表
				msg:{
					pageIndex:1,
					pageSize:10,
					Name:"",
					FoodTypeIds:0,
					IsFree:-1,
					IsSameDayBuy:-1,
					IsWorryFreeRefund:-1,
					OrderBy:1,
				},
				page_count:1,
				loading: false,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
				showTimePopup:false,
				optionsTitle: [
					"推荐排序",
					"景点类型",
					"筛选"
				],
				orderOptions: [
					{
						label: '销量最高',
						value: 1,
					},
				],
				classOptions:[],
				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"
				}
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "门票",
			});
			this.getScenicType();// 获取景点类型
			this.getList();// 获取景点门票类型
		},
		methods: {
			searchList(){
				this.msg.pageIndex=1
				this.getList()
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				    this.msg.pageIndex++;
					this.status = "loading";
					this.getList();
			  } else {
					this.status = "nomore";
			  }
			},
			goDetail(id){
				uni.navigateTo({
					url: "/pages/ticketCoupons/detail?id="+id,
				});
			},
			chosenDateResult(obj){
				this.searchObj.date=obj
				this.showTimePopup=false
			},
			chosenDate(){
				this.showTimePopup=true
			},
			//筛选重置
			resetPrice(){
				this.msg.IsFree=-1;
				this.msg.IsSameDayBuy=-1;
				this.msg.IsWorryFreeRefund=-1;
				this.$refs.uDropdown.close();
				this.getList()
			},
			//筛选
			surePrice(){
				this.$refs.uDropdown.close();
				this.getList()
			},
			
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			
			// 获取景点类型
			getScenicType(){
				this.request2({
						url: '/api/AppletDining/GetFoodType',
						data: {
							ClassType:1
						}	
					},
					res => {
						if(res.resultCode===1){
							// this.typeList=res.data
							this.classOptions=[{
								label: "不限",
								value: 0,
							}]
							res.data.map(i=>{
								let obj={
									label: i.Name,
									value: i.ID,
								}
								this.classOptions.push(obj)
							})
						}
						
					}
				);
			},
			//获取景区门票列表	
			getList(){
				this.request2({
						url: '/api/AppletDining/GetTicketCouponsPage',
						data: this.msg
					},
					res => {
						if(res.resultCode===1){	
							this.page_count = res.data.pageCount;
							res.data.pageData.forEach(item=>{
								item.ScenicSpotTag=item.ScenicSpotTag.split(',')
								item.GeographicTag=item.GeographicTag.split(',')
							})
							if(this.msg.pageIndex==1){
								this.dataList=res.data.pageData;
							}else if(this.msg.pageIndex>1){
								this.dataList=[...this.dataList,...res.data.pageData];
							}
							
							if (this.page_count == 1) {
							  this.status = "nomore";
							}
						}
						
					}
				);
			},
			changeScreen(field){
				if(this.msg[field]===-1){
					this.msg[field]=1
				}else{
					this.msg[field]=-1
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-flex{
		justify-content: center;
	}
		
	.hotel-list {
		height: 100vh;
	}

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

	.hotel-list .search-box .date {
		width: 104rpx;
		height: 50rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		line-height: 29rpx;
	}

	.hotel-list .search-box .days {
		height: 40rpx;
		padding: 8rpx 30rpx 8rpx 19rpx;
		color: #DFBE6E;
		border-right: 1px solid #E2E2E2;
		font-size: 24rpx;
	}
	.hotel-rate-box{
		display: flex;
		align-items: center;
	}
	.hotel-rate{
		width: 160rpx;
		height: 60rpx;
		background: #ECF1F4;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #999999;
		line-height: 60rpx;
		margin-right: 15rpx;
		text-align: center;
	}
	.hotel-rate:last-child{
		margin-right: 0;
	}
	.hotel-rate.active{
		background: #111111;
		color: #FFFFFF;
	}
	.slot-content{
		// height: 200rpx;
		background-color: #ffffff;
		padding:  30rpx;
		border-top: 1px solid #c0c4cc;
		display: flex;
		flex-wrap: wrap;
		.slot-btn{
			height: 46rpx;
			padding: 0 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 44rpx;
			color: #333333;
			border: 1px solid #333333;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 23rpx;
		}
		.check-btn{
			background-color: #333333 !important;
			color: #ffffff !important;
		}
	}
	.ticket-list{
		padding: 0 30rpx;
		box-sizing: border-box;
		.ticket-list-item{
			min-height: 340rpx;
			padding: 30rpx 0;
			display: flex;
			// justify-content: space-between;
			border-bottom: 1px solid #E2E2E2;
			position: relative;
			.left-box{
				width: 220rpx;
				height: 280rpx;
				// background-color: #CFCFCF;
				box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
				border-radius: 20rpx;
				overflow: hidden;
				
			}
			.right-box{
				margin-left: 30rpx;
				width: 440rpx;
				.ticket-name{
					height: 70rpx;
					line-height: 68rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// display: flex;
					// align-items: center;
					// justify-content: center;
				}
				.rate-box{
					height: 40rpx;
					display: flex;
					align-items: center;
					.rate{
						margin-left: 10rpx;
						color: #999999;
						line-height: 40rpx;
					}
				}
				.address{
					// height: 100rpx;
					padding: 20rpx 30rpx 20rpx 0;
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #999999;
					line-height: 32rpx;
				}
				.tag-box{
					display: flex;
					flex-wrap: wrap;
					.tag{
						margin-right: 10rpx;
					}
				}
				.SalesPrice{
					position: absolute;
					right: 0;
					bottom: 30rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF3166;
					font-size: 36rpx;
					line-height: 32rpx;
					margin-top: 10rpx;
					text-align: right;
					.SalesPrice-pre,.SalesPrice-nex{
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>
