<template>
	<view class="pb50">
		<view style="padding:0 30rpx;">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#15CFAB"></uni-segmented-control>
		</view>
		<view>
			<view class="active" v-for="(item, index) in showList" :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;">培训时间：{{item.trainStart.substring(0, 10)}} — {{item.trainEnd.substring(0, 10)}}</view>
					<view class="pp" style="display: flex;">报道时间：{{item.reportDate.substring(0, 10)}}</view>
					<view class="pp" style="display: flex;">主办单位：{{item.organizer}}</view>
					<view class="pp" style="display: flex;">承办单位：{{item.address}}</view>
					<view class="pp" style="display: flex;">培训地点：{{item.address}}</view>
					<button class="btn btn1">点击进入</button>
			</view>
		</view>
	</view>
	<view class="nodata" v-if="showList.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 {onShow,onShareAppMessage,onShareTimeline,onPullDownRefresh} from '@dcloudio/uni-app';
	import _ from 'lodash';
	const app = getApp();
	const { proxy } = getCurrentInstance();
	const data = reactive({
		showList: [],
		list: [],
		list0: [],
		list1: [],
		query: {},
		autoplay:true,
		items: ['全部', '进行中', '已过期'],
		current: 1
	});
	const { showList,list,list0,list1,query,autoplay,items,current } = toRefs(data);
	
	onShow(option =>{
		if (app.globalData.isLogin) {
			getList();
		} else {
			app.firstLoadCallback = () => {
				getList();
			};
		}
	})
	onPullDownRefresh(() => {
		getList();
	});
	function getList(){
		list0.value = []
		list1.value = []
		hotel.getTrainList().then(res => {
			list.value = res.rows
			for(var n of list.value){
				if(n.status == 0){
					list0.value.push(n)
				}
				if(n.status == 1){
					list1.value.push(n)
				}
			}
			getShowList(current.value)
		});
	}
	function goDetail(item){
		let path = `/pages_hotel/hotel/detail?id=${item.trainId}&isApply=${item.isApply}`;
		uni.navigateTo({
			url: path
		});
	}
	function onClickItem(e){
		if(current.value != e.currentIndex){
			current.value = e.currentIndex
		}
		getShowList(e.currentIndex)
	}
	function getShowList(n){
		switch (n){
			case 0:
			showList.value = list.value
			break;
			case 1:
			showList.value = list0.value
			break;
			case 2:
			showList.value = list1.value
			break;
		}
	}
</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>