<template>
	<view>
		<view class="container">
			<u-dropdown title-size="28" :class="['u-dropdown',istop?'u-dropdown-top':'']"
				:style="{top:istop?(navHeight-2)+'px':0}">
				<u-dropdown-item v-model="value1" :title="options1[value1].label" :options="options1"
					@change="handleChange"></u-dropdown-item>
				<u-dropdown-item v-model="value3" :title="options3[value3].label" :options="options3"
					@change="handleChange"></u-dropdown-item>
			</u-dropdown>
			<view class="container_li">
				<view class="card-menu" v-for="item in waresList" :key="item.uid" @click="msto(item.wxMiNiAppId,item.wxMiNiPath,item.uid)">
				<view class="img-container">
					<u-image width="686rpx" height="390rpx" border-radius="14rpx 14rpx 0 0"
						:src="item.logo==''||item.logo==null?$getimg('noimg.png'):$geturl(item.logo)"></u-image>
				<!-- 	<view class="img-tags" v-if="item.turnFast==1">30秒入住</view> -->
					<view class="img-mask">
						<image :src="$getimg('icon-juli.png')" mode="widthFix"></image>
						<text>距{{ item.distance }}</text>
					</view>
				</view>
				<view class="text-container">
					<view class="title-container">
						<view class="content">
							<text class="title">{{ item.name }}</text>
							<view class="level" v-if="[1, 2, 3, 4, 5].includes(item.level)">{{ item.level }}星</view>
						</view>
						<!-- <u-icon @click.native.stop="clickOnCollection(item)" name="star-fill" size="35"
							:color="item.isCollect ? '#FF540B' : '#e5e5e5'"></u-icon> -->
					</view>
					<view>
						<view class="gradePrice">
							<view class="lbradd">{{item.address}}</view>
							<!-- <view class="oldPrice" v-if="item.price!=0">￥{{ item.price}}</view> -->
						</view>
					</view>
					<view class="label-container">
						<!-- <tags-list :list="item.labels"></tags-list> -->
						<view class="price-container" v-if="item.roomPrice!=0">
							<!-- <text class="name">错峰价</text> -->
							<text>
								<text class="symbol">¥</text>
								<text class="price">{{ item.roomPrice}}</text>
								<text class="qi">起</text>
							</text>
							<text v-if="item.wxMiNiAppId!=''&& item.wxMiNiPath!=''" class="oldPrice" >立即预订</text>
						</view>
					</view>
				</view>
			</view>
			
			</view>
			<!-- <u-loadmore v-if="waresList.length > 0" :status="status" :load-text="loadText" /> -->
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import back from '@/components/html/back.vue';
	var web = require('@/components/utils/request.js');
	// import comfortPage from './components/comfort-page';
	import tagsList from '@/components/tags-list';
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			back,
			tagsList,
			// comfortPage
		},
		data() {
			return {
				value1: 0,
				value2: 0,
				value3: 0,
				
				options1: [{
					label: '酒店类型',
					value: 0,
					type:2,
					scapeType: ''
				
				}, {
					label: '星级酒店',
					value: 1,
					type:2,
					scapeType: '星级酒店'
				}, {
					label: '精品酒店',
					value: 2,
					type:2,
					scapeType: '精品酒店'
				}, {
					label: '经济连锁',
					value: 3,
					type:2,
					scapeType: '经济连锁'
				},  {
					label: '特色民宿',
					value: 4,
					type:164,
					scapeType: ''
				}],
				
				options3: [{
					label: '智能排序',
					value: 0
				}, {
					label: '等级优先',
					value: 1
				}, {
					label: '低价优先',
					value: 2
				}, {
					label: '高价优先',
					value: 3
				}, {
					label: '距离优先',
					value: 4
				}],
				params: {
					pageNo: 1,
					pageSize: 100,
					// type: 1,
					radius: 0,
					ctgId:'',
					// level: "0",
					name: "",
					scapeType: "",
					orderBy: 0,
				},
				url: {
					list: 'wareInfo/list4.jspx',
					collection: 'front/jcCollect/wares_collect'
				},
				waresList: [],
				listpages: 0,
				status: 'loading',
				loadText: {
					// loadmore: '轻轻上拉加载更多数据~~',
					loading: '努力加载中~~',
					nomore: '已经到底了~~'
				},
				istop: false,
			};
		},
		mounted() {
			this.getList();
		},
		onReachBottom() {
			this.getMore();
		},
		computed: {
			...mapGetters(['navHeight'])
		},
		onPageScroll(e) {
			if (e.scrollTop > 40) {
				this.istop = true;
			} else {
				this.istop = false;
			}
		},
		methods: {
			msto(wxMiNiAppId, wxMiNiPath, uid) {
				if (wxMiNiAppId && wxMiNiPath) {
					if (wxMiNiAppId == 99999999) {
						uni.showModal({
							title: '提示',
							content: '因景区仅提供网页预订,预约地址已复制到剪贴板,请在浏览器中粘贴打开',
							showCancel: false,
							cancelText: '',
							confirmText: '确定',
							success: res => {
								if (res.confirm) {
									uni.setClipboardData({
										data: link, //要被复制的内容
										success: (e) => { //复制成功的回调函数
											console.log(e)
										}
									});
								}
							}
						});
					} else {
						this.toOther(wxMiNiAppId, wxMiNiPath)
					}
			
				} else {
					console.log(2)
					uni.navigateTo({
						url: `../pages/jqDet?uid=${uid}`
					});
				}
			},
			toOther(wxMiNiAppId, wxMiNiPath) {
				uni.navigateToMiniProgram({
					appId: wxMiNiAppId,
					path: wxMiNiPath,
					envVersion: 'release',
					extraData: {},
					success(res) {
						console.log("chenggong");
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			getList() {
				for (var i = 0; i < this.options1.length; i++) {
					if (this.value1 == this.options1[i].value) {
						this.params.ctgId = this.options1[i].type
						this.params.scapeType = this.options1[i].scapeType
					}
				}
				// for (var i = 0; i < this.options2.length; i++) {
				// 	if (this.value2 == this.options2[i].value) {
				// 		this.params.scapeType = this.options2[i].type
				// 	}
				// }
				this.params.orderBy = this.value3;
				
				this.params.sort = this.value1;
				web.httpPost(this, this.url.list, this.params, res => {
					let waresList = res.data.results;
					let pages = res.data.results.length;
					this.listpages = pages;
					if (this.params.pageNo == 1) {
						this.waresList = waresList;
					} else {
						this.waresList = this.waresList.concat(waresList);
					}
				});
			},
			// getMore() {
			// 	if (this.params.pageNo >= this.listpages) {
			// 		this.status = 'nomore'
				
			// 	} else if (this.params.pageNo < this.listpages) {
			// 		this.params.pageNo = ++this.params.pageNo;
			// 		this.getList();
			// 	}
			// },
			handleChange(e) {
				this.getList();
			},
			// goDetail(item) {
			// 	uni.navigateTo({
			// 		url: `../other/hotel-detail/hotel-detail?id=${item.uid}`
			// 	});
			// },
			getListImg(imgs) {
				if (!imgs) return this.$getImg('ouhai_xcx/home/map.png');
				return imgs.split(',')[0];
			},
			// clickOnCollection(item) {
			// 	httpPost(this, this.url.collection, {
			// 		id: item.id
			// 	}, res => {
			// 		this.$refs.uToast.show({
			// 			title: item.isCollect ? '取消收藏' : '已收藏',
			// 			type: 'success',
			// 			icon: 'checkmark-circle'
			// 		});
			// 		item.isCollect = !item.isCollect;
			// 		item.collectNum = item.isCollect ? item.collectNum + 1 : item.collectNum - 1;
			// 	});
			// },
			// cilckMap() {
			// 	uni.navigateTo({
			// 		url: '../map?id=2'
			// 	})
			// }
		}
	};
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	.u-dropdown-top {
		position: fixed;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 750rpx;
		top: 120rpx;
		z-index: 9;
	}
	.container {
		// padding: 30rpx;
		background: #ffffff;
	}
	.container_li{
		padding: 30rpx;
		// background: #ffffff;
	}

	.card-menu {
		width: 690rpx;
		// height: 610rpx;
		background: #ffffff;
		border: 1rpx solid #dddddd;
		border-radius: 14px;
		margin-bottom: 30rpx;

		.img-container {
			position: relative;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;

			image {
				width: 100%;
				height: 390rpx;
				border-radius: 14px 14px 0px 0px;
			}

			.img-tags {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				min-width: 180rpx;
				height: 48rpx;
				background: #fd4818;
				border-radius: 10rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 48rpx;
				font-weight: bold;
			}

			.img-mask {
				position: absolute;
				bottom: 2rpx;
				left: 0;
				width: 332rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				padding-left: 25rpx;
				background: linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
				font-size: 26rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					margin-left: 9rpx;
				}
			}
		}

		.text-container {
			display: flex;
			flex-direction: column;
			padding: 30rpx;

			.gradePrice {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					margin-top: 30rpx;
					.lbradd{
						font-size: 24upx;
						color: #666666;
						overflow: hidden;
						    white-space: nowrap;
						    text-overflow: ellipsis;
						&::before{
							content: '';
							display: inline-block;
							width: 18upx;
							height: 22upx;
							background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/ra-liebiao-icon-dizhi.png') no-repeat;
							background-size: 100%;
							margin-right: 12upx;
						}
					}
					.content {
						display: flex;
						align-items: center;
			
						.review,
						.collection {
							color: #666666;
			
							text {
								font-size: 25rpx;
								font-family: DIN;
								font-weight: 500;
								color: #333333;
								margin-right: 10rpx;
							}
						}
			
						.divider {
							width: 3rpx;
							height: 17rpx;
							background: #cccccc;
							margin-left: 15rpx;
							margin-right: 13rpx;
						}
					}
			
					.price {
						text-decoration: line-through;
						color: #979797;
					}
				}
			}

		.label-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;
		}
		.price-container {
			line-height: 50rpx;
			margin-top: 5rpx;
			color: #ff540b;
			font-size: 24rpx;
		
			.symbol {
				margin-right: 5rpx;
			}
		
			.price {
				font-size: 42rpx;
			}
		
			.qi {
				color: #666666;
				font-size: 20rpx;
				margin-left: 10rpx;
			}
		
			.price-name {
				color: #66666670;
				font-size: 22rpx;
				font-weight: 400;
			}
		
			.oldPrice {
				// margin-left: 9rpx;
				    // margin-left: 54%;
				    border-color: #ffffff00;
				    padding: 1rpx 12rpx;
				    background: #fbe0d4;
					position: absolute;
					right: 60rpx;
				
			}
		}
	}
	
	.title-container {
		display: flex;
		align-items: center;
	
		image {
			width: 54rpx;
			height: 40rpx;
		}
	
		.name {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 17rpx;
			margin-right: 18rpx;
		}
	
		.level {
			width: 60rpx;
			height: 40rpx;
			text-align: center;
			background: #fff1eb;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-family: DIN;
			font-weight: bold;
			color: #ff540b;
			margin-left: 10rpx;
		}
	
		.content {
			display: flex;
			align-items: center;
	
			.title {
				color: #2a2a2a;
				font-weight: bold;
				font-size: 36rpx;
				font-family: PingFang SC;
			}
		}
	}
</style>
