<template>
	<view class="pb50">
		<view style="padding:0 30rpx;">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				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="config.baseUrl_api+pic"></image>
					</swiper-item>
				</swiper>

				<view class="name">{{item.name}}</view>
				<view class="pp" style="display: flex;">报到时间：{{item.reportDate.substring(0, 10)}}</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.organizer}}</view> -->
				<!-- <view class="pp" style="display: flex;">承办单位：{{item.manager}}</view> -->
				<!-- <view class="pp" style="display: flex;">培训地点：{{item.address}}</view> -->
				<button class="btn btn1" v-if="item.status == 0">点击进入</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,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	const app = getApp();
	import config from '@/config';
	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: 0rpx;
			bottom: 30rpx;
			width: 150rpx;
			line-height: 30px;
			height: 60rpx;
			font-size: 28rpx;
			padding: 0;
		}
	}

	.activeSwiper {
		height: 320rpx;
	}

	.myEnter {
		position: fixed;
		right: 0;
		bottom: 10%;

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

	.pb50 {
		padding-bottom: 50rpx;
	}
</style>