<template>
	<view class="page-container flex-column">
		<view class="nav-bar">
			<nav-bar v-if="!selectedImage" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
				tipLayerType="pdd-shopping-list" isTipLayer tipLayerText="添加订单信息">
				<template v-slot:left>
					<image style="width: 48rpx;height: 48rpx;" src="/static/image/shopping/pdd/back.png"
						@click="util.goBack()">
					</image>
				</template>
				<template v-slot:center>
					<view class="title-box flex-center flex-column">
						<view class="title">我的订单</view>
						<view class="flex-center text">
							<image style="width: 30rpx;height: 30rpx;" src="/static/image/shopping/pdd/safety.png">
							</image>
							<text>专属客服 ·闪电退换 ·售后无忧</text>
						</view>
					</view>
				</template>
				<template v-slot:right>
					<image style="width: 48rpx;height: 48rpx;" src="/static/image/shopping/pdd/search.png"></image>
				</template>
			</nav-bar>

			<nav-bar v-else title="拼图" bgColor="#EFEFEF" noBack @back="closeImage" isRightButton
				@right-click="confirmImage">
			</nav-bar>
		</view>
		<view class="tab-list flex-align-center">
			<view class="tab-item" :class="{ active: tab.id == activeTab }" v-for="(tab, index) in tabList" :key="index"
				@click="activeTab = tab.id">
				<text>{{ tab.name }}</text>
			</view>
		</view>
		<scroll-view v-if="activeTab === 4" class="tab2-box" scroll-x="true" :show-scrollbar="false">
			<view class="tab2-content flex-align-center">
				<view class="tab2-item flex-center" :class="{ active: activeTab2 === item.id }"
					v-for="(item, index) in displayTab2List" :key="index" @click="handleTab2Click(item)">
					<text>{{ item.name }} {{ item.count }}</text>
				</view>
			</view>
		</scroll-view>
		<scroll-view class="flex-1" style="height: 100px;" scroll-y="true" :scroll-into-view="scrollIntoId"
			scroll-with-animation>
			<list-card v-for="(item, index) in filteredOrderList" :key="index" :item="item"
				@longpress="handleLongPress($event, item)"></list-card>
			<view v-if="filteredOrderList.length == 0" class="null-data-box flex-align-center">
				<text>没找到订单？试试</text>
				<text style="color: #2686E4;">查看全部</text>
				<text>或</text>
				<text style="color: #2686E4;">切换账号</text>
			</view>
			<view class="bottom-fixed" style="height: 1000rpx;">
				<view v-if="!selectedImage" class="upload-screenshot-box" @touchstart="handleTouchStart"
					@touchend="handleTouchEnd">
					<view v-if="!screenshotImage" class="upload-screenshot-content">
						<image class="upload-screenshot" src="/static/image/common/upload-screenshot.png"
							mode="aspectFit">
						</image>
						<view class="upload-screenshot-text">长按替换截图</view>
					</view>
					<view v-else class="screenshot-preview-box">
						<image class="screenshot-preview" :src="screenshotImage" mode="widthFix"></image>
					</view>
					<!-- <image v-else class="w100 h100" :src="screenshotImage" mode="widthFix"></image> -->
				</view>
				<view v-else class="upload-screenshot-box scroll-image-box">
					<scroll-view class="image-box" style="width: 100%;height: 100%;" scroll-y :show-scrollbar="false"
						@scroll="onImageScroll">
						<image class="crop-image-target" style="width:100%;" :src="selectedImage" mode="widthFix">
						</image>
					</scroll-view>
					<view class="dashed-line-box">
						<view class="dashed-line-text">我是分割线</view>
					</view>
				</view>
				<canvas canvas-id="crop-canvas"
					style="position: fixed; left: -9999px; width: 750rpx; height: 100vh; pointer-events: none;"></canvas>
				<view id="bottom-anchor" style="height: 1px;"></view>
			</view>
		</scroll-view>

		<!-- 上下文菜单和遮罩 -->
		<view class="menu-mask" v-if="showMenu" @click="showMenu = false"></view>
		<view class="context-menu flex-column" v-if="showMenu" :style="{ left: menuX + 'px', top: menuY + 'px' }">
			<view class="menu-item" @click="handleEdit">编辑</view>
			<view class="menu-item text-red" @click="handleDelete">删除</view>
		</view>

		<!-- 水印 -->
		<view v-if="$isVip()">
			<watermark dark="light" source="uni_alipay_shopping_pdd" />
			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_pdd')">
				<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
			</liu-drag-button>
		</view>
	</view>
</template>



<script setup>
import { ref, computed, getCurrentInstance } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import ListCard from './components/list-card/list-card.vue';
import { defaultDataList } from '@/pages/shopping/pdd/json/order.json';
import { util } from '@/utils/common.js';

const { proxy } = getCurrentInstance();
const activeTab = ref(0);
const scrollIntoId = ref('');


//导航栏菜单按钮
const buttonGroup = [
	{
		name: "新增购物订单",
		click: () => {
			uni.navigateTo({
				url: '/pages/shopping/pdd/add-order/add-order'
			});
		}
	}, {
		name: "切换推荐商品图片",
		click: () => {
			scrollIntoId.value = '';
			setTimeout(() => {
				scrollIntoId.value = 'bottom-anchor';
			}, 50);
			setTimeout(() => {
				chooseImage();
			}, 400);
		}
	},
]

onLoad(() => {
	proxy.$apiUserEvent('all', {
		type: 'event',
		key: 'shopping',
		prefix: '.uni.other.',
		value: '拼多多'
	})
})

const tabList = ref([
	{
		name: '全部',
		id: 0,
		value: 'all'
	},
	{
		name: '待付款',
		id: 1,
		value: 'wait_pay'
	},
	{
		name: '拼团中',
		id: 2,
		value: 'grouping'
	},
	{
		name: '打包中',
		id: 3,
		value: 'packing'
	},
	{
		name: '待收货',
		id: 4,
		value: 'wait_recv'
	},
	{
		name: '评价',
		id: 5,
		value: 'received'
	},
]);

const activeTab2 = ref(0);
const tab2List = ref([
	{ name: '全部', count: 1, id: 0 },
	{ name: '已签收', count: 0, id: 1 },
	{ name: '待取件', count: 0, id: 2 },
	{ name: '派件中', count: 0, id: 3 },
	{ name: '运输中', count: 1, id: 4 },
	{ name: '其他', count: 0, id: 5 },
]);

const displayTab2List = computed(() => {
	let sum = 0;
	tab2List.value.forEach(item => {
		if (item.id !== 0) {
			sum += Number(item.count || 0);
		}
	});
	return tab2List.value.map(item => {
		if (item.id === 0) {
			return { ...item, count: sum };
		}
		return item;
	});
});

const saveTab2List = () => {
	uni.setStorageSync('pdd_tab2List', tab2List.value);
	uni.showToast({
		title: '修改已保存',
		icon: 'success'
	});
};

const handleTab2Click = (item) => {
	if (item.id !== 0) {
		// 非“全部”项直接弹窗修改数量，不允许进入选中态
		uni.showModal({
			title: `修改[${item.name}]数量`,
			editable: true,
			placeholderText: '请输入数量',
			success: (res) => {
				if (res.confirm && res.content) {
					const num = parseInt(res.content);
					if (!isNaN(num) && num >= 0) {
						const target = tab2List.value.find(t => t.id === item.id);
						if (target) {
							target.count = num;
							saveTab2List();
						}
					}
				}
			}
		});
	} else {
		// 只有点击“全部”本身可以重置或保持激活（尽管业务上可能默认锁死它）
		activeTab2.value = item.id;
	}
};

const orderList = ref([]);
const showMenu = ref(false);
const menuX = ref(0);
const menuY = ref(0);
const currentEditItem = ref(null);

const handleLongPress = (e, item) => {
	const touch = e.touches && e.touches[0] ? e.touches[0] : (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0] : e);
	menuX.value = touch.clientX || touch.pageX || 100;
	menuY.value = touch.clientY || touch.pageY || 100;

	currentEditItem.value = item;
	showMenu.value = true;
};

const handleEdit = () => {
	showMenu.value = false;
	if (currentEditItem.value) {
		uni.navigateTo({
			url: `/pages/shopping/pdd/add-order/add-order?isEdit=true&id=${currentEditItem.value.id}`
		});
	}
};

const removeLocalFile = (filePath) => {
	if (!filePath) return;
	if (filePath.startsWith('http') || filePath.startsWith('/static')) return;
	uni.removeSavedFile({
		filePath,
		fail: () => { }
	});
};

const handleDelete = () => {
	showMenu.value = false;
	if (currentEditItem.value) {
		uni.showModal({
			title: '提示',
			content: '确定要删除该订单吗？',
			success: (res) => {
				if (res.confirm) {
					const index = orderList.value.findIndex(item => item.id === currentEditItem.value.id);
					if (index > -1) {
						const deletedOrder = orderList.value[index];
						// 清理关联的本地缓存图片
						if (deletedOrder.shop && deletedOrder.shop.logo) {
							removeLocalFile(deletedOrder.shop.logo);
						}
						if (deletedOrder.products) {
							deletedOrder.products.forEach(p => {
								if (p.img) removeLocalFile(p.img);
								if (p.image) removeLocalFile(p.image);
							});
						}
						if (deletedOrder.avatars) {
							deletedOrder.avatars.forEach(av => removeLocalFile(av));
						}

						orderList.value.splice(index, 1);
						// 同步写入缓存
						uni.setStorageSync('pddOrderList', orderList.value);
						uni.showToast({ title: '删除成功', icon: 'success' });
					}
				}
			}
		});
	}
};

const getOrderTime = (order) => {
	if (order.orderInfo) {
		const timeInfo = order.orderInfo.find(info => info.label && info.label.includes('下单时间'));
		if (timeInfo && timeInfo.value) {
			const timestamp = new Date(timeInfo.value.replace(/-/g, '/')).getTime();
			if (!isNaN(timestamp)) {
				return timestamp;
			}
		}
	}
	return Number(order.id) || 0;
};

const filteredOrderList = computed(() => {
	const currentTab = tabList.value.find(t => t.id === activeTab.value);
	let list = orderList.value;
	if (currentTab && currentTab.value !== 'all') {
		list = list.filter(item => item.orderType === currentTab.value);
	}
	return list.slice().sort((a, b) => getOrderTime(b) - getOrderTime(a));
});

onShow(() => {
	const isInitialized = uni.getStorageSync('isPddOrderListInitialized');
	if (!isInitialized) {
		uni.setStorageSync('pddOrderList', defaultDataList);
		uni.setStorageSync('isPddOrderListInitialized', true);
		orderList.value = defaultDataList;
	} else {
		const cacheList = uni.getStorageSync('pddOrderList');
		orderList.value = cacheList || [];
	}

	// 加载拼图截图缓存 (若不存在则初始化默认底图)
	let savedScreenshot = uni.getStorageSync('pdd_screenshot');
	if (!savedScreenshot) {
		savedScreenshot = '/static/image/shopping/pdd/pdd-bottom-product.png';
		uni.setStorageSync('pdd_screenshot', savedScreenshot);
	}
	screenshotImage.value = savedScreenshot;

	// 加载二级导航数量缓存
	const cachedTab2 = uni.getStorageSync('pdd_tab2List');
	if (cachedTab2) {
		tab2List.value = cachedTab2;
	}
});

// 长按替换截图相关
const screenshotImage = ref('');
const selectedImage = ref('');
const scrollTop = ref(0);
let longPressTimer = null;


// 长按替换截图 - 选择图片
const chooseImage = () => {
	if (selectedImage.value) return;
	uni.chooseImage({
		count: 1,
		sourceType: ['album'],
		success: (res) => {
			selectedImage.value = res.tempFilePaths[0];
		}
	});
};

// 长按事件
const handleTouchStart = (e) => {
	const systemInfo = uni.getSystemInfoSync();
	if (systemInfo.platform === 'ios' && systemInfo.safeAreaInsets?.bottom) {
		const clientY = e.touches[0].clientY;
		const windowHeight = systemInfo.windowHeight;
		if (clientY > windowHeight - systemInfo.safeAreaInsets.bottom) {
			return;
		}
	}
	longPressTimer = setTimeout(() => {
		uni.vibrateShort();
		chooseImage();
	}, 1200);
};

const handleTouchEnd = () => {
	if (longPressTimer) {
		clearTimeout(longPressTimer);
		longPressTimer = null;
	}
};

// 图片滚动
const onImageScroll = (e) => {
	scrollTop.value = e.detail.scrollTop;
};
// 确认图片裁剪
const confirmImage = () => {
	uni.showLoading({
		title: '处理中...'
	})
	const query = uni.createSelectorQuery().in(proxy)

	// 获取容器和图片信息
	query.select('.image-box').boundingClientRect()
	query.select('.crop-image-target').boundingClientRect()
	query.exec(res => {
		if (!res[0] || !res[1]) {
			uni.hideLoading()
			return
		}

		console.log('rects', res)
		const container = res[0] // 容器
		const image = res[1] // 图片实际渲染尺寸

		// 计算缩放比例 (渲染宽度 / 实际宽度 不准确，应该反过来用 图片原始宽/渲染宽?)
		// 这里更简单的方法是：canvas设为容器大小，把图片画进去
		// canvas drawImage 参数: img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight

		// 获取图片原始尺寸
		uni.getImageInfo({
			src: selectedImage.value,
			success: (imgInfo) => {
				const scale = imgInfo.width / image.width // 图片 原始宽 / 渲染宽
				const sTop = scrollTop.value * scale // 原始图上的裁切起始Y
				const sHeight = container.height * scale // 原始图上的裁切高度

				// 因为是 widthFix，宽度就是原始图宽度（或裁切全宽）
				const sWidth = imgInfo.width

				// 设置画布尺寸 (使用像素值)
				// 注意：canvasContext绘制使用的是逻辑像素还是物理像素？通常需要考虑到 pixelRatio，
				// 但 uni-app canvas-id 方式通常对应逻辑像素(px)
				// 我们把 canvas 大小设为和容器显示一致
				const canvasW = container.width
				const canvasH = container.height
				const ctx = uni.createCanvasContext('crop-canvas', proxy)

				// 清除画布
				ctx.clearRect(0, 0, canvasW, canvasH)

				// 绘制
				// drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
				ctx.drawImage(
					imgInfo.path,
					0, sTop, sWidth, sHeight, // 源图裁剪区域
					0, 0, canvasW, canvasH // 画布绘制区域
				)
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'crop-canvas',
						width: canvasW,
						height: canvasH,
						destWidth: sWidth, // 使用原图实际宽度,保持原图清晰度
						destHeight: sHeight, // 使用原图实际高度,保持原图清晰度
						success: (res) => {
							console.log('crop success (temp)', res
								.tempFilePath)

							// 将临时路径保存为永久路径
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (saveRes) => {
									console.log('save success (saved)', saveRes.savedFilePath)
									screenshotImage.value = saveRes.savedFilePath
									selectedImage.value = '' // 隐藏编辑模式
									setTimeout(() => {
										plus.navigator.setStatusBarStyle("light");
									}, 200)
									// 保存到缓存
									uni.setStorageSync('pdd_screenshot', screenshotImage.value)
									uni.hideLoading()
								},
								fail: (err) => {
									console.error('saveFile fail', err)
									uni.hideLoading()
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									})
								}
							})
						},
						fail: (err) => {
							console.error(err)
							uni.hideLoading()
							uni.showToast({
								title: '裁剪失败',
								icon: 'none'
							})
						}
					}, proxy)
				})
			},
			fail: () => {
				uni.hideLoading()
				uni.showToast({
					title: '图片加载失败',
					icon: 'none'
				})
			}
		})

	})
}

// 关闭截图预览
const closeImage = () => {
	selectedImage.value = '';
};


</script>

<style lang="less" scoped>
.page-container {
	height: 100vh;
}

.nav-bar {
	border-bottom: 1rpx solid #D2D2D2;
}

.title-box {
	display: flex;
	flex-direction: column;

	.title {
		font-weight: 400;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 30rpx;
	}

	.text {
		font-weight: 400;
		font-size: 24rpx;
		color: #16B800;
		line-height: 24rpx;
		margin-top: 12rpx;
	}
}

.tab-list {
	height: 80rpx;
	background-color: #ffff;
	border-bottom: 0.5px solid #D2D2D2;

	.tab-item {
		font-weight: 400;
		font-size: 30rpx;
		color: #1A1A1A;
		line-height: 80rpx;
		white-space: nowrap;
		margin: 0 22rpx;

		&.active {
			color: #E01B13;
			font-weight: 500;
			box-shadow: inset 0 -4rpx 0 0 #E01B13;
		}
	}
}

.tab2-box {
	height: 78rpx;
	background-color: #ffff;
	border-bottom: 0.5px solid #D2D2D2;
	width: 100%;
	white-space: nowrap;

	:deep(.uni-scroll-view::-webkit-scrollbar) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.tab2-content {
		display: inline-flex;
		padding: 0 24rpx;
		height: 100%;
	}

	.tab2-item {
		flex-shrink: 0;
		height: 52rpx;
		padding: 0 16rpx;
		background-color: #F8F8F8;
		border-radius: 26rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #1A1A1A;
		white-space: nowrap;

		&.active {
			background-color: #FCEFEF;
			font-weight: 500;
			color: #E01B13;
		}
	}
}

.null-data-box {
	justify-content: center;
	font-size: 28rpx;
	color: #999999;
	line-height: 28rpx;
	padding: 42rpx 0;
}

.menu-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
}

.context-menu {
	position: fixed;
	z-index: 999;
	background-color: #fff;
	border-radius: 8rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	width: 200rpx;
	overflow: hidden;

	.menu-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #F5F5F5;

		&:last-child {
			border-bottom: none;
		}

		&.text-red {
			color: #DF2E26;
		}
	}
}

.bottom-fixed {
	display: flex;
	flex-direction: column;

	.upload-screenshot-box {
		width: 100%;
		flex: 1;
		min-height: 540rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.upload-screenshot {
			width: 92rpx;
			height: 92rpx;
		}

		.upload-screenshot-content {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.upload-screenshot-text {
				font-size: 36rpx;
				color: #1777FF;
				line-height: 50rpx;
				margin-top: 16rpx;
			}


		}

		.screenshot-preview-box {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: flex-start;
			// flex-direction: column;
			justify-content: center;

			.screenshot-preview {
				width: 100%;
				height: 100%;
			}
		}

		.scroll-image-box {
			width: 100%;
			min-height: 0; // 修复 flex一出问题
			// overflow: hidden; // scroll-view 需要
			position: relative;
		}

		.dashed-line-box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			border: 4rpx dashed #ffffff;
			pointer-events: none;

			.dashed-line-text {
				height: 44rpx;
				line-height: 44rpx;
				width: 180rpx;
				padding: 0 20rpx;
				border-radius: 8rpx;
				color: #1777FF;
				font-size: 24rpx;
				font-weight: 500;
				background-color: #fff;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 999;

			.mask-icon {
				position: absolute;
				top: 50%;
				right: 52rpx;
				transform: translateY(-25%);
				width: 360rpx;
				height: 360rpx;
			}
		}
	}
}
</style>
<style>
@import '@/common/main.css';

page {
	background-color: #F5F5F5;
}
</style>