<template>
	<view class="hotel-list column" style="background: #F3F1EF;">
		<view class="hotel-listHeader">
				<hotelHeaders :title="pageTitle"></hotelHeaders>
				<hotelSearch @change="change"></hotelSearch>
		</view>
		<view style="height: 1px;flex: 1;overflow: hidden;position: relative;">
            <!-- :latitude="latitude" :longitude="longitude" :markers="covers" -->
			<map id="map" style="width: 100%; height: 100%;" 
            :longitude="center.longitude"
            :latitude="center.latitude"
            :markers="markers"
            @callouttap="handleCalloutClick"
            >
            </map>
			<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638761008788457858.png"
            class="hotelPosition" @click="getLocation"/>
			<view class="hotelMapListBox">
				<swiper class="swiper" circular 
				:indicator-dots="indicatorDots" 
				:autoplay="autoplay" 
				:interval="interval"
				:duration="duration"
				:current="current"
				@change="changeCurrent"
				:previous-margin="'14rpx'"
				:next-margin="'14rpx'">
					<swiper-item 
					v-for="(item,index) in HotelList" :key="index"
					class="hotelMapListSwp"
					:class="[
						prevCurrent==index?'activePrev':'',
						current==index?'active':'',
						nextCurrent==index?'activeNext':'',]">
						<view class="hotelMapList">
							<hotel-good :item="item" :isMap="1"></hotel-good>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
	</view>
</template>

<script>
	import rangeSlider from "./components/range-slider.vue";
	import canlendar from "./components/time/index";
	import hotelGood from "./components/hotel-good.vue";
	import Address from "./components/address/smh-address-indexed.vue";
	import hotelHeaders from "@/components/header/header";
    import hotelSearch from "./components/search.vue";
	export default {
		data() {
			return {
				pageTitle: '成都',
				city: "成都",
				searchObj: {
					pageIndex: 1,
					pageSize: 15,
					Name: "", //关键字
					// StartPrice: 0,
					// EndPrice: 1000,
					QStartDate: "",
					QEndDate: "",
					// OrderByType: "1", //排序类型
					// QStars: "", //星级
					TagList: [], //查询标签
					// City: 262, //市
					// District: 0, //区
				},
				day: 0,
				startDay: "",
				endDay: "",
				HotelList: [], //酒店数据
				tempRateAndPrice: {
					price: {},
					priceText: "不限",
					rate: [],
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多商品了",
				},
				showLoading: false,
				status: "loadmore",
				page_count: 0,
				dayObj: {},
				mc: '',
                center: { longitude: 116.397428, latitude: 39.90923 },
                markers: [
                    {
                        id: 1,
                        latitude: 39.909,
						longitude: 116.39742,
						iconPath: '',
						title: '',
						alpha: 0,
						callout:{
							content:'¥ 99999起',
							bgColor: '#FF3166',
							borderWidth: 1,
							borderColor: '#E2D5D2',
							color: '#fff',
							fontSize: '12px',
							fontWeight: 'bold',
							anchorX: 0,
							anchorY: 0,
							borderRadius: 7,
							padding: 5,
							display: 'ALWAYS',
						},
                    },
                ],
				bubble:[
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638761641584224459.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638761646347047352.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638761646386246237.png',
				],
				calloutStyle:{
					content:'',
					bgColor: '',
					borderWidth: 1,
					borderColor: '#E2D5D2',
					color: '',
					fontSize: '12px',
					fontWeight: 'bold',
					anchorX: 0,
					anchorY: 0,
					borderRadius: 7,
					padding: 5,
					display: 'ALWAYS',
				},
				editCallout1:{
					bgColor: '#FF3166',
					color: '#fff',
				},
				editCallout2:{
					bgColor: '#FEEEF2',
					color: '#FF3166',
				},
				editCallout3:{
					bgColor: '#F3F1EF',
					color: '#C7C6C6',
				},
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				prevCurrent: null,
				current: 0,
				nextCurrent: null,
			};
		},
		components: {
			rangeSlider,
			canlendar,
			hotelGood,
			Address,
			hotelHeaders,
            hotelSearch,
		},
		onLoad(options) {
			this.mc = this.$uiConfig.mainColor;
			if (options && options.Name) {
				this.searchObj.Name = options.Name;
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "酒店",
			});
			let d1 = new Date();
			let d = new Date();
			let d2 = new Date(d.setDate(d.getDate() + 1));
			let startWeek = "周" + "日一二三四五六".charAt(new Date().getDay());
			let endWeek = "周" + "日一二三四五六".charAt(new Date().getDay() + 1);
			
			let month1 = d1.getMonth() + 1;
			let day1 = d1.getDate();
			let Month1 = month1>9?month1:'0'+month1;
			let Day1 = day1>9?day1:'0'+day1;
			let month2 = d2.getMonth() + 1;
			let day2 = d2.getDate();
			let Month2 = month2>9?month2:'0'+month2;
			let Day2 = day2>9?day2:'0'+day2;
			var obj = {
				start: `${d1.getFullYear()}-${Month1}-${Day1}`,
				end: `${d2.getFullYear()}-${Month2}-${Day2}`,
				startDay: `${Month1}-${Day1}`,
				endDay: `${Month2}-${Day2}`,
				day: 1,
				startWeek: startWeek,
				endWeek: endWeek,
			};
			this.dayObj = obj;
			uni.setStorage({
				key: "Time",
				data: JSON.stringify(obj),
			});
			this.searchObj.QStartDate = obj.start;
			this.searchObj.QEndDate = obj.end;
			this.startDay = obj.startDay;
			this.endDay = obj.endDay;
			this.day = obj.day;
			this.getList();
            // this.getLocation()
		},
		methods: {
            handleCalloutClick(marker) {
                console.log('点击了标记:', marker.detail);
                // 可自定义弹窗逻辑或跳转页面
            },
            getLocation() {
                wx.getLocation({
                    type: 'wgs84', // 精度模式
                    success: (res) => {
                        this.longitude = res.longitude;
                        this.latitude = res.latitude;
                        // 更新地图中心点
                        this.$refs.map.moveToLocation({
                            longitude: res.longitude,
                            latitude: res.latitude
                     });
                    },
                    fail: (err) => {
                        console.error('定位失败', err);
                        wx.showModal({
                            title: '提示',
                            content: '授权失败，请检查定位权限'
                        });
                    }
                });
            },
			changeCurrent(e) {
				this.prevCurrent = this.current
				this.current = e.detail.current;
				let length = this.HotelList.length
				if((length-1)==this.current){
					this.nextCurrent = 0
				}else this.nextCurrent = this.current+1
			},
			research() {
				this.searchObj.pageIndex = 1;
				this.getList(1);
			},
			lower(e) {
				// TODO: 滚动到了底部，实现翻页加载
				if (this.searchObj.pageIndex < this.page_count) {
					this.status = "loading";
					this.searchObj.pageIndex++;
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			change(item) {
				this.searchObj ={
					...this.searchObj,
					...item,
				}
				this.research();
			},
			//获取列表数据
			getList(type) {
				this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
				if (type == 1) {
					this.HotelList = [];
				}
				this.request2({
						url: "/api/Hotel/AppGetHotelPage",
						data: this.searchObj,
					},
					(res) => {
						if (res.resultCode == 1) {
							if (this.searchObj.pageIndex === 1) {
								this.HotelList = res.data.pageData;
							} else {
								this.HotelList = this.HotelList.concat(res.data.pageData);
							}
							let length = this.HotelList.length
							this.prevCurrent = length-1
							if((length-1)==this.current){
								this.nextCurrent = 0
							}else this.nextCurrent = this.current+1
							this.page_count = res.data.pageCount;
						}
					}
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.hotel-list{
    height: 100vh;
}
.hotel-listHeader{
    background: #F3F1EF ;
}
.hotelPosition{
    position: fixed;
    right: 19rpx;
    bottom: 403rpx;
    width: 94rpx;
    height: 108rpx;
    z-index: 9;
}
.hotelMapListBox{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
	height: 396rpx;
}
.hotelMapListSwp{
	
}
.hotelMapListSwp.activePrev .hotelMapList{
	
}
.hotelMapListSwp.active .hotelMapList{
	margin-left: 17rpx;
	margin-right: 17rpx;
	margin-top: 0;
}
.hotelMapListSwp.activeNext .hotelMapList{
	
}
.hotelMapList{
	background: #fff;
	padding: 33rpx 33rpx;
	border-radius: 14rpx;
	margin-top: 24rpx;
}
.hotelScroll{
	height: 300rpx;
}
.swiper {
	height: 328rpx;
}
.swiper-item {
	height: 304rpx;
}
/deep/.search-box .u-input{
		font-size: 24rpx;
	}
/deep/.hotel-listHeader .u-dropdown__menu{
	justify-content: space-between;
}
/deep/.hotel-listHeader .u-dropdown__menu__item {
	flex: inherit !important;
}
/deep/.hotel-listHeader .u-flex{
	justify-content: flex-start;
}

</style>
