<template>
	<view class='container'>
		<view class="mlr-24">
			<u-swiper :list="swiperList" circular :autoplay="true" radius="10" bgColor="#000" height="200"></u-swiper>
		</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="flex mlr-24 mb-30" @click="$wskj.to('/pagesMain/pages/ydxq?id='+item.id)"
						style="color: #878787;border-radius: 20rpx;">
						<image class="wh-256 br-20" :src="$config.cdnUrl+splitList(item.image)[0]"></image>
						<view class="flex-column fs-28 plr-20 flex-between" style="flex: 1;">
							<text class="fs-32" style="color: white;">{{item.name}}</text>
							<view class="flex ptb-15">
								<view v-for="(sonitem,index) in splitList(item.remark)" :key="index">
									<text class="fs-24 br-8 ptb-5 plr-15 mr-10"
										style="color: #FFC100;border: 1px solid #FFC100;">{{sonitem}}</text>
								</view>
							</view>
							<view class="flex">
								<view class="flex-column" style="flex: 1;">
									<view class="flex-column fs-24" style="color: #868686;">
										<text>{{item.poster}}</text>
									</view>
									<view class="flex mt-10" style="color:#FE42C2;align-items: flex-end;">
										<text class="fs-46">￥{{item.joinPrice}}</text>
										<text class="fs-28 ml-10 mb-5">起</text>
									</view>
								</view>
								<view class="flex" style="align-items: flex-end;">
									<image class="wh-100 br-20" src="/static/icon_dk_ljyd.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<emptydata v-if="list.length == 0"></emptydata>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				partyDate: '',
				timeIndex: 0,
				dateList: [],
				shopId: '',
				list: [],
				swiperList: [],

			};
		},
		onLoad(e) {
			let data = JSON.parse(decodeURIComponent(e.data))
			console.log(data);
			this.shopId = data.id
			uni.setNavigationBarTitle({
				title: data.name
			});
			this.swiperList = data.image.split(",");
			this.dateList = this.getLastWeekDays()
			this.getDateStr()
			this.getList()
		},
		methods: {
			splitList(data) {
				if (data == null) {
					return []
				}
				return data.split(',')
			},
			onTab(item, index) {
				this.timeIndex = index;
				this.partyDate = `${item} 00:00`;
				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;
		background-color: ;
		display: flex;
		flex-direction: column;
	}

	.good-hot {
		margin: 25rpx;
		height: 160rpx;
	}

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

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

	/* 去掉最后一个元素的 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: #FFFFFF;
		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;
		/* 允许纵向滚动 */
	}
</style>