<template>
	<view class="v-pages v-pages-bg">
		<!-- 搜索 -->
		<view class="v-pages-search">
			<view class="search_box row flex-align-center">
				<view class="col">
					<input @input="write" type="text" class="input" @confirm="confirm" confirm-type="search"
						color="#A0A7B2" placeholder-style="color:#999" placeholder="请输入酒店名称搜索" />
				</view>
				<view class="btn_img" @click="search()">
					<image src="/subPageB/static/img/icon-search.png" class="img"></image>
				</view>
			</view>
			<!-- 排序筛选 -->
			<view class="search-container m-t-12">
				<view class="row">
					<view @tap="changePanel" :class="[searchItemClass, selectedParam.hiddenSortPanel ? 'active' : '']"
						data-type="hiddenSortPanel">智能排序</view>
					<view @tap="changePanel"
						:class="[searchItemClass, selectedParam.hiddenAttributePanel ? 'active' : '']"
						data-type="hiddenAttributePanel">
						分类筛选
					</view>
				</view>
			</view>
		</view>

		<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
			<view class="v-pages-list bgfff" style="margin-top: 160rpx;">
				<navigator hover-class="none"
					:url="'/subPageB/hotel/hoteldetail/hoteldetail?id=' + itemName.id + '&region=' + itemName.region"
					v-for="(itemName, index) in listDatas" :key="index">
					<view class="list_item row">
						<view class="item_recommend hotel" v-if="itemName.isrecommend == 'YES'">
							<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/hotel_top_01.png"
								mode="widthFix">
							</image>
						</view>
						<view class="item_image hotel">
							<image class="img" :src="itemName.hlogo" mode="aspectFill"></image>
						</view>
						<view class="item_content">
							<view class="content-name">{{ itemName.hname }}</view>
							<view class="content-level hotel">{{ itemName.hlevel }} </view>
							<view class="content-tip"><text class="item">免费停车</text><text class="item">机器人服务</text>
							</view>
							<view class="content-address m-t-12"> 距您约{{ itemName.distance }}</view>
						</view>
					</view>
				</navigator>
			</view>
		</mescroll-uni>

		<view class="sort-page" :hidden="selectedParam.hiddenSortPanel">
			<view class="sort-group">
				<view @tap="selected"
					:class="[pageClass.sortItemClass, selectedParam.sortId == item.id ? 'sort-item-active' : '']"
					data-panel="hiddenSortPanel" data-type="sortId" :data-id="item.id"
					v-for="(item, index) in filter.sort" :key="index">
					{{ item.name }}
				</view>
			</view>
		</view>

		<view class="sort-page" :hidden="selectedParam.hiddenRegionPanel">
			<view class="sort-group">
				<view @tap="regionSelected"
					:class="[pageClass.sortItemClass, selectedParam.bm == item.bm ? 'sort-item-active' : '']"
					data-panel="hiddenRegionPanel" :data-name="item.title" data-type="bm" :data-id="item.bm"
					v-for="(item, index) in regionList" :key="index">
					{{ item.title }}
				</view>
			</view>
		</view>

		<view class="filter-page" :hidden="selectedParam.hiddenAttributePanel">
			<view class="filter-box">
				<scroll-view scrollY class="filter-hd">
					<view @tap="parentLevel"
						:class="[pageClass.filterHdItemClass, parentLevelItem == 'attribute_' + items.type ? 'filter-hd-item-active' : '']"
						:data-parentLevelItem="'attribute_' + items.type" v-for="(items, index) in filter.attribute"
						:key="index">
						{{ items.name }}
					</view>
				</scroll-view>
				<scroll-view scrollY class="filter-bd">
					<view class="filter-group" v-if="parentLevelItem == 'attribute_' + items.type"
						v-for="(items, index) in filter.attribute" :key="items.dicnum">
						<view @tap="childLevel"
							:class="[pageClass.filterBdItem, selectedFIlter['attribute_' + items.type] == 0 ? 'filter-bd-item-active' : '']"
							data-id="0" :data-type="'attribute_' + items.type">
							全部
						</view>
						<view @tap="childLevel"
							:class="[pageClass.filterBdItem, selectedFIlter['attribute_' + items.type] == item.dicnum ? 'filter-bd-item-active' : '']"
							:data-id="item.dicnum" :data-type="'attribute_' + items.type"
							v-for="(item, childIndex) in items.child" :key="childIndex">
							{{ item.dicname }}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="control-bar-block">
				<view @tap="resetFilter" class="control-back-btn">恢复默认</view>
				<view @tap="confirmClick" class="control-confirm-btn">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import uniSection from '@/components/uni-section/uni-section.vue';
	import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
	// 自定义的mescroll-xinlang.vue
	import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
	var that;
	export default {
		components: {
			uniIcons,
			uniNavBar,
			uniSection,
			uniStatusBar,
			MescrollUni
		},
		data() {
			that = this;
			return {
				searchItemClass: 'search-tip-item',
				pageClass: {
					sortItemClass: 'sort-item',
					filterHdItemClass: 'filter-hd-item',
					filterBdItem: 'filter-bd-item'
				},
				priceSymbol: '',
				destinationBak: 'all',
				destination: 'all',
				filter: [],
				parentLevelItem: 'attribute_htype',
				defaultFilter: {
					attribute_htype: 0
				},
				latitude: 0,
				longitude: 0,
				selectedFIlterBak: {
					price: 0
				},
				selectedFIlter: {
					attribute_htype: 0
				},
				selectedParam: {
					sortId: 5,
					bm: '',
					hiddenSortPanel: !0,
					hiddenAttributePanel: !0,
					hiddenRegionPanel: !0
				},
				param: {
					page: 1,
					noData: !1,
					loading: !1,
					finished: !1
				},
				listDatas: [],
				topNum: 0,
				rootPaht: this.$config.ROOTPATH,
				regionname: '区域',
				regionList: [],
				searchTitle: '',
				downOption: {
					auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				upOption: {
					auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				top: 0,

				mescroll: '',
				data: false,
				netType: true
			};
		},
		onLoad(option) {
			var that = this;
			this.$util.getNetworkType(
				function(res) {
					if (res.networkType === 'none') {
						uni.showToast({
							title: that.$param.netMsg,
							icon: "none",
							duration: 2000
						})
						that.netType = false;
					}
				},
				function() {
					uni.showToast({
						title: that.$param.netMsg,
						icon: "none",
						duration: 2000
					})
					that.netType = false;
				}
			)
			if (!that.netType) {
				return;
			}
			this.$util.hideLoadingByTime();
			uni.showLoading({
				title: '加载中',
				mask: true
			});

			var region = option.region;
			if (region != null && region != '') {
				this.selectedParam.bm = region;
			}
			this.get_attribute();
			this.getRedisRegion();
			this.initData();
			//this.get_data(null);
			// this.requestLocation();
			that.$util.saveOperatorLog(that, 'FUN', '酒店');
		},
		onShow() {
			this.$util.getLocation(
				function(res) {
					console.log(res, '坐标')
					that.$param.clat = res.latitude;
					that.$param.clng = res.longitude;
					that.destinationBak != that.destination && (that.initData(), that.get_data());
				})

		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
        this.mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				var that = this;
				if (that.param.page == 1) {
					that.mescroll = mescroll;
					that.get_data(mescroll);
					//that.requestLocation();
				} else {
					that.get_data(mescroll);
				}
			},
			write: function(e) {
				this.searchTitle = e.detail.value;
			},
			search: function() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.initData();
				this.get_data();
			},
			//
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			showMenu() {
				uni.showToast({
					title: '菜单'
				});
			},
			clickLeft() {
				uni.showToast({
					title: '左侧按钮'
				});
			},
			showCity() {
				uni.showToast({
					title: '选择城市'
				});
			},
			scan() {
				uni.showToast({
					title: '扫码'
				});
			},
			confirm(e) {
				this.searchTitle = e.detail.value;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.initData();
				this.get_data();
			},

			//

			callGpsSuccess: function(lat, lng) {
				that.$param.clat = lat;
				that.$param.clng = lng;
				that.latitude = lat;
				that.longitude = lng;
				that.get_data();
				uni.hideLoading();
				that.$util.unbindGpsObj();
			},
			callGpsFail: function() {
				that.latitude = this.$param.lat;
				that.longitude = this.$param.lng;
				that.get_data();
				uni.hideLoading();
				this.$util.unbindGpsObj();
			},
			requestLocation: function(region) {
				console.log('---requestLocation---');
				this.$util.getLocation(
					function(res) {
						if (that.$wechat.isWechat()) {
							that.$param.clat = res.latitude;
							that.$param.clng = res.longitude;
							that.getData();
							that.get_attribute(), that.initData(), that.get_data();
						} else {
							that.get_attribute(), that.initData(), that.get_data();
						}
						uni.hideLoading();
					},
					function() {
						console.log('location error---');
					}
				);
			},
			initData: function() {
				var param = {};
				param.page = 1;
				param.noData = false;
				param.finished = false;
				this.data = false;
				this.param = param;
				this.listDatas = [];
				this.destinationBak = this.destination;
			},
			selected: function(event) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.initData();
				var dataset = event.currentTarget.dataset;
				var param = this.selectedParam;

				param[dataset.type] = dataset.id;
				param.hiddenSortPanel = !0;
				//console.log(dataset.id);
				this.selectedParam = param;
				this.get_data();
			},
			regionSelected: function(event) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.initData();
				var dataset = event.currentTarget.dataset;
				var param = this.selectedParam;
				param[dataset.type] = dataset.id;
				param.hiddenRegionPanel = !0;
				// console.log(dataset.id);
				this.selectedParam = param;
				this.regionname = dataset.name;
				this.get_data();
			},
			getRedisRegion: function() {
				var that = this;
				var data = {
					key: that.$param.userkey + '_mdd_list'
				};
				that.$Request.post(that.$config.getRedisData, data).then(res => {
					if (res.status == 200) {
						that.regionList = res.data.mddList;
						var all = {
							bm: '',
							title: '全部'
						};
						that.regionList.unshift(all);
						for (var i = 0; i < that.regionList.length; i++) {
							if (that.regionList[i].bm == that.selectedParam.bm) {
								that.regionname = that.regionList[i].title;
							}
						}
					} else {
						that.getRegion();
					}
				});
			},
			changePanel: function(event) {
				var dataSet = event.currentTarget.dataset,
					selectedParam = this.selectedParam;
				'hiddenSortPanel' == dataSet.type ? (selectedParam.hiddenAttributePanel = !0, selectedParam
						.hiddenRegionPanel = !0) : (selectedParam.hiddenSortPanel = !0),
					(selectedParam[dataSet.type] = !selectedParam[dataSet.type]),
					(this.selectedParam = selectedParam);
			},
			changeRegionPanel: function(event) {
				var dataSet = event.currentTarget.dataset,
					selectedParam = this.selectedParam;
				if ('hiddenRegionPanel' == dataSet.type) {
					selectedParam.hiddenAttributePanel = !0;
					selectedParam.hiddenSortPanel = !0;
				} else {
					selectedParam.hiddenRegionPanel = !0;
				}
				(selectedParam[dataSet.type] = !selectedParam[dataSet.type]), (this.selectedParam = selectedParam);
			},

			resetFilter: function() {
				this.selectedFIlter = {
					attribute_htype: 0
				}
			},
			confirmClick: function() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.initData();
				//设置选中的筛选项
				var selectedParam = this.selectedParam;
				(selectedParam.hiddenAttributePanel = true), (this.selectedFIlterBak = this.selectedFIlter);
				this.parentLevelItem = 'attribute_htype';
				this.selectedParam = selectedParam;
				this.get_data();
			},
			parentLevel: function(t) {
				var currentTarget = t.currentTarget.dataset;
				//console.log("aaaaaaaaaaaaaaaaa"+a.parentlevelitem);
				this.parentLevelItem = currentTarget.parentlevelitem;
			},
			childLevel: function(t) {
				var a = t.currentTarget.dataset,
					e = this.selectedFIlter;
				this.selectedFIlterBak = e;
				e[a.type] = a.id;
				this.selectedFIlter = e;
			},
			get_attribute: function() {
				var that = this;
				var url = this.$config.getCondition;
				var data = {
					type: 'hotel',
					userkey: this.$param.userkey,
					condition: this.$param.hotelType
				};

				this.$Request.post(url, data).then(res => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						return;
					}
					this.filter = res.data;
				});
			},
			getRegion: function() {
				var that = this;
				var url = this.$config.getMessageInfoFormFilter;
				var data = {
					type: this.$param.mddType,
					userkey: this.$param.userkey,
					pageSize: 100,
					sort: '2'
				};
				this.$Request.post(url, data).then(res => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						return;
					}
					this.regionList = res.data;
					for (var i = 0; i < this.regionList.length; i++) {
						if (this.regionList[i].bm == this.selectedParam.bm) {
							this.regionname = this.regionList[i].title;
						}
					}
					this.regionList.unshift({
						title: '全部',
						bm: ''
					});
				});
			},
			// onReachScroll: function(t) {
			// 	//console.log(t);
			// 	t.detail.scrollTop > 100 ? this.floorstatus=true: this.floorstatus=false;
			// 	var a = this.param;
			// 	a.noData || a.finished || a.loading || this.get_data(this.selectedParam.bm);
			// },
			get_data: function(mescroll) {
				var type = this.selectedFIlterBak['attribute_htype'];
				var level = this.selectedFIlterBak['attribute_hlevel'];
				var region = this.selectedParam.bm;
				// if(selectRegion == undefined || selectRegion == ""){
				// 	region = this.$config.ARER_CODE;
				// }else{
				// region = selectRegion;
				// }
				mescroll = this.mescroll;
				// mescroll.setPageSize(3);
				console.log('页码' + this.param.page);
				var requestData = {
					pagesize: 10, //mescroll.optUp.page.size,
					areacode: region,
					pageno: this.param.page,
					timestamp: 0,
					sort: this.selectedParam.sortId,
					type: null == level || 0 == level ? '' : level,
					level: null == type || 0 == type ? '' : type,
					lng: this.$param.clng,
					lat: this.$param.clat,
					userkey: this.$param.userkey,
					name: this.searchTitle
				};
				//console.log(this.$config.getHotelList);
				this.$Request.post(this.$config.getHotelList, requestData).then(res => {
					var list = res.data,
						dataListLen = res.data.length,
						that = this;
					setTimeout(
						function() {
							if (dataListLen > 0) {
								if (that.param.page == 1) {
									that.listDatas = [];
								}
								// if(that.param.page == 1 && dataListLen != mescroll.optUp.page.size){
								// 	that.data = true;
								// }
								that.param.page += 1;
								for (var i = 0; i < dataListLen; i++) {
									var item = {
										id: list[i].guid,
										region: list[i].region,
										hlogo: that.rootPaht + list[i].hlogo,
										hname: list[i].hname,
										hlevel: list[i].hlevel,
										isrecommend: list[i].isrecommend,
										dicname: list[i].dicname,
										hphone: list[i].hphone,
										price: list[i].price,
										distance: that.$util.formatDistance(list[i].distance)
									};
									that.listDatas.push(item);
								}
							}
							/* else if (dataListLen == 0 && requestData.name == '') {
								that.listDatas = [];
							} */
							if (mescroll != undefined && mescroll != null) {
								console.log('条数' + dataListLen);
								mescroll.endSuccess(dataListLen);
							}
							uni.hideLoading();
						},
						1500,
						list,
						dataListLen,
						mescroll,
						that
					);
				});
			},

			onPullDownRefresh() {
				console.log('onPullDownRefresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
					console.log('stopPullDownRefresh');
				}, 1000);
			}
		}
	};
</script>

<style>
	page {
		background: #fff;
	}

	/* .list-item{ padding: 20rpx; box-sizing: border-box; box-shadow: none; margin-top:0; margin-bottom: 20rpx;} */
	.sort-page {
		top: 180rpx !important
	}

	.filter-page {
		height: auto;
		top: 180rpx !important;
	}

	.search-container {
		height: auto;
	}

	.sell_jd image {
		width: 24rpx;
		margin-right: 8rpx;
	}
</style>
