<template>
	<view class="flex-column-start shop-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="status-bar" style="height:60px;"></view>
			<view class="navbar-content">
				<!-- <view class="back-btn" @click="handleBack">
					<view class="back-icon"></view>
				</view> -->
				<view class="search-input-wrapper" style="width:80%;" @click="jumpToSearch">
					<input class="search-input" type="text" placeholder="搜索商品" v-model="searchKeyword"
						@confirm="handleSearch" @focus="handleSearchFocus" />
				</view>
			</view>
		</view>

		<view class="flex-row-start category-content">
			<!-- 左侧：一级分类列表 -->
			<view v-if="categoryList.length" class="category-list-left">
				<view class="flex-center category-item-left" :class="{
					'category-item-left-active': item.id === selectCategoryId,
				}" v-for="(item, index) in categoryList" :key="index" @click="changeCategory(item)">
					<text class="fs-28 app-fc-main app-text-ellipse category-item-left-name">
						{{ item.type_name }}
					</text>
					<view v-if="selectCategoryId === item.id" class="border-line"></view>
				</view>
			</view>
			<!-- 右侧内容区域 -->
			<view class="category-right-wrapper">
				<!-- 右侧下方：商品列表 -->
				<scroll-view class="category-right" scroll-y :refresher-enabled="true"
					:refresher-triggered="refreshTriggered" @refresherrefresh="onRefresh"
					@scrolltolower="onLoadMore">
					<view class="goods-list">
						<good-item v-for="good in goodsList" :key="good.product_id" :ref="`goodItem_${good.product_id}`"
							:data="good" @addToCar="addToCar"  @buyNow="handleBuyNow" />
					</view>
					<view v-if="isLoading" class="loading-wrapper flex-center">
						<uni-load-more status="loading" :show-text="false" />
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- <view class="add-car-view">
			<image class="add-car-icon" :src="`${imgPrefix}mall-shopCar.png`" @click="jumpToCart" />
			<view v-if="cartShowCount" class="fs-20 app-fc-white flex-center cart-count"
				:class="{ 'cart-count-bounce': cartCountBounce }">
				{{ cartShowCount }}
			</view>
		</view> -->

		<!-- 可拖动联系客服组件 -->
		<DraggableContact ref="draggableContact" :onClick="handleContactClick" />

		<add-goods-modal v-if="showModal" :data="addGoodInfo" optText="加入购物车" @change="(val) => (showModal = val)"
			@optAction="optAction" />
		<contact-modal v-if="showContactModal" @close="showContactModal = false" />
		<WeChatCopyModal ref="wechatCopyModal" />
	</view>
</template>

<script>
	import {
		imgPrefix
	} from '@/utils/common';

import GoodItem from "../category/components/GoodItem.vue";
	import AddGoodsModal from "@/components/goods/AddGoodsModal.vue";
	import ContactModal from "@/components/ContactModal.vue";
	import WeChatCopyModal from "@/components/WeChatCopyModal.vue";
	import DraggableContact from "@/components/DraggableContact.vue";

	import {
		getGoodsClassify,
		getGoodsListData,
		addCart,
		getCartList
	} from "@/api/shop";
	import {
		jumpToWeChat
	} from "@/utils/common";

export default {
		components: {
			GoodItem,
			AddGoodsModal,
			ContactModal,
			WeChatCopyModal,
			DraggableContact,
		},
		data() {
			const systemInfo = uni.getSystemInfoSync();
			// 计算搜索输入框宽度，避免被胶囊按钮遮挡
			let searchInputWidth = 500; // 默认宽度
			try {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				if (menuButtonInfo && menuButtonInfo.left) {
					// 屏幕宽度转换为 rpx (750rpx 对应 375px)
					const screenWidthRpx = 750;
					const leftPadding = 32; // navbar-content 左侧 padding
					const backBtnWidth = 60; // 返回按钮宽度
					const backBtnMargin = 20; // 返回按钮右边距
					// 右侧需要留出的空间：屏幕宽度 (px) - 胶囊按钮左边距 (px) + 额外间距 (px)，然后转换为 rpx
					const rightSpacePx = systemInfo.windowWidth - menuButtonInfo.left + 20;
					const rightSpaceRpx = (rightSpacePx / systemInfo.windowWidth) * screenWidthRpx;
					searchInputWidth = screenWidthRpx - leftPadding - backBtnWidth - backBtnMargin - rightSpaceRpx;
				}
			} catch (e) {
				console.log('获取胶囊按钮信息失败', e);
			}
			return {
				statusBarHeight: systemInfo.statusBarHeight || 0,
				searchInputWidth: searchInputWidth,
				imgPrefix,
				searchKeyword: '',
				activeCategoryIndex: 0,
				categoryList: [],
				selectCategoryId: "",
				refreshTriggered: false,
				isLoading: false,
				goodsList: [],
				total: 0,
				page: 1,
				size: 10,
				showModal: false,
				addGoodInfo: null,
				showContactModal: false,
				cartCount: 0,
				cartCountBounce: false,
				petOrderId: '',
				petOrderAddressId: '',
			};
		},
		computed: {
			selectCategory() {
				return (
					this.categoryList.find((item) => item.id === this.selectCategoryId) || {}
				);
			},
			cartShowCount() {
				return this.cartCount > 9 ? "9+" : this.cartCount;
			},
		},
		mounted() {
			this.initData();
		},
		onShow() {
			this.getCartListData();
		},
		watch: {
			selectCategoryId(val) {
				if (val) {
					this.getGoodsList();
				}
			},
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			},
			handleSearch() {
				// 处理搜索逻辑
				this.page = 1;
				this.getGoodsList();
			},
			handleSearchFocus() {
				// 可以跳转到搜索页面
			},
			jumpToSearch() {
				// 跳转到搜索页面
			},
			// 跳转微信客服 - 使用自定义弹窗（与首页在线客服功能一致）
			handleContactClick() {
				// console.log('[shop.vue] handleContactClick called')
				// console.log('[shop.vue] $refs.wechatCopyModal:', this.$refs.wechatCopyModal)
				if (this.$refs.wechatCopyModal && this.$refs.wechatCopyModal.show) {
					this.$refs.wechatCopyModal.show({
						title: '请添加客服号',
						weChatCode: 'Wagoo2025'
					});
					// console.log('[shop.vue] wechatCopyModal.show called')
				} else {
					// console.error('[shop.vue] wechatCopyModal not available, using fallback')
					// 降级方案：直接显示系统弹窗
					uni.showModal({
						title: '提示',
						content: '请添加客服号：Wagoo2025',
						confirmText: '复制微信号',
						showCancel: true,
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								uni.setClipboardData({
									data: 'Wagoo2025',
									success: () => {
										uni.showToast({
											title: '已复制微信号',
											icon: 'success'
										})
									}
								})
							}
						}
					})
				}
			},
			jumpToWeChat,
			initData() {
				this.getCategoryList();
				this.page = 1;
				this.getGoodsList();
				this.getCartListData();
			},
			// 分类列表
			getCategoryList() {
				getGoodsClassify().then((res) => {
					this.categoryList = res?.data || [];
					if (!this.selectCategoryId) {
						this.selectCategoryId = this.categoryList[0]?.id || "";
					}
				});
			},
			changeCategory(data) {
				this.selectCategoryId = data.id;
			},
			// 商品列表
			getGoodsList() {
				if (this.isLoading) return;
				this.isLoading = true;
				getGoodsListData({
					type: this.selectCategoryId?this.selectCategoryId:1,
					p: this.page,
					num: this.size,
					keyword: this.searchKeyword,
				})
					.then((res) => {
						const list = res?.data || [];
						this.goodsList =
							this.page === 1 ? list : [...this.goodsList, ...list];
						this.total = res?.count || 0;
					})
					.finally(() => {
						this.isLoading = false;
						this.refreshTriggered = false;
					});
			},
			onRefresh() {
				this.refreshTriggered = true;
				this.page = 1;
				this.size = 10;
				this.total = 0;
				this.getGoodsList();
			},
			onLoadMore() {
				if (!this.isLoading && this.total > this.goodsList.length) {
					this.page++;
					this.getGoodsList();
				}
			},
			// 加入购物车
			addCartAction(data) {
				addCart(data)
					.then(() => {
						uni.showToast({
							title: "已加入购物车！",
							icon: "none"
						});
						this.getCartListData();
						// 触发购物车数量徽章动画
						this.triggerCartCountAnimation();
					})
					.catch((err) => {
						uni.showToast({
							title: err || "加入购物车失败！",
							icon: "none"
						});
					});
			},
			optAction(data) {
				const {
					product_id,
					type,
					prices,
					product_name,
					product_pic,
					number
				} = data;

				this.addCartAction({
					item_id: product_id,
					item_type: type,
					price_id: prices?.[0]?.price_id,
					price_desc: prices?.[0]?.price_desc,
					item_name: product_name,
					item_price: prices?.[0]?.actual_price,
					number,
					item_pic: product_pic,
					is_select: 1
				});
				this.showModal = false;
				// 触发对应商品项的动画
				this.triggerGoodItemAnimation(product_id);
			},
			// 触发商品项的添加购物车动画
			triggerGoodItemAnimation(goodsId) {
				this.$nextTick(() => {
					const ref = this.$refs[`goodItem_${goodsId}`];
					if (ref && ref[0]) {
						ref[0].triggerAddCartAnimation();
					}
				});
			},
			// 触发购物车数量徽章动画
			triggerCartCountAnimation() {
				this.cartCountBounce = true;
				setTimeout(() => {
					this.cartCountBounce = false;
				}, 600);
			},
			addToCar(good) {
				this.showModal = true;
				this.addGoodInfo = {
					...good
				};
			},
			// 购物车列表
			getCartListData() {
				getCartList({
					p: 1,
					num: 999
				}).then((res) => {
					this.cartCount = (res?.data.list || []).reduce(
						(total, prev) => total + prev.number,
						0
					);
				});
			},
			jumpToCart() {
				uni.navigateTo({
					url: `/pages/client/cart/index`,
				});
			},
			// jumpToDetail(details) {
			// 	uni.navigateTo({
			// 		url: `/pages/client/shop/details?product_id=${details.product_id}&petOrderId=${this.petOrderId}&petOrderAddressId=${this.petOrderAddressId}`,
			// 	});
			// },
			// 立即购买
			handleBuyNow(good) {
				uni.navigateTo({
					url: `/pages/client/order/create`,
					success: (res) => {
						// 通过 eventChannel 向被打开页面传送数据
						res.eventChannel.emit("createOrder", {
							goodList: [{
								item_id: good.product_id,
								item_type: good.type,
								price_id: good.prices?.[0]?.price_id,
								price_desc: good.prices?.[0]?.price_desc,
								item_name: good.product_name,
								item_price: good.prices?.[0]?.actual_price,
								item_pic: good.product_pic,
								number: 1,
								product_id: good.product_id,
								product_name: good.product_name,
								product_pic: good.product_pic,
								goods_price: good.prices?.[0]?.actual_price,
								product_price: good.prices?.[0]?.actual_price,
								original_price: good.prices?.[0]?.original_price,
								yunfei: good.yunfei || 0,
							}],
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.shop-container {
		height: 100%;
		align-items: stretch;
		position: relative;
		padding-top: calc(var(--status-bar-height, 0px) + 88rpx + 20rpx);
		background: #fff;

		.custom-navbar {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background: #ff19a0;
			border-radius: 0px 0px 16px 16px;

			.status-bar {
				background: #ff19a0;
			}

			.navbar-content {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 32rpx;
				height: 88rpx;
				box-sizing: border-box;
				margin-bottom: 20px;

				.back-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					flex-shrink: 0;

					.back-icon {
						width: 20rpx;
						height: 20rpx;
						border-left: 3rpx solid #fff;
						border-bottom: 3rpx solid #fff;
						transform: rotate(45deg);
					}
				}

				.search-input-wrapper {
					height: 64rpx;
					background: #fff;
					border-radius: 32rpx;
					padding: 0 24rpx;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.search-input {
						width: 100%;
						height: 100%;
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}

		.category-content {
			flex: 1;
			overflow: hidden;
			padding-top: 90rpx;

			// 左侧：一级分类列表
			.category-list-left {
				width: 180rpx;
				height: 100%;
				overflow: auto;
				background: #f7f8fa;

				.category-item-left {
					text-align: center;
					width: 100%;
					height: 110rpx;
					position: relative;
					background: #f7f8fa;

					.category-item-left-name {
						color: #3D3D3D;
					}

					&.category-item-left-active {
						background-color: #fff;

						.category-item-left-name {
							color: #FF19A0;
						}

						.border-line {
							position: absolute;
							top: 28rpx;
							bottom: 28rpx;
							left: 0;
							width: 10rpx;
							border-radius: 28rpx;
							background: #FF19A0;
						}
					}
				}
			}

			// 右侧内容区域
			.category-right-wrapper {
				flex: 1;
				display: flex;
				flex-direction: column;
				height: 100%;
				background: #fff;

				// 商品列表区域
				.category-right {
					flex: 1;
					height: 100%;
				}
			}
		}
	}

	.add-car-view {
		position: fixed;
		bottom: 35vh;
		right: 20rpx;
		background-color: #fff;
		border-radius: 50%;
		padding: 20rpx;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;

		.add-car-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.cart-count {
			position: absolute;
			top: 8rpx;
			right: 8rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			background: #FF19A0;
			z-index: 10;
			border: 1px solid #FFFFFF;
			transition: transform 0.3s ease;

			&.cart-count-bounce {
				animation: cartCountBounce 0.6s ease;
			}
		}
	}

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

		25% {
			transform: scale(1.3);
		}

		50% {
			transform: scale(1.1);
		}

		75% {
			transform: scale(1.2);
		}

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

	.loading-wrapper {
		padding: 10rpx 0;
	}
</style>