<template>
	<view class="page">
		<view class="nav">
			<view class="back" @tap="back"><uni-icons type="left" size="26"></uni-icons></view>
			<view class="title">中转配送</view>
		</view>
		<scroll-view class="list" scroll-y @scrolltolower="loadMore">
			<view class="card" v-for="(item,index) in list" :key="item.id" @tap="productDetail(item)">
				<view class="card-head">
					<view class="tag">中转配送</view>
					<view class="code" v-if="item.numberCode">#{{item.numberCode}}</view>
				</view>
				<view class="row">
					<view class="label">中转点</view>
					<view class="value">{{item.transferAddressName || item.shopName}}</view>
				</view>
				<view class="row">
					<view class="label">下单时间</view>
					<view class="value">{{formatTime(item.createTime)}}</view>
				</view>
				<view class="row">
					<view class="label">取餐码</view>
					<view class="value pickup-code">{{item.transferPickupCode || '配送员接单后生成'}}</view>
				</view>
				<view class="row">
					<view class="label">配送员</view>
					<view class="value phone-value" @tap.stop="makeCall(item.workerPhone)">
						<text>{{item.workerName || '未分配'}}</text>
						<text v-if="item.workerPhone" class="phone">{{item.workerPhone}}</text>
					</view>
				</view>
				<view class="row">
					<view class="label">用户</view>
					<view class="value phone-value" @tap.stop="makeCall(item.receiverPhone)">
						<text>{{item.receiverName}}</text>
						<text v-if="item.receiverPhone" class="phone">{{item.receiverPhone}}</text>
					</view>
				</view>
				<view class="address">{{item.receiverAddress}}</view>
				<view class="image-row" v-if="item.transferArriveImage">
					<image :src="item.transferArriveImage" mode="aspectFill"></image>
				</view>
				<view class="arrive-info" v-if="item.transferArriveTime">
					已送达中转点：{{formatTime(item.transferArriveTime)}}
				</view>
				<view class="actions" v-else>
					<view class="photo-btn" @tap.stop="chooseImage(index)">拍照</view>
					<view class="main-btn" @tap.stop="transferArrive(index,item)">送达中转点</view>
				</view>
			</view>
			<view class="empty" v-if="list.length === 0 && loadStatus === 'nomore'">暂无中转配送单</view>
		</scroll-view>
		<uni-popup ref="productPopup" background-color="transparent">
			<view class="product-popup-content">
				<view class="product-popup-header">
					<view class="product-popup-title">订单详情</view>
					<view class="product-popup-subtitle">请核对商品规格和数量</view>
				</view>
				<view class="product-popup-list" v-if="productData != null && productData.length > 0">
					<view class="product-popup-card" v-for="(item1,index1) in productData" :key="index1">
						<view class="product-popup-img">
							<image :src="item1.productPicture" mode="aspectFill"></image>
						</view>
						<view class="product-popup-info">
							<view class="product-popup-name">
								{{item1.productName}}
							</view>
							<view class="product-popup-spec">
								<text class="product-popup-label">规格</text>
								<text class="product-popup-spec-text">{{item1.specs | delNode}}</text>
							</view>
						</view>
						<view class="product-popup-quantity">
							<view class="product-popup-quantity-num">x{{item1.quantity}}</view>
							<view class="product-popup-quantity-label">数量</view>
						</view>
					</view>
				</view>
				<view class="product-popup-empty" v-else>
					暂无商品详情
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				productData: [],
				loadStatus: 'more',
				totalPages: 1,
				searchForm: {
					pageNum: 1,
					pageSize: 10,
					deliveryType: 1,
					transferDelivery: 1,
					shopId: '',
					regionId: ''
				}
			}
		},
		onShow() {
			this.resetList()
		},
		filters: {
			delNode(data) {
				let str
				if (typeof data === 'object' && data !== null) {
					str = JSON.stringify(data)
				} else if (typeof data === 'string') {
					str = data
				} else {
					str = String(data || '')
				}
				return str.replace(/[{}"]/g, '')
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			resetList() {
				this.searchForm.pageNum = 1
				this.totalPages = 1
				this.list = []
				this.loadStatus = 'more'
				this.searchForm.shopId = uni.getStorageSync('shopId')
				const area = uni.getStorageSync('area')
				this.searchForm.regionId = area ? JSON.parse(area).id : ''
				this.getList()
			},
			loadMore() {
				if (this.searchForm.pageNum >= this.totalPages) return
				this.searchForm.pageNum++
				this.getList()
			},
			getList() {
				this.tui.request('/mall/delivery/pageTransferDelivery', 'POST', this.searchForm, false, false).then((res) => {
					if (res.code == 200) {
						const records = res.result.records || []
						this.list = this.searchForm.pageNum == 1 ? records : this.list.concat(records)
						this.totalPages = res.result.pages || 1
						this.loadStatus = this.searchForm.pageNum >= this.totalPages ? 'nomore' : 'more'
					} else {
						this.tui.toast(res.message)
					}
				})
			},
			chooseImage(index) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['camera', 'album'],
					success: (res) => {
						const file = res.tempFiles && res.tempFiles[0] ? res.tempFiles[0].tempFilePath : ''
						if (file) this.uploadImage(index, file)
					}
				})
			},
			uploadImage(index, filePath) {
				uni.uploadFile({
					url: this.tui.interfaceUrl() + '/upload/file',
					filePath,
					name: 'file',
					header: {
						'accessToken': uni.getStorageSync('hiver_token'),
						'content-type': 'multipart/form-data'
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						this.$set(this.list[index], 'transferArriveImage', data.result)
					}
				})
			},
			transferArrive(index, item) {
				this.tui.request('/mall/delivery/transferArrive', 'POST', {
					deliveryId: item.id,
					transferArriveImage: item.transferArriveImage || ''
				}, false, true).then((res) => {
					if (res.code == 200) {
						this.$set(this.list[index], 'transferArriveTime', new Date())
						this.tui.toast('操作成功')
					} else {
						this.tui.toast(res.message)
					}
				})
			},
			productDetail(item) {
				const goodsList = item.goodsList || item.mallOrderGoodsList || item.orderGoodsList || []
				this.productData = goodsList
				this.$refs.productPopup.open()
			},
			formatTime(value) {
				if (!value) return '';
				const date = new Date(value)
				if (isNaN(date.getTime())) return ''
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hour = String(date.getHours()).padStart(2, '0')
				const minute = String(date.getMinutes()).padStart(2, '0')
				const second = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			makeCall(phone) {
				if (!phone) {
					this.tui.toast('暂无手机号')
					return
				}
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style>
	.page{min-height:100vh;background:#F5F8F5;padding:120rpx 24rpx 24rpx;box-sizing:border-box;}
	.nav{position:fixed;top:0;left:0;right:0;height:110rpx;background:#F5F8F5;z-index:9;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18rpx;}
	.back{position:absolute;left:24rpx;bottom:12rpx;width:68rpx;height:68rpx;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;}
	.title{font-size:32rpx;font-weight:800;}
	.list{height:calc(100vh - 140rpx);}
	.card{background:#fff;border-radius:24rpx;padding:24rpx;margin-bottom:20rpx;box-shadow:0 10rpx 26rpx rgba(0,35,28,.08);}
	.card-head{display:flex;align-items:center;margin-bottom:20rpx;}
	.tag{background:#fff2e9;color:#f36c21;border-radius:12rpx;padding:8rpx 14rpx;font-weight:700;}
	.code{margin-left:auto;font-weight:800;font-size:32rpx;}
	.row{display:flex;line-height:46rpx;}
	.label{width:120rpx;color:#7a8582;}
	.value{flex:1;font-weight:700;}
	.phone-value{display:flex;align-items:center;gap:16rpx;color:#123d35;}
	.phone{color:#0b9b73;text-decoration:underline;}
	.pickup-code{color:#f36c21;font-size:34rpx;letter-spacing:4rpx;}
	.address{margin-top:10rpx;color:#6c7773;line-height:40rpx;}
	.image-row image{width:160rpx;height:160rpx;border-radius:16rpx;margin-top:16rpx;}
	.arrive-info{margin-top:22rpx;padding:18rpx 20rpx;border-radius:18rpx;background:#f2f6f4;color:#0b9b73;font-weight:700;text-align:center;}
	.actions{display:flex;margin-top:22rpx;gap:18rpx;}
	.photo-btn,.main-btn{flex:1;height:76rpx;line-height:76rpx;text-align:center;border-radius:38rpx;font-weight:700;}
	.photo-btn{background:#f2f6f4;color:#0b9b73;}
	.main-btn{background:linear-gradient(90deg,#e3ff96,#a6ffea);color:#00231c;}
	.empty{text-align:center;color:#8a9692;padding:80rpx 0;}
	.product-popup-content {
		width: 680rpx;
		max-height: 880rpx;
		padding: 34rpx 28rpx 30rpx;
		box-sizing: border-box;
		overflow: scroll;
		border-radius: 36rpx;
		background:
			radial-gradient(circle at 92% 4%, rgba(166, 255, 234, 0.38) 0, rgba(166, 255, 234, 0) 180rpx),
			linear-gradient(180deg, #ffffff 0%, #f8fffc 100%);
		box-shadow: 0 24rpx 56rpx rgba(0, 35, 28, 0.18);
	}
	.product-popup-header {
		margin-bottom: 26rpx;
		text-align: center;
	}
	.product-popup-title {
		color: #143d35;
		font-size: 36rpx;
		font-weight: 900;
		line-height: 48rpx;
	}
	.product-popup-subtitle {
		margin-top: 8rpx;
		color: #7b8a85;
		font-size: 24rpx;
		line-height: 34rpx;
	}
	.product-popup-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	.product-popup-card {
		display: flex;
		align-items: center;
		padding: 22rpx;
		border: 1px solid rgba(166, 255, 234, 0.58);
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.88);
		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
	}
	.product-popup-img {
		width: 128rpx;
		height: 128rpx;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 22rpx;
		background: #f0f5f3;
	}
	.product-popup-img image {
		width: 100%;
		height: 100%;
	}
	.product-popup-info {
		flex: 1;
		min-width: 0;
		padding: 0 22rpx;
	}
	.product-popup-name {
		color: #172f2a;
		font-size: 30rpx;
		font-weight: 900;
		line-height: 42rpx;
	}
	.product-popup-spec {
		display: flex;
		align-items: flex-start;
		margin-top: 16rpx;
	}
	.product-popup-label {
		flex-shrink: 0;
		height: 34rpx;
		padding: 0 14rpx;
		border-radius: 999rpx;
		background: rgba(166, 255, 234, 0.72);
		color: #126255;
		font-size: 20rpx;
		font-weight: 800;
		line-height: 34rpx;
	}
	.product-popup-spec-text {
		flex: 1;
		margin-left: 12rpx;
		color: #65736f;
		font-size: 24rpx;
		line-height: 34rpx;
		word-break: break-all;
	}
	.product-popup-quantity {
		width: 92rpx;
		height: 92rpx;
		flex-shrink: 0;
		border-radius: 28rpx;
		background: linear-gradient(135deg, #fff4ce 0%, #a6ffea 100%);
		color: #103f36;
		text-align: center;
		box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.08);
	}
	.product-popup-quantity-num {
		padding-top: 16rpx;
		font-size: 30rpx;
		font-weight: 900;
		line-height: 34rpx;
	}
	.product-popup-quantity-label {
		margin-top: 2rpx;
		color: #52736b;
		font-size: 20rpx;
		line-height: 28rpx;
	}
	.product-popup-empty {
		padding: 80rpx 20rpx;
		border-radius: 28rpx;
		background: rgba(247, 255, 251, 0.9);
		color: #7b8a85;
		font-size: 28rpx;
		font-weight: 700;
		text-align: center;
	}
</style>
