<template>
	<view class="topSearch">
		<uni-search-bar style="width: 700rpx;" @clear="onclear()" @confirm="getList()" clearButton="auto" cancelButton="none" v-model="queryParam.name"></uni-search-bar>
	</view>
	<view class="hotel" v-for="h in list" :key="h.id" @click="goDetail(h.hotelId,h.id)">
		<swiper class="activeSwiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(pic,index) in h.photos?.split(',')" :key="index">
				<image class="cover" mode="aspectFill" :src="pic"></image>
			</swiper-item>
		</swiper>
		<!-- <image class="cover" :src="h.photos"></image> -->
		<view class="level">
			<image src="./img/xx.png"></image>
			{{startlist[h.starLevel]}}酒店
		</view>
		<view class="info">
			<view class="name">
				<view class="nn">{{h.name}}</view>
				<view class="price">¥
					<text>{{h.price}}</text>
				起</view>
			</view>
			<view class="tagbox">
				<text v-for="tag in h.label?.replace(/，/g,',').split(',')" :key="tag">{{tag}}</text>
			</view>
			<view class="add"> 
				<uni-icons type="location" size="16"></uni-icons>
				{{h.addName}}
			</view>
		</view>

	</view>
	<view class="nodata" v-if="list.length==0">
		<image mode="aspectFit" src="/static/nodata.png"></image>
		<text> 还没有酒店 </text>
	</view>
	
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline,onPullDownRefresh
	} from '@dcloudio/uni-app';
	
	const data = reactive({
		list:[],
		startlist:['零星',' 一星','二星','  三星','四星','五星','六星','七星'],
		queryParam:{
			name:''
		}
	})
	const {
		list,queryParam,startlist
	} = toRefs(data);
	let activeId = null
	onLoad((option)=>{
		activeId = option.id
	})
	onShow(()=>{
		getList()
	})
	onPullDownRefresh(() => {
		getList()
	})
	function getList(){
		hotel.getActivityHotelList({activityId:activeId,name:queryParam.value.name}).then(res=>{
			list.value = res.rows
		})
	}
	
	function goDetail(hotelId,id){
		let path = `/pages_hotel/hotel/hotelDetail?id=${id}&hotelId=${hotelId}`;
		uni.navigateTo({
			url: path
		});
	}
	function onclear(){
		queryParam.value.name = ''
		getList()
	}
</script>

<style lang="scss" scoped>
	.topSearch{background: #fff;}
	swiper{height: 393rpx}
	.hotel{background-color: #fff;margin-bottom: 20rpx;position: relative;padding: 30rpx 0 0;
		.cover{width: 700rpx;height: 393rpx;border-radius: 15rpx;margin: auto;    display: block;}
		.info{padding: 25rpx;
			.name{    position: relative;}
			.nn{font-size: 30rpx;}
			.price{    position: absolute; right: 0; top: 0;
			text{padding: 0 10rpx;}
			}
			.tagbox{width: 76%;
				text{border: 1rpx solid #E96E00;border-radius: 4rpx;color: #E96E00;font-size: 20rpx;
				padding:0 6rpx;margin-right: 12rpx;display: inline-block;}
			}
			.add{font-size: 24rpx;color: #4C5359;margin: 12rpx 0 0;}
		}
	}
	.level{    position: absolute;mix-blend-mode: difference;
    color: #FFFFFF;
    right: 40rpx;
    top: 370rpx;
    display: flex;
    align-items: center;font-size: 24rpx;
		image{width: 33rpx;height: 37rpx;margin-right: 10rpx;}
	}
	.price{display: flex;align-items: baseline;color: #1EC886;
		text{color: #1EC886;font-size: 55rpx;}
	}
</style>