<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"></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="options1" @change="change">
				</u-dropdown-item>
				<!-- 景点类型 -->
				<u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item>
				
				<u-dropdown-item v-model="searchObj.sort" :title="optionsTitle[2]" :options="options1" @change="change">
				</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: '100%' }"
		>
		  <view class="ticket-list">
			<view v-for="(item,index) in dataList" :key="item.ID" class="ticket-list-item">
				<view class="left-box">
					<image class="ticket-img" :src="item.CoverImg" mode="aspectFit"></image>
				</view>
				<view class="right-box">
					<view class="ticket-name">
						{{item.Name}}
					</view>
					<view class="rate-box">
						<u-rate  v-model="item.ScoreNum" active-color="#FEB969"></u-rate>
						<view class="rate">
						   {{item.ScoreNum}}
						   <text v-if="item.ScoreNum.length==1">.0</text>
						</view>
					</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>
	import rangeSlider from "./components/range-slider.vue"
	import canlendar from "./components/time/index.vue"
	export default {
		data() {
			return {
				dataList:[],
				msg:{
					pageIndex:1,
					pageSize:10,
					Name:"",
					FoodTypeIds:"",
					IsFree:-1,
					IsSameDayBuy:-1,
					IsWorryFreeRefund:-1,
					OrderBy:1,
				},
				page_count:1,
				loading: false,
				status: "loadmore",
				count:0,
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
				showTimePopup:false,
				
				value1: 1,
				value2: 2,
				searchObj:{
					searchKey:"",
					sort:1,
					enclosure:-1,
					rateAndPrice:{
						price:{},
						priceText:"不限",
						rate:[]
					},
					date:{}
				},
				tempRateAndPrice:{
					price:{},
					priceText:"不限",
					rate:[]
				},
				optionsTitle: [
					"推荐排序",
					"景点类型",
					"筛选"
				],
				rates: [
					{
						label:"二星/经济",
						value:1
					},
					{
						label:"三星/舒适",
						value:2
					},
					{
						label:"四星/高档",
						value:3
					},
					{
						label:"五星/豪华",
						value:4
					}
				],
				options1: [
					{
						label: '销量最高',
						value: 1,
					},
				],
				options2: [
					{
						label: '不限',
						value: -1,
					},
					{
						label: '宝镜岩',
						value: 1,
					},
					{
						label: '盆景滩',
						value: 2,
					},
					{
						label: '芦苇海',
						value: 3,
					},
					{
						label: '五彩池',
						value: 4,
					},
					{
						label: '镜海',
						value: 5,
					},
					{
						label: '犀牛海',
						value: 6,
					},
					{
						label: '诺日朗瀑布',
						value: 7,
					},
					{
						label: '火花海',
						value: 8,
					},
				],
				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"
				}
			}
		},
		components: {
			rangeSlider,
			canlendar
		},
		created() {
			uni.setNavigationBarTitle({
				title: "门票",
			});
			this.getScenicType();// 获取景点类型
			this.getList();// 获取景点门票类型
		},
		methods: {
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				this.msg.pageIndex++;
					this.status = "loading";
				this.getList();
			  } else {
					this.status = "nomore";
			  }
			},
			chosenDateResult(obj){
				this.searchObj.date=obj
				this.showTimePopup=false
			},
			chosenDate(){
				// uni.navigateTo({
				// 	url:"/pages/hotel/components/time/index"
				// })
				this.showTimePopup=true
			},
			setHotelRate(rateId){
				let temp=this.tempRateAndPrice.rate.indexOf(rateId)
				if(temp==-1){
					this.tempRateAndPrice.rate.push(rateId)
				}else{
					this.tempRateAndPrice.rate.splice(temp,1)
				}
			},
			resetPrice(){
				this.optionsTitle[2]="价格/星级"
				this.searchObj.rateAndPrice={
					price:{
						minValue:0,
						maxValue:1000
					},
					priceText:"不限",
					rate:[]
				}
				this.closeDropdown();
			},
			surePrice(){
				let result=""
				if(this.tempRateAndPrice.rate.length>0){
					this.rates.forEach(x=>{
						if(this.tempRateAndPrice.rate.indexOf(x.value)!=-1){
							result+=x.label+","
						}
					})
				}
				if(this.tempRateAndPrice.priceText!="不限"){
					result+=this.tempRateAndPrice.priceText
				}
				result=result==""?"价格/星级":result
				console.log(result)
				this.optionsTitle[2]=result
				this.$forceUpdate() 
				this.searchObj.rateAndPrice=this.tempRateAndPrice
				this.closeDropdown();
			},
			rangechange4(e){
				if(e.minValue==0){
					if(e.maxValue==1000){
						this.tempRateAndPrice.priceText="不限"
					}else{
						this.tempRateAndPrice.priceText=`￥${e.maxValue}以下`
					}
				}else if(e.maxValue==1000){
					this.tempRateAndPrice.priceText=`￥${e.minValue}以上`
				}else{
					this.tempRateAndPrice.priceText=`￥${e.minValue} - ￥${e.maxValue}之间`
				}
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
				if(index==2){
					this.tempRateAndPrice=this.searchObj.rateAndPrice
				}
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change(index) {
				let temp = this.options1.find(x => {
					if (x.value == index) {
						return x
					} else {
						return false
					}
				})
				this.optionsTitle[0] = temp.label
			},
			change2(index){
				if(index!=-1){
					let temp = this.options2.find(x => {
						if (x.value == index) {
							return x
						} else {
							return false
						}
					})
					this.optionsTitle[1] = temp.label
				}else{
					this.optionsTitle[1] = "附近"
				}
			},
			// 获取景点类型
			getScenicType(){
				this.request2({
						url: '/api/AppletDining/GetFoodType',
						data: {
							ClassType:1
						}	
					},
					res => {
						console.log(325,res.data)
						
					}
				);
			},
			//获取景区门票列表	
			getList(){
				this.request2({
						url: '/api/AppletDining/GetTicketCouponsPage',
						data: this.msg
					},
					res => {
						this.page_count = res.data.pageCount;
						this.dataList=res.data.pageData;
						if (this.page_count == 1) {
						  this.status = "nomore";
						}
						console.log(336,res.data)
					}
				);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.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;
	}
	.ticket-list{
		padding: 0 30rpx;
		.ticket-list-item{
			height: 340rpx;
			padding: 30rpx 0;
			display: flex;
			// justify-content: space-between;
			.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;
				.ticket-img{
					width: 100%;
					height: 100%;
				}
			}
			.right-box{
				margin-left: 30rpx;
				.ticket-name{
					height: 70rpx;
					line-height: 70rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
				}
				.rate-box{
					display: flex;
					align-items: center;
					.rate{
						margin-left: 10rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>
