<template>
	<!-- 
	
设定：
suo:锁；
flower:花，共7种，图片分别为flower1.png flower2.png flower7.png；
zacao:杂草；
tian:田地，如果是待解锁的田地，图片用tian_suo.png，如果是已解锁就用tian.png；
souhuo:收获标识；
select_zz:7种花的view，默认应该隐藏，点击播种时显示，播种结束后隐藏
4个按钮：
解锁荒地：点击时，将第一块待解锁的田地转换为已解锁地
除草：点击时，让杂草隐藏
播种：点击时，需要先将7种花显示出来，选择其中一种，然后再点击除去杂草的地，然后该块地上显示种子，然后10分钟倒计时，然后显示对应的花，以及收获标识
收获：点击后，有收获标识的土地上的收获标识图片隐藏，花隐藏，出现杂草
操作流程：
默认显示待解锁的田地（其他几个图标都隐藏），点击"解锁荒地"，点击"除草"，点击"播种"，到时间后点击"收获" -->
	<view class="page">
		<view class="task-board">
			<view class="task_day">
				<image src="../../static/island/huatian/btn_task_day.png" class="task"></image>
			</view>
			<view class="board-title">
			</view>
			<view class="bodyContent">

				<block v-for="(field, index) in fields" :key="index">
					<view class="blank" v-if="index == 0 || index == 7 || index == 10"></view>
					<view class="item" :class="{
							  'locked': !field.isUnlocked,
							  'weedy': field.hasWeed,
							  'weed-blink': weedMode && field.hasWeed,
							  'planted': field.flower,
							  'growing': field.isGrowing,
							  'ready': field.canHarvest,
							  'harvest-blink': harvestMode && field.canHarvest
						  }" @click="handleFieldClick(index)">
						<image v-if="!field.isUnlocked" src="../../static/island/huatian/suo.png" class="suo"></image>
						<image v-if="field.flower && field.growthCompleted"
							:src="`../../static/island/huatian/flower${field.flowerType}.png`" class="flower"></image>
						<image v-if="field.seedStage && field.isGrowing" src="../../static/island/huatian/zongzi.png"
							class="flower"></image>
						<image v-if="field.hasWeed && field.isUnlocked" src="../../static/island/huatian/zacao.png"
							class="zacao"></image>
						<image
							:src="field.isUnlocked ? '../../static/island/huatian/tian.png' : '../../static/island/huatian/tian_suo.png'"
							class="tian"></image>
						<image v-if="field.canHarvest" src="../../static/island/huatian/souhuo.png" class="souhuo">
						</image>
						<view class="timer" v-if="field.isGrowing">
							<image src="../../static/island/huatian/timer.png" class="icon"></image>
							<text>{{formatTime(field.remainingTime)}}</text>
						</view>
					</view>
					<view class="blank" v-if="index == 2 || index == 9 || index == 12"></view>
				</block>

			</view>
			<view class="close" @click="onClose">
				<image src="../../static/island/UI/btn_close.png" class="close"></image>
			</view>
			<view class="btn_list">
				<view class="item item1" @click="showUnlockConfirm">
					解锁荒地
				</view>
				<view class="item item2" @click="removeWeed">
					除草
				</view>
				<view class="item item3" @click="showFlowerSelect">
					播种
				</view>
				<view class="item item4" @click="enterHarvestMode">
					收获
				</view>

			</view>
			<view class="select_zz" v-if="showFlowerSelection">
				<view class="item" v-for="(flower, idx) in flowers" :key="idx" @click="selectFlower(idx)"
					v-if="flower.count > 0">
					<view class="img">
						<image :src="`../../static/island/huatian/flower${idx+1}.png`"></image>
					</view>
					<view class="foot">
						{{flower.count}}
					</view>
				</view>
				<view class="jiantou">
					<image class="jiantou" src="../../static/island/huatian/jiantou.png"></image>
				</view>
			</view>
		</view>

		<!-- 解锁确认对话框 -->
		<view class="confirm-dialog" v-if="showUnlockDialog">
			<view class="dialog-content">
				<view class="dialog-title">解锁荒地</view>
				<view class="dialog-text">是否支付{{nextLandPrice}}铃钱解锁荒地？</view>
				<view class="dialog-buttons">
					<view class="btn-cancel" @click="cancelUnlock">取消</view>
					<view class="btn-confirm" @click="confirmUnlock">确认</view>
				</view>
			</view>
		</view>

		<view class="guild" v-if="showGuide">
			<view class="content">
				"欢迎来到花田!在这里,你将成为农场的主人,体验种植和经营农场的乐趣。首先,让我们来开垦一块土地吧。只需支付铃钱即可解锁!"
			</view>
			<view class="title">
				罗奇
			</view>
			<view class="npc">
				<image src="../../static/island/npc.png"></image>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: 'TaskDialog',
		components: {

		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 用户ID
				ssoId: 0,
				// 田地数据
				fields: Array(20).fill().map(() => ({
					id: 0, // 后端数据库ID
					tid: 0, // 对应的土地表ID
					isUnlocked: false,
					hasWeed: false,
					flower: false,
					flowerType: null,
					isGrowing: false,
					growthCompleted: false,
					canHarvest: false,
					remainingTime: 0,
					timer: null,
					seedStage: false,
					plantTime: '',
					state: 0 // 与后端对应的状态
				})),

				// 花的数据
				flowers: [],
				// 种子数据
				seeds: [],
				// 用户铃钱
				money: 0,
				// 下一块要解锁的土地价格
				nextLandPrice: 100,
				// 选择状态
				selectedFlowerIndex: -1,
				showFlowerSelection: false,
				showGuide: false,
				plantMode: false,
				showUnlockDialog: false, // 解锁确认对话框显示状态
				// 当前选择的土地ID
				selectedLandId: 0,
				// 成长检查定时器
				growthCheckTimer: null,
				weedMode: false, // 添加除草模式状态
				weedyFields: [], // 添加可除草的地块列表
				harvestMode: false, // 添加收获模式状态
				harvestableFields: [], // 添加可收获的地块列表
			}
		},
		onLoad() {
			// 初始化获取数据
			this.fetchData();
		},
		onShow() {
			// 重新获取数据
			this.fetchData();
		},
		beforeDestroy() {
			// 清除所有定时器
			this.fields.forEach(field => {
				if (field.timer) {
					clearInterval(field.timer);
				}
			});

			// 清除生长检查定时器
			if (this.growthCheckTimer) {
				clearInterval(this.growthCheckTimer);
			}
		},
		methods: {
			// 关闭界面
			onClose() {
				this.$emit('close');
			},

			// 初始化获取数据
			async fetchData() {
				console.log("uuid", getApp().globalData.uuid)
				try {
					uni.request({
						url: this.$apiHost + '/Game/huatian/index',
						method: 'POST',
						data: {
							uuid: getApp().globalData.uuid,
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'sign': getApp().globalData.headerSign,
						},
						success: (res) => {
							if (res.data && res.data.code === 0) {
								// 更新用户铃钱
								this.money = res.data.money;

								// 更新种子数据
								this.seeds = res.data.seeds || [];

								// 更新背包数据
								const bagItems = res.data.bag_list || [];

								// 更新花的数据（背包中type=1的是种子）
								this.flowers = [];
								for (let i = 1; i <= 7; i++) {
									// 找到对应的种子数量
									const seedBag = bagItems.find(item => item.type === 1 && item.tid ===
										i);

									this.flowers.push({
										id: i,
										name: this.seeds[i - 1]?.name || `花${i}`,
										count: seedBag ? seedBag.num : 0
									});
								}

								// 更新土地数据
								const tudiList = res.data.tudi_list || [];

								// 重置田地数据
								this.fields = Array(20).fill().map((_, index) => ({
									id: 0,
									tid: index + 1,
									isUnlocked: false,
									hasWeed: false,
									flower: false,
									flowerType: null,
									isGrowing: false,
									growthCompleted: false,
									canHarvest: false,
									remainingTime: 0,
									timer: null,
									seedStage: false,
									plantTime: '',
									state: 0
								}));

								// 更新已解锁的田地状态
								tudiList.forEach(land => {
									const fieldIndex = land.tid - 1;
									if (fieldIndex >= 0 && fieldIndex < this.fields.length) {
										const field = this.fields[fieldIndex];

										field.id = land.id;
										field.tid = land.tid;
										field.isUnlocked = true;
										field.state = land.state;
										field.plantTime = land.plant_time;

										// 根据状态设置不同的显示
										if (land.state === -1) {
											// 杂草地
											field.hasWeed = true;
										} else if (land.state === 0) {
											// 待播种的空地
											field.hasWeed = false;
										} else if (land.state >= 1 && land.state <= 7) {
											// 种植了花
											field.hasWeed = false;
											field.flowerType = land.zzid;

											// 计算是否已经成熟
											if (land.plant_time) {
												const plantTime = new Date(land.plant_time);
												const now = new Date();
												const growthHours = (now - plantTime) / (1000 *
													60 * 60);

												// 获取对应种子的生长周期
												const seed = this.seeds.find(s => s.id === land
													.state);
												const limitHours = seed ? seed.limit_time : 0;

												if (growthHours >= limitHours) {
													// 已成熟
													field.flower = true;
													field.growthCompleted = true;
													field.canHarvest = true;
												} else {
													// 未成熟，显示生长中
													field.isGrowing = true;
													field.seedStage = true;
													field.remainingTime = Math.ceil((limitHours -
														growthHours) * 60 * 60);
													this.startGrowthTimer(fieldIndex);
												}
											}
										} else if (land.state === 99) {
											// 成熟待收割
											field.hasWeed = false;
											field.flower = true;
											field.flowerType = land.flowerType || land
												.zzid;
											field.growthCompleted = true;
											field.canHarvest = true;
										}
									}
								});

								// 找到下一块可解锁土地的价格
								for (let i = 0; i < this.fields.length; i++) {
									if (!this.fields[i].isUnlocked) {
										console.log("this.landpric", i + 1)
										// 从服务端获取土地价格
										uni.request({
											url: this.$apiHost + '/Game/huatian/get_land_price',
											method: 'POST',
											data: {
												uuid: getApp().globalData.uuid,
												land_id: i + 1
											},
											header: {
												'Content-Type': 'application/x-www-form-urlencoded',
												'sign': getApp().globalData.headerSign,
												uuid: getApp().globalData.uuid,
											},
											success: (res) => {
												console.log('res.data', res.data);
												if (res.data && res.data.code === 0) {
													this.nextLandPrice = res.data.data.price;
												} else {
													// 如果获取失败，使用默认值
													this.nextLandPrice = 100;
												}
											},
											fail: (err) => {
												console.error('获取土地价格异常', err);
												// 如果获取失败，使用默认值
												this.nextLandPrice = 100;
											}
										});
										break;
									}
								}

								// 启动定时检查植物生长状态
								this.startGrowthCheck();
							} else {
								uni.showToast({
									title: res.data?.msg || '获取数据失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('获取数据异常', err);
							uni.showToast({
								title: '网络异常，请重试',
								icon: 'none'
							});
						}
					});
				} catch (error) {
					console.error('获取数据异常', error);
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
				}
			},

			// 显示解锁确认对话框
			showUnlockConfirm() {
				this.showUnlockDialog = true;
			},

			// 取消解锁
			cancelUnlock() {
				this.showUnlockDialog = false;
			},

			// 确认解锁
			async confirmUnlock() {
				try {
					uni.request({
						url: this.$apiHost + '/Game/huatian/unlock_land',
						method: 'POST',
						data: {
							uuid: getApp().globalData.uuid,
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'sign': getApp().globalData.headerSign,
							uuid: getApp().globalData.uuid,
						},
						success: (res) => {
							if (res.data && res.data.code === 0) {
								uni.showToast({
									title: '解锁成功',
									icon: 'success'
								});

								// 更新用户铃钱
								this.money = res.data.data.money;

								// 重新获取数据
								this.fetchData();
							} else {
								uni.showToast({
									title: res.data?.msg || '解锁失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('解锁土地异常', err);
							uni.showToast({
								title: '网络异常，请重试',
								icon: 'none'
							});
						}
					});
				} catch (error) {
					console.error('解锁土地异常', error);
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
				}

				this.showUnlockDialog = false;
			},

			// 除草
			async removeWeed() {
				if (this.weedMode) {
					// 如果已经在除草模式，则退出
					this.weedMode = false;
					this.weedyFields = [];
					return;
				}

				// 找到所有有杂草的已解锁土地
				this.weedyFields = this.fields.filter(field => field.isUnlocked && field.hasWeed);

				if (this.weedyFields.length === 0) {
					uni.showToast({
						title: '没有需要除草的土地',
						icon: 'none'
					});
					return;
				}

				// 进入除草模式
				this.weedMode = true;
				uni.showToast({
					title: '请点击需要除草的土地',
					icon: 'none'
				});
			},

			// 进入收获模式
			enterHarvestMode() {
				if (this.harvestMode) {
					// 如果已经在收获模式，则退出
					this.harvestMode = false;
					this.harvestableFields = [];
					return;
				}

				// 找到所有可收获的土地
				this.harvestableFields = this.fields.filter(field => field.canHarvest);

				if (this.harvestableFields.length === 0) {
					uni.showToast({
						title: '没有可收获的花',
						icon: 'none'
					});
					return;
				}

				// 进入收获模式
				this.harvestMode = true;
				uni.showToast({
					title: '请点击需要收获的土地',
					icon: 'none'
				});
			},

			// 显示花的选择
			showFlowerSelect() {
				if (this.showFlowerSelection) {
					this.showFlowerSelection = false;
					return;
				}
				// 检查是否有可播种的土地
				const canPlantFields = this.fields.filter(field => field.isUnlocked && !field.hasWeed && !field.flower && !
					field.isGrowing);

				if (canPlantFields.length === 0) {
					uni.showToast({
						title: '没有可播种的土地',
						icon: 'none'
					});
					return;
				}

				this.showFlowerSelection = true;
				this.plantMode = false;
				this.selectedFlowerIndex = -1;
			},

			// 选择花
			selectFlower(idx) {
				this.selectedFlowerIndex = idx;
				this.showFlowerSelection = false;
				this.plantMode = true;
			},

			// 点击田地
			handleFieldClick(index) {
				if (this.weedMode) {
					// 在除草模式下，只处理有草的地块
					if (this.fields[index].hasWeed) {
						this.removeWeedFromField(index);
					}
					return;
				}

				if (this.harvestMode) {
					// 在收获模式下，只处理可收获的地块
					if (this.fields[index].canHarvest) {
						this.harvestField(this.fields[index].id);
					}
					return;
				}
				if (this.plantMode) {
					if (this.fields[index].canHarvest) {
					}
					this.handleFieldClickBZ(index);
					return;
				}

				// 原有的种植逻辑
				if (!this.fields[index].isUnlocked) {
					uni.showToast({
						title: '该地块未解锁',
						icon: 'none'
					});
					return;
				}

				if (this.fields[index].flower) {
					if (this.fields[index].canHarvest) {
						this.harvestField(this.fields[index].id);
					} else {
						uni.showToast({
							title: '花朵正在生长中',
							icon: 'none'
						});
					}
					return;
				}

				// 打开种子选择弹窗
				this.currentFieldIndex = index;
				this.showSeedSelector = true;
			},
			// 点击田地
			async handleFieldClickBZ(index) {
				const field = this.fields[index];

				// 已解锁土地且处于播种模式
				if (this.plantMode && field.isUnlocked && !field.hasWeed && !field.flower && !field.isGrowing) {
					// 设置当前选中的土地
					this.selectedLandId = field.id;

					// 播种
					try {
						uni.request({
							url: this.$apiHost + '/Game/huatian/plant_seed',
							method: 'POST',
							data: {
								uuid: getApp().globalData.uuid,
								land_id: field.id,
								seed_id: this.selectedFlowerIndex + 1
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded',
								'sign': getApp().globalData.headerSign,
								uuid: getApp().globalData.uuid,
							},
							success: (res) => {
								if (res.data && res.data.code === 0) {
									// 更新土地状态
									field.isGrowing = true;
									field.seedStage = true;
									field.flowerType = this.selectedFlowerIndex + 1;
									field.state = this.selectedFlowerIndex + 1;
									field.plantTime = res.data.data.plantTime;

									// 计算剩余生长时间
									const limitTimeHours = res.data.data.limitTime;
									field.remainingTime = limitTimeHours * 60 * 60;

									// 开始计时
									this.startGrowthTimer(index);

									// 更新种子数量
									const flowerData = this.flowers[this.selectedFlowerIndex];
									if (flowerData && flowerData.count > 0) {
										flowerData.count--;
									}

									// 退出播种模式
									this.plantMode = false;

									uni.showToast({
										title: '播种成功',
										icon: 'success'
									});
								} else {
									uni.showToast({
										title: res.data?.msg || '播种失败',
										icon: 'none'
									});
									this.plantMode = false;
								}
							},
							fail: (err) => {
								console.error('播种异常', err);
								uni.showToast({
									title: '网络异常，请重试',
									icon: 'none'
								});
								this.plantMode = false;
							}
						});
					} catch (error) {
						console.error('播种异常', error);
						uni.showToast({
							title: '网络异常，请重试',
							icon: 'none'
						});
						this.plantMode = false;
					}
				} else if (field.canHarvest) {
					// 收获花朵
					this.harvestField(field.id);
				}
			},

			// 从特定地块移除杂草
			removeWeedFromField(index) {
				// 调用除草API
				uni.request({
					url: this.$apiHost + '/Game/huatian/remove_weed',
					method: 'POST',
					data: {
						uuid: getApp().globalData.uuid,
						land_id: this.fields[index].id
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'sign': getApp().globalData.headerSign,
						uuid: getApp().globalData.uuid,
					},
					success: (res) => {
						if (res.data && res.data.code === 0) {
							// 更新地块状态
							this.fields[index].hasWeed = false;
							this.fields[index].state = 0;

							// 从可除草地块列表中移除
							this.weedyFields = this.weedyFields.filter(f => f.id !== this.fields[index].id);

							uni.showToast({
								title: '除草成功',
								icon: 'success'
							});

							// 如果所有草都已清除，退出除草模式
							if (this.weedyFields.length === 0) {
								this.weedMode = false;
								uni.showToast({
									title: '所有杂草已清除',
									icon: 'success'
								});
							}
						} else {
							uni.showToast({
								title: res.data?.msg || '除草失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('除草异常', err);
						uni.showToast({
							title: '网络异常，请重试',
							icon: 'none'
						});
					}
				});
			},

			// 开始生长计时器
			startGrowthTimer(fieldIndex) {
				const field = this.fields[fieldIndex];

				// 清除可能存在的旧定时器
				if (field.timer) {
					clearInterval(field.timer);
				}

				field.timer = setInterval(() => {
					field.remainingTime--;

					if (field.remainingTime <= 0) {
						// 生长完成
						clearInterval(field.timer);
						field.isGrowing = false;
						field.seedStage = false;
						field.growthCompleted = true;
						field.flower = true;
						field.canHarvest = true;
					}
				}, 1000);
			},

			// 收获特定地块
			async harvestField(landId) {
				console.log("land", landId);
				try {
					uni.request({
						url: this.$apiHost + '/Game/huatian/harvest',
						method: 'POST',
						data: {
							uuid: getApp().globalData.uuid,
							land_id: landId
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'sign': getApp().globalData.headerSign,
							uuid: getApp().globalData.uuid,
						},
						success: (res) => {
							if (res.data && res.data.code === 0) {
								// 找到对应的田地
								const fieldIndex = this.fields.findIndex(f => f.id === landId);

								if (fieldIndex >= 0) {
									const field = this.fields[fieldIndex];

									// 重置状态
									field.flower = false;
									field.flowerType = null;
									field.growthCompleted = false;
									field.canHarvest = false;
									field.hasWeed = true;
									field.state = -1;

									// 如果有定时器，清除它
									if (field.timer) {
										clearInterval(field.timer);
										field.timer = null;
									}
								}

								// 重新获取数据以更新背包
								this.fetchData();

								uni.showToast({
									title: `收获了${res.data.data.harvestNum}朵花`,
									icon: 'success'
								});

								// 从可收获地块列表中移除
								this.harvestableFields = this.harvestableFields.filter(f => f.id !==
									landId);

								// 如果所有花都已收获，退出收获模式
								if (this.harvestableFields.length === 0) {
									this.harvestMode = false;
									uni.showToast({
										title: '所有花已收获',
										icon: 'success'
									});
								}
							} else {
								uni.showToast({
									title: res.data?.msg || '收获失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('收获异常', err);
							uni.showToast({
								title: '网络异常，请重试',
								icon: 'none'
							});
						}
					});
				} catch (error) {
					console.error('收获异常', error);
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
				}
			},

			// 收获所有可收获的花
			async harvest() {
				const harvestFields = this.fields.filter(field => field.canHarvest);

				if (harvestFields.length === 0) {
					uni.showToast({
						title: '没有可收获的花',
						icon: 'none'
					});
					return;
				}

				try {
					for (const field of harvestFields) {
						await this.harvestField(field.id);
					}
				} catch (error) {
					console.error('批量收获异常', error);
				}
			},

			// 格式化时间显示
			formatTime(seconds) {
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.floor((seconds % 3600) / 60);
				const secs = seconds % 60;
				
				// 获取当前时间，用于控制冒号闪烁
				const now = new Date();
				const blinkState = now.getSeconds() % 2 === 0;
				
				// 格式化为 "HH:MM" 格式
				return `${hours.toString().padStart(2, '0')}${blinkState ? ':' : ' '}${minutes.toString().padStart(2, '0')}`;
			},

			// 开始定时检查植物生长状态
			startGrowthCheck() {
				// 清除可能存在的旧定时器
				if (this.growthCheckTimer) {
					clearInterval(this.growthCheckTimer);
				}

				// 每分钟检查一次植物生长状态
				this.growthCheckTimer = setInterval(async () => {
					try {
						uni.request({
							url: this.$apiHost + '/Game/huatian/check_growth',
							method: 'POST',
							data: {
								uuid: getApp().globalData.uuid,
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded',
								'sign': getApp().globalData.headerSign,
								uuid: getApp().globalData.uuid,
							},
							success: (res) => {
								if (res.data && res.data.code === 0) {
									const growthData = res.data.data || [];

									// 更新每块土地的状态
									growthData.forEach(item => {
										if (item.isReady) {
											// 找到对应的田地
											const field = this.fields.find(f => f.id ===
												item.landId);

											if (field) {
												// 更新为可收获状态
												field.isGrowing = false;
												field.seedStage = false;
												field.growthCompleted = true;
												field.flower = true;
												field.canHarvest = true;
												field.state = 99;

												// 清除定时器
												if (field.timer) {
													clearInterval(field.timer);
													field.timer = null;
												}
											}
										}
									});
								}
							},
							fail: (err) => {
								console.error('检查生长状态异常', err);
							}
						});
					} catch (error) {
						console.error('检查生长状态异常', error);
					}
				}, 60000); // 60秒检查一次
			},
		},

	}
</script>



<style lang="scss">
	@import './HuaTian.scss';

	@keyframes weedBlink {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		50% {
			opacity: 0.5;
			transform: scale(1.1);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	.weed-blink {
		animation: weedBlink 1s infinite;
		z-index: 10;
	}

	@keyframes harvestBlink {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		50% {
			opacity: 0.5;
			transform: scale(1.1);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	.harvest-blink {
		animation: harvestBlink 1s infinite;
		z-index: 10;
	}
</style>