<template>
	<view class="page">
		<view class="fixed-head">
			<view class="nav" :style="{'height': navHeight + 'px'}">
				<view class="back-btn" :style="{'top': backTop + 'px'}" @tap="back">
					<uni-icons type="left" size="26"></uni-icons>
				</view>
				<view class="nav-title">自配送订单</view>
			</view>
			<view class="tabs">
				<view class="tab" :class="{active: tab === 'pickup'}" @tap="switchTab('pickup')">待取货</view>
				<view class="tab" :class="{active: tab === 'complete'}" @tap="switchTab('complete')">待送达</view>
			</view>
		</view>
		<scroll-view class="list" :style="{'top': listTop + 'px'}" 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-row">
						<view class="tag">商家自配送</view>
						<view class="appointment-delivery-tag" v-if="item.appointmentDelivery == 1">预约配送</view>
					</view>
					<view class="time">{{item.mustFinishTime | formatTime}}前送达</view>
				</view>
				<view class="order-code" v-if="item.numberCode">#{{item.numberCode}}</view>
				<view class="address">
					<view class="dot get">取</view>
					<view>
						<view class="name">{{item.shopName}}</view>
						<view class="desc">{{item.shopAddress}}</view>
						<view class="phone-row" v-if="item.shopPhone" @tap.stop="makeCall(item.shopPhone)">
							商家电话：{{item.shopPhone}}
						</view>
					</view>
				</view>
				<view class="address">
					<view class="dot send">送</view>
					<view>
						<view class="name">{{item.receiverName}} {{item.receiverPhone}}</view>
						<view class="desc">{{item.receiverAddress}}</view>
						<view class="phone-row" v-if="item.receiverPhone" @tap.stop="makeCall(item.receiverPhone)">
							用户电话：{{item.receiverPhone}}
						</view>
					</view>
				</view>
				<view class="goods-row" v-if="item.goodsList && item.goodsList.length > 0" @tap.stop="productDetail(item)">
					<view class="goods-title">商品详情</view>
					<view class="goods-desc">共{{goodsCount(item)}}件，点击查看规格和数量</view>
					<uni-icons type="right" size="14" color="#7a8582"></uni-icons>
				</view>
				<view class="remark" v-if="item.remark">备注：{{item.remark}}</view>
				<view class="fee">配送费 ￥{{item.deliveryFee || 0}}</view>
				<view class="btn" @tap.stop="handleOrder(index,item)">
					{{buttonText(item)}}
				</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 && productData.length > 0">
					<view class="product-popup-card" v-for="(item1,index1) in productData" :key="index1">
						<view class="product-popup-img">
							<img :src="item1.productPicture" alt="">
						</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">{{formatSpecs(item1.specs)}}</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 {
				tab: 'pickup',
				list: [],
				loadStatus: 'more',
				totalPages: 1,
				searchForm: {
					pageNum: 1,
					pageSize: 10,
					status: 1,
					deliveryType: 1,
					shopDelivery: 1,
					shopId: '',
					workerId: '',
					regionId: ''
				},
				menuButtonInfo: {},
				navHeight: 120,
				backTop: 88,
				listTop: 210,
				productData: []
			}
		},
		filters: {
			formatTime(value) {
				if (!value) return '';
				const date = new Date(value);
				return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
			}
		},
		onShow() {
			this.initNavMetrics();
			this.initWorkerFromShop();
			this.resetList();
		},
		methods: {
			initNavMetrics() {
				const rect = uni.getMenuButtonBoundingClientRect();
				this.menuButtonInfo = rect || {};
				const top = rect && rect.top ? rect.top : 32;
				const height = rect && rect.height ? rect.height : 32;
				this.backTop = top + 6;
				this.navHeight = top + height + 52;
				this.listTop = this.navHeight + 76;
			},
			back() {
				uni.navigateBack();
			},
			initWorkerFromShop() {
				const shop = this.getCurrentShop();
				this.searchForm.shopId = uni.getStorageSync('shopId');
				this.searchForm.regionId = JSON.parse(uni.getStorageSync('area')).id;
				this.searchForm.workerId = shop.workerId || '';
				this.worker = {
					workerId: shop.workerId || '',
					workerName: shop.workerName || '',
					workerPhone: shop.workerPhone || ''
				};
			},
			getCurrentShop() {
				const shopList = uni.getStorageSync('schoolShop') || [];
				const shopId = uni.getStorageSync('shopId');
				if (Array.isArray(shopList)) {
					return shopList.find(item => item.id == shopId) || {};
				}
				return {};
			},
			switchTab(tab) {
				this.tab = tab;
				this.resetList();
			},
			resetList() {
				this.list = [];
				this.searchForm.pageNum = 1;
				this.totalPages = 1;
				this.loadStatus = 'more';
				this.searchForm.status = this.tab === 'pickup' ? 1 : 2;
				this.getList();
			},
			loadMore() {
				if (this.searchForm.pageNum >= this.totalPages) return;
				this.searchForm.pageNum++;
				this.getList();
			},
			getList() {
				if (!this.searchForm.workerId) {
					this.loadStatus = 'nomore';
					this.tui.toast('店铺未绑定自配送配送员');
					return;
				}
				this.tui.request('/mall/delivery/pageShopDelivery', '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);
					}
				});
			},
			handleOrder(index, item) {
				if (this.tab === 'pickup' && !item.arriveTime) {
					this.changeStatus(index, item, 1);
					return;
				}
				this.changeStatus(index, item, this.tab === 'pickup' ? 2 : 3);
			},
			buttonText(item) {
				if (this.tab === 'pickup') {
					return item.arriveTime ? '确认取货' : '已到店';
				}
				return '确认送达';
			},
			changeStatus(index, item, status) {
				const url = status === 1 ? '/mall/delivery/arriveShop' : (status === 2 ? '/mall/delivery/pickup' : '/mall/delivery/complete');
				this.tui.request(url, 'POST', {
					regionId: this.searchForm.regionId,
					deliveryId: item.id,
					workerId: this.worker.workerId
				}, false, true).then((res) => {
					if (res.code == 200) {
						if (status === 1) {
							this.$set(this.list[index], 'arriveTime', new Date());
						} else {
							this.list.splice(index, 1);
						}
						this.tui.toast(res.message || '操作成功');
					} else {
						this.tui.toast(res.message);
					}
				});
			},
			productDetail(item) {
				this.productData = item.goodsList || [];
				this.$refs.productPopup.open();
			},
			goodsCount(item) {
				return (item.goodsList || []).reduce((sum, goods) => sum + Number(goods.quantity || 0), 0);
			},
			formatSpecs(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, '');
			},
			makeCall(phone) {
				if (!phone) return;
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	}
</script>

<style>
	.page{
		height: 100vh;
		background: #F5F8F5;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
	}
	.fixed-head{
		position: absolute;
		top: -40rpx;
		left: 24rpx;
		right: 24rpx;
		z-index: 10;
		background: #F5F8F5;
	}
	.nav{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.back-btn{
		position: absolute;
		left: 0;
		width: 68rpx;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 8rpx 20rpx rgba(0, 35, 28, 0.08);
	}
	.nav-title{
		position: absolute;
		bottom: 18rpx;
		font-size: 32rpx;
		font-weight: 800;
	}
	.tabs{
		display: flex;
		background: #fff;
		border-radius: 24rpx;
		padding: 10rpx;
		margin-bottom: 0;
	}
	.tab{
		flex: 1;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 20rpx;
		font-weight: 700;
	}
	.tab.active{
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
	}
	.list{
		position: absolute;
		left: 24rpx;
		right: 24rpx;
		bottom: 0;
		box-sizing: border-box;
		padding-top: 20rpx;
		padding-bottom: 36rpx;
	}
	.card{
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 12rpx 30rpx rgba(0, 35, 28, 0.08);
	}
	.card-head{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tag-row{
		display: flex;
		align-items: center;
	}
	.tag{
		background: rgba(255, 111, 44, 0.1);
		color: #ff6f2c;
		padding: 8rpx 16rpx;
		border-radius: 18rpx;
		font-weight: 700;
	}
	.appointment-delivery-tag{
		margin-left: 12rpx;
		padding: 8rpx 16rpx;
		border-radius: 18rpx;
		background: linear-gradient(135deg, #ff8f1f 0%, #ff6a3d 100%);
		color: #fff;
		font-size: 22rpx;
		font-weight: 800;
		box-shadow: 0 8rpx 18rpx rgba(255, 106, 61, 0.16);
	}
	.time{
		color: #666;
	}
	.order-code{
		margin-top: 18rpx;
		font-size: 32rpx;
		font-weight: 800;
	}
	.address{
		display: flex;
		margin-top: 18rpx;
	}
	.dot{
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		margin-right: 16rpx;
	}
	.get{
		background: #0b9b73;
	}
	.send{
		background: #ff6f2c;
	}
	.name{
		font-weight: 700;
	}
	.desc,.remark,.fee{
		margin-top: 8rpx;
		color: #666;
		line-height: 38rpx;
	}
	.phone-row{
		display: inline-block;
		margin-top: 8rpx;
		color: #0b9b73;
		font-weight: 700;
		line-height: 34rpx;
	}
	.goods-row{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding: 18rpx 20rpx;
		border-radius: 18rpx;
		background: rgba(247, 248, 248, 0.8);
	}
	.goods-title{
		font-weight: 800;
		margin-right: 16rpx;
	}
	.goods-desc{
		flex: 1;
		color: #666;
		font-size: 24rpx;
	}
	.btn{
		margin-top: 24rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		border-radius: 38rpx;
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		font-weight: 800;
	}
	.empty{
		text-align: center;
		color: #888;
		padding: 80rpx 0;
	}
	.product-popup-content{
		width: 650rpx;
		max-height: 850rpx;
		padding: 30rpx;
		border-radius: 28rpx;
		background: #fff;
		box-sizing: border-box;
	}
	.product-popup-title{
		font-size: 32rpx;
		font-weight: 800;
	}
	.product-popup-subtitle{
		margin-top: 8rpx;
		color: #888;
		font-size: 24rpx;
	}
	.product-popup-list{
		margin-top: 24rpx;
		max-height: 680rpx;
		overflow-y: auto;
	}
	.product-popup-card{
		display: flex;
		align-items: center;
		padding: 18rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.product-popup-img img{
		width: 90rpx;
		height: 90rpx;
		border-radius: 16rpx;
		margin-right: 18rpx;
	}
	.product-popup-info{
		flex: 1;
		min-width: 0;
	}
	.product-popup-name{
		font-weight: 800;
		line-height: 38rpx;
	}
	.product-popup-spec{
		margin-top: 8rpx;
		color: #777;
		font-size: 24rpx;
	}
	.product-popup-label{
		margin-right: 10rpx;
		color: #999;
	}
	.product-popup-quantity{
		width: 80rpx;
		text-align: right;
	}
	.product-popup-quantity-num{
		font-weight: 800;
	}
	.product-popup-quantity-label,
	.product-popup-empty{
		color: #888;
		font-size: 22rpx;
	}
</style>
