<template>
	<ServicePageScaffold title="记录详情" fallback-url="/pages/mall/delivery/records/index">
		<ServicePanel title="执行留痕" subtitle="展示轨迹摘要、证据材料、验收与结算状态。">
			<text v-if="order != null" class="row-text">工单号：{{ order.orderNo }}</text>
			<text v-if="order != null" class="row-text">服务总结：{{ order.serviceSummary }}</text>
			<text v-if="order != null" class="row-text">验收状态：{{ order.statusText }}</text>
			<text v-if="order != null" class="row-text">结算状态：{{ order.settlementStatus }}</text>
			<text v-if="order != null" class="row-text">轨迹点数量：{{ order.trackPoints.length }}</text>
		</ServicePanel>
		<ServicePanel title="证据材料" subtitle="第一阶段展示图片证据，音视频先预留。">
			<view v-if="order != null && order.evidenceList.length == 0" class="empty-box"><text class="empty-text">暂无证据材料</text></view>
			<view v-if="order != null" v-for="item in order.evidenceList" :key="item.id" class="evidence-card">
				<text class="row-text">{{ item.phase }} / {{ item.name }}</text>
				<text class="row-text">状态：{{ item.status }}</text>
			</view>
		</ServicePanel>
	</ServicePageScaffold>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import type { DeliveryOrderType } from '@/types/delivery.uts'
import { getDeliveryOrderDetail } from '@/services/deliveryService.uts'
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'

const orderId = ref('')
const order = ref<DeliveryOrderType | null>(null)

async function loadData() {
	const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
	if (!authResult.ok || orderId.value == '') {
		return
	}
	order.value = await getDeliveryOrderDetail(orderId.value)
}

onLoad((options) => {
	if (options != null) {
		orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
	}
	loadData()
})
</script>

<style scoped>
.row-text,
.empty-text {
	display: block;
	margin-bottom: 12rpx;
	font-size: 24rpx;
	line-height: 36rpx;
	color: #16324f;
}

.evidence-card {
	padding: 18rpx;
	margin-bottom: 14rpx;
	border-radius: 18rpx;
	background: #f8fbfc;
}

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