<template>
	<ServicePageScaffold title="订单" fallback-url="/pages/mall/delivery/home/index" :hide-header="true">
		<view class="page">
			<view class="hero">
				<text class="hero-title">服务订单</text>
				<text class="hero-subtitle">待接单、今日订单、历史订单统一查看</text>
			</view>
			<view class="tab-row">
				<view v-for="item in tabs" :key="item.value" class="tab-item" :class="currentTab == item.value ? 'tab-item-active' : ''" @click="switchTab(item.value)">
					<text class="tab-text" :class="currentTab == item.value ? 'tab-text-active' : ''">{{ item.label }}</text>
				</view>
			</view>
			<view class="list-card">
				<view v-if="orders.length == 0" class="empty-box"><text class="empty-text">{{ emptyText }}</text></view>
				<view v-for="item in orders" :key="item.id" class="order-card">
					<view class="order-top" @click="goDetail(item.id)">
						<view class="order-main">
							<text class="order-title">{{ item.serviceName }}</text>
							<text class="order-subtitle">{{ item.elderName }} · {{ item.appointmentTime }}</text>
						</view>
						<text class="order-status">{{ item.statusText }}</text>
					</view>
					<view class="meta-box" @click="goDetail(item.id)">
						<text class="meta-text">地址：{{ item.address }} {{ item.addressDetail }}</text>
						<text class="meta-text">时长：{{ item.duration }} 分钟 · 预计收入：¥{{ item.staffIncome }}</text>
						<text class="meta-text">风险：{{ formatTags(item.riskTags) }}</text>
					</view>
					<view class="action-row">
						<view class="outline-btn" @click="goDetail(item.id)"><text class="outline-btn-text">查看详情</text></view>
						<view v-if="showReject(item.status)" class="warn-btn" @click="rejectOrder(item.id)"><text class="warn-btn-text">拒单</text></view>
						<view class="primary-btn" @click="handleAction(item.id, item.status)"><text class="primary-btn-text">{{ getActionText(item.status) }}</text></view>
					</view>
				</view>
			</view>
		</view>
	</ServicePageScaffold>
</template>

<script setup lang="uts">
import { computed, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import type { DeliveryOrderStatus, DeliveryOrderType } from '@/types/delivery.uts'
import {
	acceptServiceOrder,
	getHistoryServiceOrders,
	getPendingServiceOrders,
	getTodayServiceOrders,
	rejectServiceOrder
} from '@/services/deliveryService.uts'
import { getDeliveryOrderTabs, getPrimaryActionText } from '@/utils/deliveryCareUi.uts'
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'

const tabs = getDeliveryOrderTabs()
const currentTab = ref('pending')
const orders = ref([] as Array<DeliveryOrderType>)

const emptyText = computed((): string => {
	if (currentTab.value == 'pending') return '暂无待接单订单'
	if (currentTab.value == 'today') return '暂无今日订单'
	return '暂无历史订单'
})

async function loadData() {
	const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
	if (!authResult.ok) {
		return
	}
	if (currentTab.value == 'pending') {
		orders.value = await getPendingServiceOrders()
		return
	}
	if (currentTab.value == 'history') {
		orders.value = await getHistoryServiceOrders()
		return
	}
	orders.value = await getTodayServiceOrders()
}

function consumeStoredTab(): void {
	const storedTab = uni.getStorageSync('delivery_order_tab') as string | null
	if (storedTab != null && storedTab != '') {
		currentTab.value = storedTab
		uni.removeStorageSync('delivery_order_tab')
	}
}

function switchTab(tab: string) {
	currentTab.value = tab
	loadData()
}

function formatTags(tags: Array<string>): string {
	if (tags.length == 0) return '常规'
	return tags.join(' / ')
}

function showReject(status: DeliveryOrderStatus): boolean {
	return status == 'pending_assignment' || status == 'pending_accept'
}

function getActionText(status: DeliveryOrderStatus): string {
	return getPrimaryActionText(status)
}

function goDetail(orderId: string) {
	uni.navigateTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId })
}

function goRecord(orderId: string) {
	uni.navigateTo({ url: '/pages/mall/delivery/service-record/index?id=' + orderId })
}

function rejectOrder(orderId: string) {
	uni.showActionSheet({
		itemList: ['时间冲突', '距离过远', '技能不匹配', '其他原因'],
		success: async (result) => {
			const reasons = ['时间冲突', '距离过远', '技能不匹配', '其他原因']
			const reason = reasons[result.tapIndex]
			await rejectServiceOrder(orderId, reason)
			uni.showToast({ title: '已拒单', icon: 'success' })
			loadData()
		}
	})
}

async function handleAction(orderId: string, status: DeliveryOrderStatus) {
	if (status == 'pending_assignment' || status == 'pending_accept') {
		await acceptServiceOrder(orderId)
		uni.showToast({ title: '接单成功', icon: 'success' })
		loadData()
		return
	}
	if (status == 'accepted' || status == 'waiting_departure') {
		uni.navigateTo({ url: '/pages/mall/delivery/orders/route?id=' + orderId })
		return
	}
	if (status == 'departed' || status == 'on_the_way') {
		uni.navigateTo({ url: '/pages/mall/delivery/orders/route?id=' + orderId })
		return
	}
	if (status == 'arrived') {
		uni.navigateTo({ url: '/pages/mall/delivery/orders/checkin?id=' + orderId })
		return
	}
	if (status == 'in_service' || status == 'serving' || status == 'completed') {
		goRecord(orderId)
		return
	}
	if (status == 'pending_confirm' || status == 'pending_acceptance' || status == 'pending_submit') {
		uni.showToast({ title: '已完成服务，等待用户验收', icon: 'none' })
		return
	}
	goDetail(orderId)
}

onLoad(() => {
	consumeStoredTab()
	loadData()
})

onShow(() => {
	consumeStoredTab()
	loadData()
})
</script>

<style scoped>
.page {
	min-height: 100%;
	margin-left: -24rpx;
	margin-right: -24rpx;
	margin-top: -24rpx;
	padding: 0 24rpx 36rpx;
	background-color: #f3f8fb;
}

.hero {
	padding: 68rpx 28rpx 26rpx;
	border-bottom-left-radius: 32rpx;
	border-bottom-right-radius: 32rpx;
	background: linear-gradient(180deg, #1f7db4 0%, #1aa67f 100%);
}

.hero-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #ffffff;
}

.hero-subtitle,
.meta-text,
.empty-text,
.outline-btn-text,
.tab-text {
	font-size: 24rpx;
	line-height: 36rpx;
}

.hero-subtitle {
	margin-top: 10rpx;
	color: rgba(255, 255, 255, 0.9);
}

.tab-row,
.order-top,
.action-row {
	display: flex;
	flex-direction: row;
}

.tab-row {
	justify-content: space-between;
	margin-top: 20rpx;
	padding: 10rpx;
	border-radius: 24rpx;
	background-color: #ffffff;
	box-shadow: 0 10rpx 28rpx rgba(15, 35, 55, 0.06);
}

.tab-item {
	width: 32%;
	padding: 18rpx 0;
	border-radius: 18rpx;
	align-items: center;
	justify-content: center;
}

.tab-item-active {
	background-color: #e6f3fa;
}

.tab-text {
	color: #5e758c;
}

.tab-text-active {
	font-weight: 700;
	color: #176e97;
}

.list-card {
	margin-top: 22rpx;
	padding: 24rpx;
	border-radius: 28rpx;
	background-color: #ffffff;
	box-shadow: 0 10rpx 28rpx rgba(15, 35, 55, 0.06);
}

.order-card {
	padding: 24rpx;
	margin-bottom: 18rpx;
	border-radius: 22rpx;
	background-color: #f7fbfd;
}

.order-top,
.action-row {
	justify-content: space-between;
	align-items: center;
}

.order-main {
	flex: 1;
	padding-right: 18rpx;
}

.order-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #16324f;
}

.order-subtitle,
.order-status,
.meta-text,
.empty-text,
.outline-btn-text,
.warn-btn-text,
.primary-btn-text {
	margin-top: 10rpx;
}

.order-subtitle,
.meta-text,
.empty-text,
.outline-btn-text {
	color: #5e758c;
}

.order-status {
	font-size: 24rpx;
	color: #176e97;
}

.meta-box {
	margin-top: 14rpx;
	padding: 18rpx;
	border-radius: 18rpx;
	background-color: #eef7fb;
}

.action-row {
	margin-top: 18rpx;
	flex-wrap: wrap;
}

.outline-btn,
.warn-btn,
.primary-btn {
	width: 31%;
	padding: 18rpx 0;
	border-radius: 18rpx;
	align-items: center;
	justify-content: center;
}

.outline-btn {
	background-color: #eef6fa;
}

.warn-btn {
	background-color: #fff3e6;
}

.warn-btn-text {
	font-size: 26rpx;
	font-weight: 700;
	color: #c77413;
}

.primary-btn {
	background-color: #1f7db4;
}

.primary-btn-text {
	font-size: 26rpx;
	font-weight: 700;
	color: #ffffff;
}

.empty-box {
	padding: 24rpx 0;
}
</style>