<template>
	<view class="activity-list-warp">
		<view v-if="!loadMore" class="page-list">
			<view class="warp-bg"></view>
			<view class="record">
				<image
					:src="$baseUrl + 'sign-up/record.png'"
					alt="预约记录" mode="aspectFit" @click="recordClick" />
			</view>
			<view class="activity-list-box">
				<view v-for="(item, index) in activityList" :key="index" @click="detailClick(item)"
					class="activity-list-card">
					<view class="item-pic">
						<image :src="item.pic" />
					</view>
					<view class="item-content">
						<view class="content-left">
							<view class="time-top">
								{{ formatActivityTime(item.activityStartTime, item.activityEndTime).split(',')[0] }}
							</view>
							<view class="time-bot">
								{{ formatActivityTime(item.activityStartTime, item.activityEndTime).split(',')[1] }}
							</view>
						</view>
						<view class="content-main">
							<view class="title">
								{{ item.activityTitle }}
							</view>
							<view class="name">
								{{ item.activityTypeName }}
							</view>
						</view>
						<view class="content-right">
							<view
								:class="(item.prized === 0 || Date.now() > new Date(item.signupEndTime).getTime()) ? 'btn gray' : 'btn'">
								{{ formatStatus(item) }}
							</view>
							<view class="area">
								<view class="text">
									<image :src="$baseUrl + 'sign-up/mark.png'" />
									{{ formatAddress(item.addressList) }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no-page">
			{{ loadMore }}
		</view>
	</view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onLoad, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app'
import { activityListApi } from '@/api/momclub/index.js';
import md from "../../md.js";

const currentPage = ref(1)
const pageSize = ref(10)
const loadMore = ref('')
const loadMoreFlag = ref(true) //是否加载
const activityList = ref()
const formatActivityTime = (startTime, endTime) => {
	const start = new Date(startTime);
	const end = new Date(endTime);
	const getParts = (date) => [date.getMonth() + 1, date.getDate(), date.getHours().toString().padStart(2, '0'), date.getMinutes().toString().padStart(2, '0')];
	const [sMonth, sDate, sHours, sMinutes] = getParts(start);
	const [eMonth, eDate, eHours, eMinutes] = getParts(end);
	console.log(sMonth, eMonth, sDate, eDate, '23123dawsaws')
	if (sMonth === eMonth && sDate === eDate) {
		//不跨日
		return `${sMonth}/${sDate},${sHours}:${sMinutes}-${eHours}:${eMinutes}`;
	} else if (sMonth === eMonth) {
		//跨日
		return `${sMonth}月,${sDate}日-${eDate}日`;
	} else {
		//跨月
		return `,${sMonth}月${sDate}日～${eMonth}月${eDate}日`;
	}
}
const formatStatus = (item) => {
	const { prized, signupState, signupStartTime, signupEndTime } = item
	if (signupState === 1) {
		//用户已报名
		if (prized === -1) {
			//未公布
			return "已报名"
		} else if (prized === 1) {
			//已入选
			return "已入选"
		} else {
			//未入选
			return "未入选"
		}
	} else {
		//用户未报名
		if (Date.now() < new Date(signupStartTime).getTime()) {
			//报名未开始
			return "待开启"
		} else if (Date.now() > new Date(signupEndTime).getTime()) {
			//报名已结束
			return "已结束"
		} else {
			//报名进行中
			return "报名中"
		}
	}
}
const formatAddress = (addressList) => {
	let addressStr = addressList.map(itm => itm.cityName).join(' | ')
	console.log(addressStr.length, addressStr, '02323')
	if (addressStr.length > 9) {
		let str = addressStr.slice(0, 9)
		return `${str}...`
	} else {
		return addressStr
	}
}
//查看活动
const detailClick = (item) => {
	md.sensorSignTake({
		bannerClick: "true",
		page_name: "星妈会活动集合页",
		activity_code: item.activityId || '32323',
		button_name: item.activityId || '32323',
		crmid: uni.getStorageSync('memberId'),
		click_time: new Date().getTime()
	});
	if (item.prized === 0 || Date.now() > new Date(item.signupEndTime).getTime()) return
	uni.navigateTo({
		url: `/subPackages/momclub/index?activityId=${item.activityId}`
	})
}
//查看已报名活动
const recordClick = () => {
	uni.navigateTo({
		url: `/subPackages/momclub/signUpList`
	})
}
const getInfo = async () => {
	try {
		const res = await activityListApi({ currentPage: currentPage.value, pageSize: pageSize.value })
		if (res.success) {
			activityList.value = currentPage.value === 1 ? res.data.records : [...activityList.value, ...res.data.records]
			if (activityList.value.length == 0) {
				loadMore.value = '暂无活动'
			}else{
				loadMore.value = ''
			}
			if (res.data.records.length == 0) {
				loadMoreFlag.value = false
			}
		}
	} catch (err) {
		console.log(err, 'err')
	}
}
onReachBottom(() => {
	if (!loadMoreFlag.value) return
	nextTick(() => {
		currentPage.value = currentPage.value + 1
		getInfo()
	})
})
onLoad(() => {
	md.sensorSignTake({
		hdjhPage: "true",
		page_name: "星妈会活动集合页",
		page_view_time: new Date().getTime(),
		crmid: uni.getStorageSync('memberId'),
	});
	// 启用分享菜单（仅限分享给好友，禁用朋友圈）
	uni.showShareMenu({
	  withShareTicket: true,
	  menus: ['shareAppMessage', 'shareTimeline'] // 微信小程序支持分享到朋友圈
	});
	loadMoreFlag.value = true
	getInfo()
})
// 自定义分享内容
onShareAppMessage(()=> {
	return {
	  title: '活动集合页',
	  path: '/subPackages/momclub/acList', // 分享页面路径
	  imageUrl: '',  // 分享图片
	  success: (res) => {
		console.log('分享成功', res);
		uni.showToast({
		  title: '分享成功',
		  icon: 'success'
		});
	  },
	  fail: (err) => {
		console.log('分享失败', err);
	  }
	};
})
</script>

<style lang="less" scoped>
.activity-list-warp {
	background-color: #F7F7F7;
	color: #1C1C1C;
	min-height: 100vh;
	.page-list{
		.warp-bg {
			background: linear-gradient(180deg, #ECC990 0%, rgba(211, 164, 88, 0) 100%);
			height: 240rpx;
			width: 100%;
			position: absolute;
		}
		
		.record {
			position: fixed;
			top: 110rpx;
			right: 0rpx;
			width: 40rpx;
			height: 146rpx;
			z-index: 99;
		
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.activity-list-box {
			padding: 40rpx 20rpx;
		
			.activity-list-card {
				background-color: #FFFFFF;
				margin-bottom: 40rpx;
				height: 400rpx;
				position: relative;
				border-radius: 16rpx;
		
				.item-pic {
					width: 100%;
					height: 354rpx;
		
					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx 16rpx 0rpx 0rpx;
					}
				}
		
				.item-content {
					width: 100%;
					height: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 40rpx;
					box-sizing: border-box;
					position: absolute;
					bottom: 0;
					background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) -33.33%, rgba(255, 255, 255, 0.787882) 11.04%, #FFFFFF 42.29%);
					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
					border-radius: 16rpx;
		
		
					.content-left {
						width: 150rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						height: 100%;
						justify-content: space-between;
		
						.time-top {
							font-size: 28rpx;
							font-weight: 600;
						}
		
						.time-bot {
							font-size: 20rpx;
							color: #A8A8A8;
							line-height: 28rpx;
						}
		
					}
		
					.content-main {
						width: calc(100% - 390rpx);
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						margin: 0rpx 20rpx;
						height: 100%;
						justify-content: space-between;
		
						.title {
							font-size: 26rpx;
							font-weight: 500;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
		
						.name {
							padding: 0rpx 12rpx;
							border-radius: 4rpx;
							background: #D3A35833;
							font-size: 18rpx;
							line-height: 26rpx;
							color: #B27C1E;
						}
					}
		
					.content-right {
						width: 180rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						height: 100%;
						justify-content: space-between;
		
						.btn {
							width: 180rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 44rpx;
							height: 42rpx;
							line-height: 42rpx;
							background: #D3A358;
							font-size: 24rpx;
							font-weight: 500;
						}
		
						.gray {
							background: #B9B9B9;
						}
		
						.area {
							font-size: 20rpx;
							display: flex;
							justify-content: center;
							
							.text {
								position: relative;
								padding-left: 25rpx;
		
								image {
									position: absolute;
									left: 0rpx;
									top: 5rpx;
									width: 20rpx;
									height: 20rpx;
								}
							}
						}
		
					}
				}
			}
		}
	}
	.no-page{
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}	
}
</style>
