<template>
	<view>
		<view class="header">
			<view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
				<view class="searchBox_left" @click="back">
					<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
				</view>
				<view class="searchBox_mid">购物车({{ shopCarTotal }})</view>
				<view class="searchBox_right">
					<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
				</view>
			</view>
		</view>
		<view class="empty" v-if="shopCarTotal == 0">
			<image src="https://static.hshuishang.com/shopCar_no.png"></image>
		</view>
		<view class="main" v-else>
			<view class="deleteIcon" @click="deleteItem">
				<u-icon name="trash" size="50rpx"></u-icon>
			</view>
			<view class="is_day " v-if="isDayshow">
				<view class="footer_all" @click="is_day_checked"
					style="color: orange; font-size: 35rpx; font-weight: bolder;">
					<image v-if="!isDaychecked"
						src="https://static.hshuishang.com/property-img-file/com_check1.png">
					</image>
					<image v-if="isDaychecked"
						src="https://static.hshuishang.com/property-img-file/com_check2.png">
					</image>
					当日达
				</view>
				<view class="goodsList">
					<view v-for="(carItem, carIndex) in isDayCarList" :key="carItem.id" :index="carIndex">
						<view class="goodsItem_supplier">
							<view class="goodsItem_left" @click="supplierCheck(carItem, true)">
								<image v-if="!carItem.supplierChecked"
									src="https://static.hshuishang.com/property-img-file/com_check1.png">
								</image>
								<image v-if="carItem.supplierChecked"
									src="https://static.hshuishang.com/property-img-file/com_check2.png">
								</image>
							</view>
							<view class="goodsItem_tit">
								{{ carItem.supplier_name }}
							</view>
						</view>
						<view class="goodsItem" v-for="(item, index) in carItem.commodity_cart_and_goods_model"
							:key="item.id">
							<view class="goodsItem_left" @click="DayChecked(item)">
								<image v-if="!item.checked"
									src="https://static.hshuishang.com/property-img-file/com_check1.png">
								</image>
								<image v-if="item.checked"
									src="https://static.hshuishang.com/property-img-file/com_check2.png">
								</image>
							</view>
							<view class="goodsItem_right">
								<view class="goodsItem_msg">
									<view class="goodsItem_msg_img">
										<view class="tag tag-img">当日达</view>
										<image :src="picUrl + item.commodity_goods_info.commodity_pic">
										</image>
									</view>
									<view class="goodsItem_msg_right">
										<view class="goodsItem_msg_right_tit">
											{{ item.commodity_goods_info.goods_name }}
										</view>
										<view class="goodsItem_msg_right_subTit">
											{{ item.commodity_goods_info.goods_intro }}
										</view>
										<view class="goodsItem_msg_right_msg">
											<view class="goodsItem_msg_right_msg_left">
												<span>￥</span>{{ item.price }}
												<!-- {{ item.commodity_goods_info.group_buy_price ?
													item.commodity_goods_info.group_buy_price :
													item.commodity_goods_info.sales_price }} -->
												<span>/{{ item.commodity_goods_info.goods_unit }}</span>
											</view>
											<view class="goodsItem_msg_right_msg_right">
												<u-number-box v-model="item.count" :asyncChange="true" min="0">
													<template #minus>
														<view class="minus"
															@click="minus(carItem, index, carItem.commodity_cart_and_goods_model)">
															<u-icon name="minus" size="32" bold></u-icon>
														</view>
													</template>
													<template #input><text style="width: 80rpx; text-align: center"
															class="input">{{ item.count }}</text>
													</template>
													<template #plus>
														<view class="plus" @click="add(carItem, index)">
															<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
														</view>
													</template>
												</u-number-box>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="is_day" v-if="parcelPostshow" style="margin-top: 20rpx;">
				<view class="footer_all" @click="parcel_post_checked"
					style="color: orange; font-size: 35rpx; font-weight: bolder;">
					<image v-if="!isParcelPostchecked"
						src="https://static.hshuishang.com/property-img-file/com_check1.png">
					</image>
					<image v-if="isParcelPostchecked"
						src="https://static.hshuishang.com/property-img-file/com_check2.png">
					</image>
					包邮
				</view>
				<view class="goodsList">
					<view v-for="(carItem, carIndex) in shopCarList" :key="carItem.id" :index="carIndex">
						<view class="goodsItem_supplier">
							<view class="goodsItem_left" @click="supplierCheck(carItem, false)">
								<image v-if="!carItem.supplierChecked"
									src="https://static.hshuishang.com/property-img-file/com_check1.png">
								</image>
								<image v-if="carItem.supplierChecked"
									src="https://static.hshuishang.com/property-img-file/com_check2.png">
								</image>
							</view>
							<view class="goodsItem_tit">
								{{ carItem.supplier_name }}
							</view>
						</view>
						<view class="goodsItem" v-for="(item, index) in carItem.commodity_cart_and_goods_model"
							:key="item.id">
							<view class="goodsItem_left" @click="changeChecked(item)">
								<image v-if="!item.checked"
									src="https://static.hshuishang.com/property-img-file/com_check1.png">
								</image>
								<image v-if="item.checked"
									src="https://static.hshuishang.com/property-img-file/com_check2.png">
								</image>
							</view>
							<view class="goodsItem_right">
								<view class="goodsItem_msg">
									<view class="goodsItem_msg_img">
										<image :src="picUrl + item.commodity_goods_info.commodity_pic">
										</image>
									</view>
									<view class="goodsItem_msg_right">
										<view class="goodsItem_msg_right_tit">
											{{ item.commodity_goods_info.goods_name }}
										</view>
										<view class="goodsItem_msg_right_subTit">
											{{ item.commodity_goods_info.goods_intro }}
										</view>
										<view class="goodsItem_msg_right_msg">
											<view class="goodsItem_msg_right_msg_left">
												<span>￥</span>{{ item.price }}
												<!-- {{ item.commodity_goods_info.group_buy_price ?
													item.commodity_goods_info.group_buy_price :
													item.commodity_goods_info.sales_price }} -->
												<span>/{{ item.commodity_goods_info.goods_unit }}</span>
											</view>
											<view class="goodsItem_msg_right_msg_right">
												<u-number-box v-model="item.count" :asyncChange="true" min="0">
													<template #minus>
														<view class="minus"
															@click="minus(item, index, carItem.commodity_cart_and_goods_model)">
															<u-icon name="minus" size="32" bold></u-icon>
														</view>
													</template>
													<template #input>
														<text style="width: 80rpx; text-align: center" class="input">{{
															item.count }}</text>
													</template>
													<template #plus>
														<view class="plus" @click="add(item, index)">
															<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
														</view>
													</template>
												</u-number-box>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="footer">
				<view class="footer_left">
					<view class="footer_all" @click="allChecked">
						<image v-if="!isAllchecked"
							src="https://static.hshuishang.com/property-img-file/com_check1.png">
						</image>
						<image v-if="isAllchecked"
							src="https://static.hshuishang.com/property-img-file/com_check2.png">
						</image>
						全选
					</view>
					<view class="footer_total">
						<span>合计</span>
						￥{{ shopMoney }}
					</view>
				</view>
				<view class="footer_right" @click="submitOrder">结算</view>
			</view>
		</view>


	</view>
</template>

<script>
import {
	apiArr
} from "../../../api/shop";
import {
	picUrl,
	menuButtonInfo,
	request,
	NavgateTo
} from "../../../utils";
export default {
	data() {
		return {
			picUrl,
			top: "",
			localHeight: "",
			value: 3,
			type: "error",
			shopCarList: [],
			isDayCarList: [],
			shopCarTotal: 0,
			shopMoney: 0,
			isAllchecked: false, // 全选
			isDaychecked: false, // 当日达
			isDayshow: false,
			isParcelPostchecked: false,
			parcelPostshow: false,
			is_group_buy: '',
			is_adver: ''
		};
	},
	// watch: {
	// 	// console.log(this.isDaychecked);
	// 	isDaychecked(e) {
	// 		console.log('当日达状态', e);
	// 	},
	// 	isParcelPostchecked(e) {
	// 		console.log('包邮状态', e);
	// 	}
	// 	isAllchecked(e) {
	// 		console.log('全选状态', e);
	// 	}
	// },
	methods: {
		back() {
			NavgateTo("1");
		},

		// 商家单选框全选/取消全选
		supplierCheck(carItem, isDay) {
			carItem.supplierChecked = !carItem.supplierChecked;
			carItem.commodity_cart_and_goods_model.forEach(goods => {
				goods.checked = carItem.supplierChecked;
			});
			this.calcTotal();

			// 更新当日达或包邮全选状态
			if (isDay) {
				this.isDaychecked = this.isDayCarList.every(item =>
					item.commodity_cart_and_goods_model.every(goods => goods.checked)
				);
			} else {
				this.isParcelPostchecked = this.shopCarList.every(item =>
					item.commodity_cart_and_goods_model.every(goods => goods.checked)
				);
			}

			// 更新全选状态
			this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
		},

		// 结算
		submitOrder() {
			let arr = [];
			// 收集包邮购物车中选中的商品
			this.shopCarList.forEach((item) => {
				item.commodity_cart_and_goods_model.forEach((ite) => {
					if (ite.checked) {
						ite.supplier_name = item.supplier_name;
						arr.push(ite);
					}
				})
			});
			// 收集当日达购物车中选中的商品
			this.isDayCarList.forEach((item) => {
				item.commodity_cart_and_goods_model.forEach((ite) => {
					if (ite.checked) {
						ite.supplier_name = item.supplier_name;
						arr.push(ite);
					}
				})
			});

			if (arr.length == 0) {
				this.$u.toast("请选择商品");
				return;
			}
			// 给每个商品添加isAdver=true参数
			const updatedArr = arr.map(item => ({
				...item,
				isAdver: item.adver_id ? true : ''
			}));
			// NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`);
			NavgateTo(`../goodsSubmit/index?shopCarList=${JSON.stringify(updatedArr)}`);
		},

		// 获取购物车列表
		getShopCar() {
			const params = {
				is_group_buy: this.is_group_buy,
				is_adver: this.is_adver
			}
			request(apiArr.getCar, "POST", params).then((res) => {
				if (res.normal_cart_list.length > 0) {
					res.normal_cart_list.forEach((item) => {
						item.checked = false;
						item.supplierChecked = false;
					})
					this.parcelPostshow = true;
					this.shopCarList = res.normal_cart_list
				} else {
					res.normal_cart_list.forEach((item) => {
						item.checked = false;
						item.supplierChecked = false;
					})
					this.parcelPostshow = false;
					this.shopCarList = []
				}

				if (res.same_day_cart_list.length > 0) {
					res.same_day_cart_list.forEach((item) => {
						item.checked = false;
						item.supplierChecked = false;
					})
					this.isDayshow = true;
					this.isDayCarList = res.same_day_cart_list
				} else {
					res.normal_cart_list.forEach((item) => {
						item.checked = false;
						item.supplierChecked = false;
					})
					this.isDayshow = false;
					this.isDayCarList = []
				}

				// res.normal_cart_list.forEach((item) => {
				// 	if (item.is_support_same_day == false) {
				// 		this.isDayshow = false;
				// 		this.parcelPostshow = true;
				// 		this.shopCarList = item.commodity_cart_and_goods_model;
				// 		item.checked = false;
				// 	} else {
				// 		this.isDayshow = true;
				// 		this.parcelPostshow = false;
				// 		this.isDayCarList = item.commodity_cart_and_goods_model;
				// 		item.checked = false;
				// 	}
				// });

				this.shopCarTotal = res.total;
			});
		},

		// 单个修改
		changeChecked(item) {
			item.checked = !item.checked;
			this.calcTotal();

			// 找到对应的商家并更新商家选中状态
			this.shopCarList.forEach(carItem => {
				if (carItem.commodity_cart_and_goods_model.includes(item)) {
					carItem.supplierChecked = carItem.commodity_cart_and_goods_model.every(goods => goods.checked);
				}
			});

			// 检查当日达是否全选
			this.isDaychecked = this.isDayCarList.every(carItem =>
				carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
			);
			// 检查包邮是否全选
			this.isParcelPostchecked = this.shopCarList.every(carItem =>
				carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
			);
			// 检查全选状态
			this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
		},
		DayChecked(item) {
			item.checked = !item.checked;
			this.calcTotal();

			// 找到对应的商家并更新商家选中状态
			this.isDayCarList.forEach(carItem => {
				if (carItem.commodity_cart_and_goods_model.includes(item)) {
					carItem.supplierChecked = carItem.commodity_cart_and_goods_model.every(goods => goods.checked);
				}
			});

			// 检查当日达是否全选
			this.isDaychecked = this.isDayCarList.every(carItem =>
				carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
			);
			// 检查包邮是否全选
			this.isParcelPostchecked = this.shopCarList.every(carItem =>
				carItem.commodity_cart_and_goods_model.every(goods => goods.checked)
			);
			// 检查全选状态
			this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;
		},
		// 全选
		allChecked() {
			this.isAllchecked = !this.isAllchecked;
			this.isDaychecked = this.isAllchecked;
			this.isParcelPostchecked = this.isAllchecked;

			// 设置当日达购物车商品和商家选中状态
			this.isDayCarList.forEach(carItem => {
				carItem.supplierChecked = this.isAllchecked;
				carItem.commodity_cart_and_goods_model.forEach(goods => {
					goods.checked = this.isAllchecked;
				});
			});

			// 设置包邮购物车商品和商家选中状态
			this.shopCarList.forEach(carItem => {
				carItem.supplierChecked = this.isAllchecked;
				carItem.commodity_cart_and_goods_model.forEach(goods => {
					goods.checked = this.isAllchecked;
				});
			});

			this.calcTotal();
		},

		// 全选当日达
		is_day_checked() {
			this.isDaychecked = !this.isDaychecked;

			// 设置当日达购物车商品和商家选中状态
			this.isDayCarList.forEach(carItem => {
				carItem.supplierChecked = this.isDaychecked;
				carItem.commodity_cart_and_goods_model.forEach(goods => {
					goods.checked = this.isDaychecked;
				});
			});

			// 更新全选状态
			this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;

			this.calcTotal();
		},

		// 全选包邮
		parcel_post_checked() {
			this.isParcelPostchecked = !this.isParcelPostchecked;

			// 设置包邮购物车商品和商家选中状态
			this.shopCarList.forEach(carItem => {
				carItem.supplierChecked = this.isParcelPostchecked;
				carItem.commodity_cart_and_goods_model.forEach(goods => {
					goods.checked = this.isParcelPostchecked;
				});
			});

			// 更新全选状态
			this.isAllchecked = this.isDaychecked && this.isParcelPostchecked;

			this.calcTotal();
		},

		// 计算金额
		calcTotal() {
			let total = 0;
			const currentTime = new Date().getTime();

			// 计算当日达购物车金额
			this.isDayCarList.forEach(carItem => {
				carItem.commodity_cart_and_goods_model.forEach(goods => {
					if (goods.checked) {
						// // 团购活动时间判断
						// const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
						// const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
						// if (currentTime >= startTime && currentTime <= endTime) {
						// 	total += goods.commodity_goods_info.group_buy_price * goods.count;
						// } else {
						// 	total += goods.commodity_goods_info.sales_price * goods.count;
						// }
						total += goods.price * goods.count
					}
				});
			});

			// 计算包邮购物车金额
			this.shopCarList.forEach(carItem => {
				carItem.commodity_cart_and_goods_model.forEach(goods => {
					if (goods.checked) {
						// // 团购活动时间判断
						// const startTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
						// const endTime = new Date(goods.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
						// if (currentTime >= startTime && currentTime <= endTime) {
						// 	total += goods.commodity_goods_info.group_buy_price * goods.count;
						// } else {
						// 	total += goods.commodity_goods_info.sales_price * goods.count;
						// }

						if (goods.is_one_one === 1) {
							total += goods.price * (goods.count / 2)
						} else {
							total += goods.price * goods.count
						}
					}
				});
			});

			this.shopMoney = total.toFixed(2);
		},

		// 减少数量
		// 删除商品的通用方法
		deleteCarItem(carItem, goodsIndex, item) {
			const that = this;
			request(apiArr.deleteCar, "POST", {
				ids: [carItem.id],
				goods_cate: 3,
			}).then((res) => {
				// 从商品列表中移除该商品
				item.splice(goodsIndex, 1);

				// 如果商家没有商品了，移除该商家
				if (item.length === 0) {
					// 分别检查并移除当日达和普通购物车中的商家
					const dayCarIndex = that.isDayCarList.findIndex(dayItem =>
						dayItem.commodity_cart_and_goods_model === item
					);
					const normalCarIndex = that.shopCarList.findIndex(normalItem =>
						normalItem.commodity_cart_and_goods_model === item
					);

					if (dayCarIndex !== -1) {
						that.isDayCarList.splice(dayCarIndex, 1);
						// 如果当日达购物车为空，更新显示状态
						if (that.isDayCarList.length === 0) {
							that.isDayshow = false;
						}
					}
					if (normalCarIndex !== -1) {
						that.shopCarList.splice(normalCarIndex, 1);
						// 如果普通购物车为空，更新显示状态
						if (that.shopCarList.length === 0) {
							that.parcelPostshow = false;
						}
					}
				}

				that.calcTotal();
			}).catch(error => {
				console.error('删除商品失败:', error);
				uni.showToast({
					title: '删除失败，请重试',
					icon: 'none'
				});
			});
		},

		// 减少商品数量
		minus(carItem, goodsIndex, item) {
			const that = this;
			const currentTime = new Date().getTime();

			// 检查商品是否有团购活动且在活动时间内
			const isGroupBuyActive = carItem.commodity_goods_info.group_buy_activity_info &&
				currentTime >= new Date(carItem.commodity_goods_info.group_buy_activity_info?.start_time).getTime() &&
				currentTime <= new Date(carItem.commodity_goods_info.group_buy_activity_info?.end_time).getTime();

			if (carItem.count > 0) {
				if (isGroupBuyActive && carItem.count === carItem.commodity_goods_info.min_order_quantity) {
					// 团购商品达到最小购买数量，提示用户并删除商品
					uni.showToast({
						title: '最少购买' + carItem.commodity_goods_info.min_order_quantity + '件',
						icon: 'none'
					});
					// 更新购物车总数
					that.shopCarTotal = Math.max(0, that.shopCarTotal - carItem.commodity_goods_info.min_order_quantity);
					// 删除商品
					that.deleteCarItem(carItem, goodsIndex, item);
				} else {
					// 正常减少数量
					this.shopCarTotal = carItem.is_one_one === 1 ? Math.max(0, that.shopCarTotal - 2) : Math.max(0, that.shopCarTotal - 1);
					carItem.count = carItem.is_one_one === 1 ? carItem.count - 2 : carItem.count - 1;
					this.handleQuantityChange(carItem.count, carItem);

					// 如果数量减为0，删除商品
					if (carItem.count === 0) {
						that.deleteCarItem(carItem, goodsIndex, item);
					} else {
						// 只在数量不为0时计算总价
						this.calcTotal();
					}
				}
			}
		},

		// 添加数量
		add(carItem, goodsIndex) {
			const currentTime = new Date().getTime();

			const isGroupBuyActive = carItem.commodity_goods_info.group_buy_activity_info &&
				currentTime >= new Date(carItem.commodity_goods_info.group_buy_activity_info?.start_time).getTime() &&
				currentTime <= new Date(carItem.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
			if (isGroupBuyActive) {
				if (carItem.count == 0) {
					carItem.count = carItem.is_one_one === 1 ? 2 : 1
					this.shopCarTotal += carItem.is_one_one === 1 ? 2 : 1;
				} else {
					if (carItem.count == carItem.purchase_limit) {
						uni.showToast({
							title: '您选择的数量已达到最大限购量',
							icon: 'none'
						});
						return
					}
					if (carItem.count == carItem.commodity_goods_info.max_limit_quantity) {
						uni.showToast({
							title: '一次最多购买' + carItem.commodity_goods_info.max_limit_quantity + '件',
							icon: 'none'
						});
						return
					}
					carItem.count += carItem.is_one_one === 1 ? 2 : 1;
					this.shopCarTotal += carItem.is_one_one === 1 ? 2 : 1;
				}
			} else {
				if (carItem.count >= carItem.purchase_limit) {
					uni.showToast({
						title: '您选择的数量已达到最大限购量',
						icon: 'none'
					});
					return
				}
				carItem.count += carItem.is_one_one === 1 ? 2 : 1;
				this.shopCarTotal += carItem.is_one_one === 1 ? 2 : 1;
			}

			const item = carItem.commodity_cart_and_goods_model;
			this.handleQuantityChange(carItem.count, carItem);
			this.calcTotal();
		},

		// 删除
		deleteItem() {
			let that = this;
			uni.showModal({
				title: "提示",
				content: "确定删除所选商品吗",
				success: function (res) {
					if (res.confirm) {
						let ids = [];

						// 收集当日达购物车中选中的商品ID
						that.isDayCarList.forEach(carItem => {
							carItem.commodity_cart_and_goods_model.forEach(goods => {
								if (goods.checked) {
									ids.push(goods.id);
									goods.checked = false;
								}
							});
						});

						// 收集包邮购物车中选中的商品ID
						that.shopCarList.forEach(carItem => {
							carItem.commodity_cart_and_goods_model.forEach(goods => {
								if (goods.checked) {
									ids.push(goods.id);
									goods.checked = false;
								}
							});
						});

						if (ids.length === 0) {
							uni.showToast({
								title: "请选择要删除的商品",
								icon: "none",
								duration: 2000,
							});
							return;
						}

						request(apiArr.deleteCar, "POST", {
							ids,
							goods_cate: 3,
						})
							.then((res) => {
								uni.showToast({
									title: "删除成功",
									duration: 2000,
								});
								that.getShopCar();
								that.calcTotal();
							})
							.catch((err) => {
								console.log(err);
							});
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		//商品数量变化
		handleQuantityChange(val, item) {
			const params = {
				user_id: uni.getStorageSync("userId"),
				goods_id_and_count: [{
					goods_id: item.goods_id,
					count: val,
					price: item.price,
				},],
			};
			request(apiArr.updateCar, "POST", params).then((res) => {
				console.log(res);
				uni.showToast({
					title: "操作成功！",
					success() { },
				});
				return Promise.resolve();
			});
		},
		//获取价格 - 该显示团购价还是正常价
		getPrice(item) {
			const currentTime = new Date().getTime();
			const startTime = new Date(item.commodity_goods_info.group_buy_activity_info?.start_time).getTime();
			const endTime = new Date(item.commodity_goods_info.group_buy_activity_info?.end_time).getTime();
			if (currentTime >= startTime && currentTime <= endTime) {
				return item.commodity_goods_info.group_buy_price;
			} else {
				return item.commodity_goods_info.sales_price;
			}
		},
	},

	onLoad(options) {
		const meun = menuButtonInfo();
		this.top = meun.top;
		this.localHeight = meun.height;
		this.is_group_buy = options.item ? JSON.parse(options.item).is_group_buy : ''
		this.is_adver = options.item ? JSON.parse(options.item).is_adver : ''
		this.getShopCar();
	},
	onShow() {
		this.getShopCar();
		// 取消所有选中状态并重置金额
		this.isAllchecked = false;
		this.isDaychecked = false;
		this.isParcelPostchecked = false;
		this.shopMoney = 0.00;
	},
	onReachBottom() { },


};
</script>

<style>
@import url("./index.css");
</style>