<template>
	<view class='container'>
		<u-navbar :placeholder="true" bgColor="#000">
			<view slot="left" class="flex-center-center">
				<image class="w-270 h-57" src="/static/icon_sy_tab_img.png"></image>
			</view>
		</u-navbar>
		<view class="sv-y">
			<scroll-view scroll-y>
				<view class="flex-column">
					<view class="mt-40">
						<u-swiper :list="list2" keyName="url" radius="10" :autoplay="false" previousMargin="60"
							nextMargin="60" height="400" circular bgColor="transparent" @click="swClick"
							indicator></u-swiper>
					</view>
					<view class="mar-24 h-297" @click="$wskj.switchTab('/pages/home_tab_two')">
						<image style="width: 100%;height: 100%;" src="/static/icon_ljyd.png"></image>
					</view>
					<view class="grid-container">
						<view class="grid-item" v-for="(item, index) in shopList" :key="index"
							@click="onShop(item,index)">
							<view :class="md_number==index?'text-item-sel':'text-item'">
								<text class="plr-30 ptb-12">{{item.name}}</text>
							</view>
						</view>
					</view>
					<view class="flex h-320 mlr-24 mb-30" v-if="floorList.length>0">
						<view class="flex-1">
							<image class="full br-20" :src="`${$config.cdnUrl}`+ floorimg"></image>
						</view>
						<view class="w-120 flex-center-center flex-column" style="color:#878787;">
							<text>楼层</text>
							<view class="h-320">
								<scroll-view scroll-y class="h-300 w-120">
									<view class="flex-center-center flex-column" v-for="(item,index) in floorList"
										:key="index" @click="onLc(item)">
										<text class="fs-28 mt-20"
											:style="{'color':lc_number==item.id?'#FE42C2':'#878787'}">{{item.floor}}</text>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<view class="mt-20" v-for="(item,index) in partyList" :key="index" @click="onHdxq(item)">
						<view class="flex mlr-24 mb-20"
							style="color: #878787;background: #171717;border-radius: 20rpx;">
							<image class="w-177 h-246 br-20" :src="$wskj.splitListOne(item.image)">
							</image>
							<view class="flex-column fs-28  pad-10 ml-10" style="flex: 1;">
								<text style="color: white;">{{item.name}}</text>
								<view class="flex-between-center mt-30" style="flex: 1;">
									<view class="flex-column" style="height: 100%; justify-content:space-between;">
										<text style="color:#878787;font-size: 24rpx;">{{item.startTime}}</text>
										<text style="color:#F752C3;">{{item.poster==null?'':item.poster}}</text>
									</view>
									<view class="flex-column" style="height: 100%;justify-content: flex-end;">
										<image class="wh-74 br-37 mar-10" src="/static/icon_sy_go.png"></image>
									</view>

								</view>
							</view>
						</view>
					</view>
					<emptydata v-if="partyList.length == 0"></emptydata>
				</view>
			</scroll-view>

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

<script>
	import kevySwiper from '@/components/kevy-swiper/kevy-swiper'
	export default {
		components: {
			kevySwiper
		},
		data() {
			return {
				shopList: [], //店铺列表
				floorList: [], //楼层列表
				partyList: [], //活动列表
				saveStoreList: {},
				floorimg: "",
				timeIndex: 0,
				md_number: 0,
				lc_number: 0,
				list: [],
				list2: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					type: 'image'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					type: 'image'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					type: 'image'
				}],
			};
		},
		onLoad() {
			this.$api.getBanner().then(res => {
				const images = res.rows.map(item => item.image);
				this.list.push(...images);
				this.list2.length = 0
				for (var i = 0; i < res.rows.length; i++) {
					let person = {
						url: res.rows[i].image,
						goodsId: res.rows[i].url,
					};
					this.list2.push(person)
				}

			})
			this.$api.getShoplist().then(res => {
				this.shopList = res.rows;
				if (res.rows.length > 0) {
					this.onShop(res.rows[0], 0)
				}
				this.saveStoreList = res.rows[0]
			});
			//this.getUserInfo()
		},

		methods: {
			// getUserInfo() {
			// 	const params = {
			// 		url: '/system/member/getMemberInfo',
			// 		method: "GET",
			// 		data: {}
			// 	}
			// 	this.$request(params).then(res => {
			// 		this.userInfo = res.data
			// 		uni.setStorageSync('id', res.data.id)
			// 	})
			// },

			//获取楼层列表
			getetlistFloorByShop(id) {
				this.$api.getetlistFloorByShop(id).then(res => {
					this.floorList = res.rows
					this.onLc(res.rows[0])
				})
			},

			//获取活动列表
			getPartyList(shopId) {
				const params = {
					url: '/system/party/list',
					method: "GET",
					data: {
						isOnline: 1,
						shopId: shopId,
					}
				}
				this.$request(params).then(res => {
					this.partyList = res.rows
				})
			},
			onShop(item, index) {
				this.md_number = index
				this.saveStoreList = item
				this.getetlistFloorByShop(item.id)
				this.getPartyList(item.id)
			},
			onLc(e) {
				this.lc_number = e.id
				this.floorimg = e.image
			},
			onHdxq(e) {
				// if (!uni.getStorageSync('token')) {
				// 	this.$wskj.to('/pages/login/wechatlogin');
				// 	return
				// }
				this.$wskj.to('/pagesMain/pages/hdxq?data=' + encodeURIComponent(JSON.stringify(e)))
			},
			swClick(e) {
				// if (!uni.getStorageSync('token')) {
				// 	this.$wskj.to('/pages/login/wechatlogin');
				// 	return
				// }
				if (this.list2[e].goodsId) {
					//跳转到活动详情
					console.log("当前中间图片的下标为：" + this.list2[e].goodsId)
					let data = {
						id: this.list2[e].goodsId,
					};
					this.$wskj.to('/pagesMain/pages/hdxq?data=' + encodeURIComponent(JSON.stringify(data)))
				}
			}
		},
	};
</script>

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

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

	.grid-container {
		display: flex;
		flex-wrap: wrap;
		margin: 24rpx;
	}

	.grid-item {
		height: 60rpx; // 宫格高度
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.grid-item .text-item-sel {
		height: 100%;
		background-color: #FE42C2;
		border-radius: 20rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.grid-item .text-item {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-color: #424242;
		color: #808080;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>