<template>
	<view class="pb50">
		<view class="active" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
			<swiper class="activeSwiper" circular  :autoplay="autoplay">
				<swiper-item v-for="(pic,index) in item.photos?.split(',')" :key="index">
					<image class="cover" mode="aspectFill" :src="pic"></image>
				</swiper-item>
			</swiper>
			
			<view class="name">{{item.name}}</view>
			<view class="pp" style="display: flex;"><image src="./img/tag01.png" class="iconSquera"/>{{item.hdStart.substring(0, 10)}} — {{item.hdEnd.substring(0, 10)}}</view>
			<view class="pp" style="display: flex;"><image src="./img/tag02.png" class="iconSquera"/>{{item.address}}</view>
			<button class="btn btn1">点击进入</button>
		</view>
	</view>
	<view class="nodata" v-if="list.length==0">
		<image mode="aspectFit" src="/static/nodata.png"></image>
		<text> 暂无活动</text>
	</view>
	<!-- 我的 -->
	<view class="myEnter" @click="goMycenter"><image src="./img/user.png" mode="aspectFill"></image></view>
</template>

<script setup>
	import { reactive, toRefs, getCurrentInstance } from 'vue';
	import * as hotel from '@/common/hotel.js';
	import {onShow,onShareAppMessage,onShareTimeline,onPullDownRefresh} from '@dcloudio/uni-app';
	import _ from 'lodash';
	const app = getApp();
	const { proxy } = getCurrentInstance();
	const data = reactive({
		list: [],
		queryParam: {},
		autoplay:true
	});
	const { list,queryParam,autoplay } = toRefs(data);
	
	onShow(option =>{
		if (app.globalData.isLogin) {
			getList();
		} else {
			app.firstLoadCallback = () => {
				getList();
			};
		}
	})
	onPullDownRefresh(() => {
		getList();
	});
	function getList(){
		hotel.getTrainList().then(res => {
			list.value = res.rows;
		});
	}
	function goDetail(item){
		let path = `/pages_hotel/hotel/detail?id=${item.id}`;
		uni.navigateTo({
			url: path
		});
	}
	function goMycenter(){
		let path = `/pages_hotel/hotel/mycenter`;
		uni.navigateTo({
			url: path
		});
	}
</script>

<style lang="scss" scoped>
	.iconSquera{width: 40rpx;height: 40rpx;}
	.topSearch{ display: flex; align-items: center;background: #fff;}
	.active{background:#fff;width: 700rpx;margin:30rpx auto 30rpx;box-shadow: 0rpx 0rpx 27rpx 0rpx #DEDEDE;
border-radius:20rpx 20rpx;position: relative;padding: 0 0 30rpx;
		.cover{width: 700rpx;height: 320rpx;}
		.name{font-size: 32rpx;padding:10rpx 15rpx 0;
color: #000000;}
		.pp{padding:0 15rpx;margin: 6rpx 0;
color: #595959;
font-size: 28rpx;}
		.btn1{position: absolute;   right: 20rpx;  bottom: 20rpx;  width: 200rpx; line-height: 30px; height: 60rpx; font-size: 30rpx;}
	}
	.activeSwiper{height: 320rpx;}
	.myEnter{position: fixed;right: 0;bottom: 10%;
		image{width: 150rpx;height: 150rpx;}
	}
.pb50{padding-bottom: 50rpx;}	
</style>