<template>
	<view class="activity-list-warp">
		<view class="search">
			<!-- <view v-for="(itm,idx) in searchList" :key="idx"
				:class="searchType === itm.type ? 'search-box search-box-bg' : 'search-box'" @click="searchClick(itm)">
				<view :class="searchType === itm.type ? 'search-text':'search-text search-text-thin'">{{itm.name}}
				</view>
				<view v-if="searchType === itm.type" class="search-total">{{itm.total > 99 ? '99+' : itm.total }}</view>
			</view> -->
			<view v-for="(itm,idx) in searchList" :key="idx"
				class="search-box" @click="searchClick(itm)">
				<view :class="searchType === itm.type ? 'search-text':'search-text-thin'">
					<view>{{itm.name}}</view> 
					<view v-if="searchType === itm.type" class="search-text-bot"></view>
				</view>
				<view v-if="searchType === itm.type" class="search-total">{{itm.total > 99 ? '99+' : itm.total }}</view>
			</view>
		</view>
		<view v-if="!loadMore" class="page-list">
			<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
								v-if="(formatActivityTime(item.activityStartTime, item.activityEndTime).split(',')[0])"
								class="left-one">
								<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 v-else class="left-two">
								<view>
									{{ formatActivityTime(item.activityStartTime, item.activityEndTime).split(',')[1]}}
								</view>
								<view>
									{{ formatActivityTime(item.activityStartTime, item.activityEndTime).split(',')[2] }}
								</view>
							</view>
						</view>
						<view class="content-main">
							<view class="title">
								{{ item.activityTitle }}
							</view>
							<view class="area">
								<image :src="$baseUrl + 'sign-up/mark.png'" />
								<view class="text">
									{{ item.addressList[0]?.cityName }}
								</view>
								<view class="name" :style="{ background: activityStatus(item.activityType).background}">
									{{ item.activityTypeName }}
								</view>
							</view>
						</view>
						<view class="content-right">
							<view
								:class="(item.prized === 0 || (item.signupState !== 1 && Date.now() > new Date(item.signupEndTime).getTime())) ? 'btn gray' : 'btn'">
								{{ formatStatus(item) }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no-page">
			<image :src="$baseUrl + 'sign-up/empty.png'" />
			<view class="page-text">
				{{searchType === '' ? '暂无活动' : '暂无报名活动'}}
			</view>

		</view>
	</view>
</template>

<script setup>
import { ref, nextTick, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { activityListApi, signupListApi } from '@/api/momclub/index.js';
import md from "../../md.js";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const currentPage = ref(1)
const pageSize = ref(10)
const loadMore = ref(false)
const loadMoreFlag = ref(true) //是否加载
const activityList = ref()
const searchType = ref('')  //搜索类型
const searchList = ref([
	{name: "全部", total: 0, type: ''},
	{name: "已报名", total: 0, type: 1},
	{name: "已中选", total: 0, type: 3},
])

const activityStatus = computed(()=> {
	return (activityType) => {
		if (activityType === 'SYY') {
			return { background: 'linear-gradient(90deg, #8DBAE6 0%, #A0C9F1 100%)'};
		} else if (activityType === 'XMH_TALK') {
			return { background: 'linear-gradient(90deg, #9980C2 0%, #BEA8E2 100%)'};
		} else {
			return { background: 'linear-gradient(90deg, #E7CA9F 0%, #EBD9C9 100%)'};
		}
	};
})
const searchClick = (itm)=>{
	searchType.value = itm.type
	currentPage.value = 1
	loadMoreFlag.value = true
	loadMore.value = false
	activityList.value =[]
	getInfo(searchType.value)
}
const formatActivityTime = (startTime, endTime) => {
	const start = new Date(startTime);
	const end = new Date(endTime);
	const getParts = (date) => [(date.getMonth() + 1).toString().padStart(2, '0'), date.getDate().toString().padStart(2, '0'), 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);
	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",
		pageName: "星妈会活动集合页",
		activity_code: item.activityId || '',
		buttonName: item.activityTitle || '',
		crmid: uni.getStorageSync('memberId'),
		click_time: new Date().getTime()
	});
	uni.navigateTo({
		url: `/subPackages/momclub/index?activityId=${item.activityId}`
	})
}
const getInfo = async (type) => {
	try {
		const api = type ? signupListApi : activityListApi
		let params = {
			currentPage: currentPage.value,
			pageSize: pageSize.value,
			status: type ? type === 1 ? '' : 1 :undefined
		}
		const res = await api(params)
		if (res.success) {
			activityList.value = currentPage.value === 1 ? res.data.records : [...activityList.value, ...res.data.records]
			if (activityList.value.length == 0) {
				loadMore.value = true
			} else {
				loadMore.value = false
			}
			if (res.data.records.length == 0) {
				loadMoreFlag.value = false
			}
			const index = searchList.value.findIndex(itm=>itm.type === type)
			searchList.value[index].total=res.data.total
		}
	} catch (err) {
		console.log(err, 'err')
	}
}
onReachBottom(() => {
	if (!loadMoreFlag.value) return
	nextTick(() => {
		currentPage.value = currentPage.value + 1
		getInfo(searchType.value)
	})
})
// 登录获取 cuk
const wxAutoLogin = async () => {
	 let cuk = uni.getStorageSync('cuk');
	 let memberId = uni.getStorageSync('memberId');
	 // 如果本地没有缓存登录信息，则需要登录
	 console.log(cuk ,memberId,'cukkkkk')
	 if (!cuk || !memberId) {
	  await new Promise(resolve => {
		userStore.syWxAutoLogin(resolve)
	  })
	 }
}
onLoad(async(options) => {
	md.sensorSignTake({
		hdjhPage: "true",
		pageName: "星妈会活动集合页",
		page_view_time: new Date().getTime(),
		crmid: uni.getStorageSync('memberId'),
	});
	loadMoreFlag.value = true
	searchType.value = options.type ? options.type : ''
	if(options.share && options.share == 'true'){
		// 确保登录以获取 cuk
		await wxAutoLogin()
		await userStore.loadUserInfo()
		console.log(userStore.userInfo,'userStore.userInfo?.memberId')
	}
	getInfo(searchType.value)
})
</script>

<style lang="less" scoped>
.activity-list-warp {
	background-color: #F7F7F7;
	color: #1C1C1C;
	min-height: 100vh;
	padding-top: 30rpx;
	// .search{
	// 	width: calc(100% - 40rpx);
	// 	height: 72rpx;
	// 	border-radius: 200rpx;
	// 	background: #ECC990;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	padding: 0rpx 5rpx;
	// 	margin: 0rpx auto 20rpx;
	// 	.search-box-bg{
	// 		background: linear-gradient(180deg, #FFFFFF 0%, #FFF2D3 100%);
	// 		border-radius: 200rpx;
	// 	}
	// 	.search-box{
	// 		height: 64rpx;
	// 		width: 232rpx;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		.search-text{
	// 			font-weight: 500;
	// 			font-size: 26rpx;
	// 			color: #B27C1E;
	// 		}
	// 		.search-text-thin{
	// 			font-weight: 400;
	// 			font-size: 24rpx;
	// 			color: #B27C1E;
	// 			opacity: 0.5;
	
	// 		}
	// 		.search-total{
	// 			width: 48rpx;
	// 			height: 28rpx;
	// 			background: linear-gradient(90deg, #B27C1E 0%, #D3A358 100%);
	// 			border-radius: 40rpx;
	// 			font-size: 20rpx;
	// 			color: #FFFFFF;
	// 			line-height: 28rpx;
	// 			text-align: center;
	// 			margin-left: 10rpx;
	// 		}
	// 	}
	// }
	.search{
		width: calc(100% - 40rpx);
		height: 72rpx;
		border-radius: 200rpx;
		//background: #ECC990;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 5rpx;
		margin: 0rpx auto 20rpx;
		.search-box{
			height: 64rpx;
			width: 232rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #000000;
			.search-text{
				font-weight: 600;
				position: relative;
				display: flex;
				justify-content: center;
				.search-text-bot{
					width: 60%;
					height: 8rpx;
					border-radius: 26rpx;
					background: #000000;
					position: absolute;
					top: 45rpx;
				}
			}
			.search-text-thin{
				opacity: 0.5;
			}
			.search-total{
				width: 36rpx;
				height: 24rpx;
				line-height: 26rpx;
				border-radius: 12rpx 12rpx 12rpx 0rpx;
				background: linear-gradient(90deg, #D1AF82 0%, #E6C7A3 100%);
				font-size: 16rpx;
				text-align: center;
				margin-left: 10rpx;
				color: #FFFFFF;
			}
		}
	}
	.page-list {
		padding: 20rpx;
		
		.activity-list-box {
			.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: 26rpx 30rpx;
					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: 140rpx;
						height: 100%;
						display: flex;
						.left-one {
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;

							.time-top {
								font-size: 24rpx;
								font-weight: 500;
							}

							.time-bot {
								font-size: 20rpx;
								color: #A8A8A8;
								line-height: 28rpx;
							}
						}

						.left-two {
							font-size: 24rpx;
							font-weight: 500;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}
					}

					.content-main {
						width: calc(100% - 340rpx);
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						margin-right: 20rpx;
						height: 100%;
						justify-content: space-between;

						.title {
							font-size: 26rpx;
							font-weight: 500;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.area {
							display: flex;
							justify-content: center;
							align-items: center;

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

							.text {
								font-size: 20rpx;
								margin: 0rpx 10rpx 0rpx 2rpx;
							}

							.name {
								padding-left: 5rpx;
								padding-right: 5rpx;
								border-radius: 4rpx;
								font-size: 18rpx;
								height: 26rpx;
								display: flex;
								align-items: center;
								color: #FFFFFF;
							}
						}
					}

					.content-right {
						width: 180rpx;

						.btn {
							width: 180rpx;
							height: 60rpx;
							border-radius: 44rpx;
							text-align: center;
							color: #FFFFFF;
							line-height: 60rpx;
							background: linear-gradient(180deg, #ECC990 0%, #D3A358 100%);
							font-size: 26rpx;
							font-weight: 400;
						}

						.gray {
							opacity: 0.5;
						}
					}
				}
			}
		}
	}

	.no-page {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		.page-text{
			color: #54390D;
			font-size: 28rpx;
			margin-top: 20rpx;
		}
		image{
			width: 320rpx;
			height: 320rpx;
		}
	}
}
</style>
