<template>
	<view class='container'>
		<view class="mt-100 flex-center-center" style="position: relative;color: white;">
			<view @click="$wskj.to('/pagesMain/pages/xzmd')" class="mt-10 ml-24 flex-center-center"
				style="position: absolute;top: 0;left:0;">
				<text class="fs-28">{{shopName}}</text>
				<image class="w-28 h-15 ml-10" src="../static/icon_pk_x.png"></image>
			</view>
			<text class="fs-36">拼卡</text>
		</view>
		<view class="good-hot">
			<scroll-view scroll-x enable-flex class="scroll-view_H">
				<view v-for="(item,index) in dateList" :key="index" @click="onTab(item,index)">
					<view :class="timeIndex==index?'fl-item-sel':'fl-item'">
						<text>{{getDayOfWeek(item)}}</text>
						<text>{{item.slice(5,10)}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="sv-y">
			<scroll-view scroll-y>
				<view v-for="(item,index) in list" :key="index">
					<view class="item flex-column">
						<view style="position: relative;">
							<text
								style="position:absolute;top: -20rpx;right: -20rpx;width: 130rpx;height: 48rpx;line-height: 48rpx;text-align: center; background: #0F0F0F;border-radius: 0rpx 20rpx 0rpx 4rpx;color:#FE42C2;">进行中</text>
						</view>
						<view class="flex-column fs-28 mar-15">
							<text style="color: black;">{{item.name}}</text>
							<text style="color:#878787;font-size: 24rpx;margin: 10rpx 0;">{{item.startTime}}</text>
						</view>
						<view style="width: 100%;">
							<scroll-view class="scroll-view-x" scroll-x="true">
								<view class="images" v-for="(sonitem, index) in item.leaderList" :key="index">
									<image class="wh-120 br-60" :src="$config.cdnUrl+sonitem.avatar" mode="aspectFill"
										@click="onPk(item.id,sonitem.id)">
									</image>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</scroll-view>
			<emptydata v-if="list.length == 0"></emptydata>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				partyDate: '',
				timeIndex: 0,
				shopId: '',
				shopName: '',
				dateList: [],
				list: [],
			};
		},
		onLoad() {
			this.dateList = this.getLastWeekDays()
			this.getDateStr()
		},
		onShow() {
			this.shopId = uni.getStorageSync("shopId")
			console.log(this.shopId);
			if (uni.getStorageSync("shopId").length == 0) {
				this.getShopList();
			} else {
				this.shopId = uni.getStorageSync("shopId")
				this.shopName = uni.getStorageSync("shopName")
				this.getList();
			}
		},
		methods: {
			onPk(partyId, leaderId) {
				this.$wskj.to('/pagesMain/pages/ldxx?partyId=' + partyId + '&leaderId=' + leaderId + '&type=0')
			},
			onTab(item, index) {
				this.timeIndex = index;
				this.partyDate = `${item} 00:00`;
				this.getList();
			},
			//获取活动列表
			getShopList() {
				const params = {
					url: '/system/party/listShop',
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					this.shopId = res.rows[0].id
					this.shopName = res.rows[0].name
					this.getList();
				})
			},
			getList() {
				const params = {
					url: '/system/party/list',
					method: "GET",
					data: {
						isOnline: 1,
						shopId: this.shopId,
						partyDate: this.partyDate
					}
				}
				this.$request(params).then(res => {
					this.list = res.rows

				})
			},
			//获取当前时间
			getDateStr() {
				const date = new Date();
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);

				this.partyDate = `${year}-${month}-${day} 00:00`;
			},
			//获取一周的数据
			getLastWeekDays() {
				let days = [];
				for (let i = 0; i < 30; i++) {
					let date = new Date();
					date.setDate(date.getDate() + i); // 设置为最近一天、最近二天...
					let year = date.getFullYear();
					let month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
					let day = date.getDate();
					// 格式化月份和日期，确保它们是两位数字
					month = month < 10 ? '0' + month : month;
					day = day < 10 ? '0' + day : day;
					days.unshift(`${year}-${month}-${day}`); // 将格式化后的日期添加到数组前面
				}
				return days.reverse();
			},
			//年月日转周几
			getDayOfWeek(dateString) {
				// 将日期字符串转换为Date对象
				const date = new Date(dateString);
				// 获取星期的方法返回0-6的值，0代表星期天
				const weekday = date.getDay();
				// 将数字转换为星期几的中文表示
				const weeks = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
				return weeks[weekday];
			}
		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
		display: flex;
		flex-direction: column;
	}

	.good-hot {
		margin: 25rpx;
		height: 160rpx;
		background: rgba(255, 255, 255, 0.03);
		border-radius: 40rpx;
		border: 2px solid rgba(255, 255, 255, 0.11);
		padding: 0 20rpx;
	}

	/* 注意点，测试下来，设置水平滑动也要给一个固定高度 */
	.scroll-view_H {
		margin-top: 30rpx;
		width: 100%;
		white-space: nowrap;
		height: 100rpx;
		flex-direction: row;
	}

	.scroll-view_H view {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 15rpx
	}

	/* 去掉最后一个元素的 margin-right: 16rpx 设置为0 */
	.scroll-view_H view:last-child {
		margin-right: 0;
	}

	.scroll-view_H .fl-item-sel {
		display: flex;
		height: 100%;
		width: 100rpx;
		flex-direction: column;
		background: #FE42C2;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		color: white;
		font-weight: 700;

	}

	.scroll-view_H .fl-item {
		display: flex;
		height: 100%;
		width: 100rpx;
		flex-direction: column;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		color: #878787;
	}

	.sv-y {
		flex: 1;
		/* 自动占满剩余的空间 */
		overflow-y: auto;
		/* 允许纵向滚动 */
	}

	.item {
		display: flex;
		background: url('/static/icon_pk_bg.png');
		border-radius: 20rpx;
		margin: 0 24rpx;
		margin-bottom: 40rpx;
		padding: 20rpx;

	}

	.scroll-view-x {
		width: 100%;
		white-space: nowrap;
		/* 让内部元素不换行，保证水平排列 */
		overflow-x: auto;
		/* 允许横向溢出滚动 */
	}

	.images {
		display: inline-block;
		/* 让元素水平排列 */
		width: 120rpx;
		margin-right: 10px;
	}
</style>