<template>
	<view>
		<div class="header">
			<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
				<div class="searchBox_left" @click="back">
					<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
				</div>
				<div class="searchBox_mid">购物车({{ shopCarTotal }})</div>
				<div class="searchBox_right">
					<u-icon name="arrow-left" size="20px" color="#000"></u-icon>
				</div>
			</div>
		</div>

		<div class="main">
			<div class="deleteIcon" @click="deleteItem">
				<u-icon name="trash" size="50rpx"></u-icon>
			</div>
			<div class="is_day " v-if="isDayshow">
				<div class="footer_all" @click="is_day_checked"
					style="color: orange; font-size: 35rpx; font-weight: bolder;">
					<image v-if="!isDaychecked"
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
					</image>
					<image v-if="isDaychecked"
						src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
					</image>
					当日达
				</div>
				<div class="goodsList">
					<div class="goodsItem" v-for="(item, index) in isDayCarList" :key="item.id">
				
						<div class="goodsItem_left" @click="DayChecked(item, index)">
							<image v-if="!item.checked"
								src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png">
							</image>
							<image v-if="item.checked"
								src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png">
							</image>
						</div>
						<div class="goodsItem_right">
							<div class="goodsItem_msg">
								<div class="goodsItem_msg_img">
									<view class="tag tag-img">当日达</view>
									<image :src="picUrl + item.commodity_goods_info.commodity_pic">
									</image>
								</div>
								<div class="goodsItem_msg_right">
									<div class="goodsItem_msg_right_tit">
										{{ item.commodity_goods_info.goods_name }}
									</div>
									<div class="goodsItem_msg_right_subTit">
										{{ item.commodity_goods_info.goods_intro }}
									</div>
									<div class="goodsItem_msg_right_msg">
										<div class="goodsItem_msg_right_msg_left">
											<span>￥</span>{{ item.commodity_goods_info.sales_price }}
											<span>/{{ item.commodity_goods_info.goods_unit }}</span>
										</div>
										<div class="goodsItem_msg_right_msg_right">
											<u-number-box v-model="item.count" :asyncChange="true" min="0">
												<view slot="minus" class="minus" @click="minus(item, index)">
													<u-icon name="minus" size="32" bold></u-icon>
												</view>
												<text slot="input" style="width: 80rpx; text-align: center"
													class="input">{{ item.count }}</text>
												<view slot="plus" class="plus" @click="add(item, index)">
													<u-icon name="plus" color="#FFFFFF" size="32" bold></u-icon>
												</view>
											</u-number-box>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			

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



			

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

		<div class="empty" v-if="shopCarTotal == 0">
			<image src="http://192.168.0.172:5500/7.15/shop_empty.png"></image>
			<div>
				啥也没有 <br />
				赶紧去shopping吧~
			</div>
		</div>
	</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,
				
			};
		},
		// watch: {
		// 	// console.log(this.isDaychecked);
		// 	isDaychecked(e) {
		// 		console.log('当日达状态', e);
		// 	},
		// 	isParcelPostchecked(e) {
		// 		console.log('包邮状态', e);
		// 	}
		// 	isAllchecked(e) {
		// 		console.log('全选状态', e);
		// 	}
		// },
		methods: {
			back() {
				NavgateTo("1");
			},

			// 结算
			submitOrder() {
				let arr = [];
				this.shopCarList.forEach((item) => {
					if (item.checked) {
						arr.push(item);
					}
				});

				NavgateTo(`../submitOrder/index?shopCarList=${JSON.stringify(arr)}`);
			},

			// 获取购物车列表
			getShopCar() {
				request(apiArr.getCar, "POST", {}).then((res) => {
					console.log(res.total);
					// res.commodity_cart_list.forEach((item) => {
					res.normal_cart_list.forEach((item) => {
						console.log(item.commodity_cart_and_goods_model);
						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.shopCarList = res.commodity_cart_list;
					// this.shopCarList = res.normal_cart_list[0].commodity_cart_and_goods_model;
					this.shopCarTotal = res.total;
				});
			},

			// ceshi() {
			// 	console.log(this.shopCarTotal);

			// 	console.log(this.shopCarList);
			// },

			// 单个修改
			changeChecked(item, index) {
				this.shopCarList[index].checked = !this.shopCarList[index].checked;
				this.calcTotal();
				this.isParcelPostchecked = this.shopCarList.every((item) => item.checked);
				if(this.isDayshow == false) {
					this.isAllchecked = this.shopCarList.every((item) => item.checked);
				}
			},
			DayChecked(item, index) {
				this.isDayCarList[index].checked = !this.isDayCarList[index].checked;
				this.calcTotal();
				this.isDaychecked = this.isDayCarList.every((item) => item.checked);
				if(this.parcelPostshow == false) {
					this.isAllchecked = this.isDayCarList.every((item) => item.checked);
				}
			},
			// 全选
			allChecked() {
				this.isAllchecked = !this.isAllchecked;
				// this.isDaychecked = !this.isDaychecked;
				// this.isParcelPostchecked = !this.isParcelPostchecked;
				// Bug 修复：将 !this.allChecked 改为 !this.isAllchecked
				if (this.isAllchecked) {
					this.isDaychecked = true;
					this.isParcelPostchecked = true;
					this.shopCarList.forEach((item) => {
						item.checked = true;
					});
				} else {
					this.isDaychecked = false;
					this.isParcelPostchecked = false;
					this.shopCarList.forEach((item) => {
						item.checked = false;
					});
				}
				this.calcTotal();
			},

			// 全选当日达
			is_day_checked() {
				this.isDaychecked = !this.isDaychecked;
				this.isAllchecked = !this.isAllchecked
				if (this.isDaychecked) {
					this.isDayCarList.forEach((item) => {
						item.checked = true;
					});
				} else {
					this.isDayCarList.forEach((item) => {
						item.checked = false;
					});
				}
				this.calcTotal();


				console.log("全选当日达");
			},

			// 全选包邮
			parcel_post_checked() {
				this.isParcelPostchecked = !this.isParcelPostchecked;
				this.isAllchecked = !this.isAllchecked
				console.log(this.isParcelPostchecked);
				if (this.isParcelPostchecked) {
					this.shopCarList.forEach((item) => {
						item.checked = true;
					});
				} else {
					this.shopCarList.forEach((item) => {
						item.checked = false;
					});
				}
				
				this.calcTotal();


				console.log("全选包邮");
			},

			// 计算金额
			calcTotal() {
				let total = 0;
				this.shopCarList.forEach((item) => {
					console.log(item);

					if (item.checked) {
						total += item.commodity_goods_info.sales_price * item.count;
					}
				});
				this.shopMoney = total;
			},

			// 减少数量
			minus(item, index) {
				let that = this;
				if (item.count === 1) {
					request(apiArr.deleteCar, "POST", {
						ids: [item.id],
					}).then((res) => {
						that.shopCarList.splice(index, 1);
						that.calcTotal();
					});
				}
				this.shopCarTotal = this.shopCarTotal - 1
				this.shopCarList[index].count = this.shopCarList[index].count - 1;
				this.handleQuantityChange(this.shopCarList[index].count, this.shopCarList[index])
				this.calcTotal();
			},

			// 添加数量
			add(item, index) {
				this.shopCarTotal = this.shopCarTotal + 1
				this.shopCarList[index].count = this.shopCarList[index].count + 1;
				this.handleQuantityChange(this.shopCarList[index].count, this.shopCarList[index])
				this.calcTotal();
			},

			// 删除
			deleteItem() {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "确定删除所选商品吗",
					success: function(res) {
						if (res.confirm) {
							let ids = [];
							that.shopCarList.forEach((item) => {
								if (item.checked) {
									ids.push(item.id);
									item.checked = false;
								}
							});
							request(apiArr.deleteCar, "POST", {
									ids,
								})
								.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,
					}, ],
				};
				request(apiArr.updateCar, "POST", params).then((res) => {
					console.log(res);
					uni.showToast({
						title: "操作成功！",
						success() {},
					});
				});
			},
		},

		onLoad(options) {
			const meun = menuButtonInfo();
			this.top = meun.top;
			this.localHeight = meun.height;
			this.getShopCar();
		},
		onReachBottom() {},


	};
</script>

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