<template>
	<ServicePageScaffold title="异常上报" fallback-url="/pages/mall/delivery/orders/detail">
		<view class="page">
			<view class="card">
				<text class="section-title">异常类型</text>
				<view class="type-grid">
					<view v-for="item in exceptionTypes" :key="item.value" class="type-item" :class="currentType == item.value ? 'type-active' : ''" @click="currentType = item.value">
						<text class="type-text">{{ item.label }}</text>
					</view>
				</view>
			</view>
			<view class="card">
				<text class="section-title">异常说明</text>
				<textarea class="textarea" v-model="description" placeholder="请填写异常说明"></textarea>
				<input class="field" v-model="occurredAt" placeholder="发生时间，例如 2026-05-20 15:36" />
				<input class="field" v-model="locationText" placeholder="当前位置 mock" />
				<view class="switch-row"><text class="switch-label">需要平台介入</text><switch :checked="needPlatformIntervention" color="#1f7db4" @change="changePlatformIntervention" /></view>
				<view class="switch-row"><text class="switch-label">申请取消订单</text><switch :checked="requestCancelOrder" color="#1f7db4" @change="changeCancelOrder" /></view>
				<view class="switch-row"><text class="switch-label">申请改期</text><switch :checked="requestReschedule" color="#1f7db4" @change="changeReschedule" /></view>
				<view class="mock-upload" @click="addMockImage"><text class="mock-upload-text">图片上传占位</text></view>
				<text class="info-text">已添加图片占位：{{ imageCount }} 张</text>
			</view>
			<view class="action-row">
				<view class="outline-btn" @click="goBack"><text class="outline-btn-text">返回详情</text></view>
				<view class="primary-btn" @click="submitForm"><text class="primary-btn-text">提交异常</text></view>
			</view>
		</view>
	</ServicePageScaffold>
</template>

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

const orderId = ref('')
const currentType = ref('cannot_contact_user')
const description = ref('')
const occurredAt = ref(new Date().toISOString().replace('T', ' ').substring(0, 19))
const locationText = ref('当前位置 mock')
const needPlatformIntervention = ref(false)
const requestCancelOrder = ref(false)
const requestReschedule = ref(false)
const imageCount = ref(0)
const exceptionTypes = [
	{ label: '联系不上用户', value: 'cannot_contact_user' },
	{ label: '用户不在家', value: 'user_not_home' },
	{ label: '地址错误', value: 'wrong_address' },
	{ label: '家属不配合', value: 'family_uncooperative' },
	{ label: '服务对象身体异常', value: 'elder_health_abnormal' },
	{ label: '环境不适合服务', value: 'safety_risk' },
	{ label: '超出服务范围', value: 'outside_service_scope' },
	{ label: '服务人员无法继续服务', value: 'staff_cannot_continue' },
	{ label: '突发疾病', value: 'emergency_illness' },
	{ label: '投诉纠纷', value: 'complaint_dispute' },
	{ label: '其他', value: 'other' }
]

function changePlatformIntervention(event: any) {
	needPlatformIntervention.value = event.detail.value === true
}

function changeCancelOrder(event: any) {
	requestCancelOrder.value = event.detail.value === true
}

function changeReschedule(event: any) {
	requestReschedule.value = event.detail.value === true
}

function addMockImage() {
	imageCount.value = imageCount.value + 1
	uni.showToast({ title: '已添加图片占位', icon: 'success' })
}

async function submitForm() {
	if (description.value.trim() == '') {
		uni.showToast({ title: '请填写异常说明', icon: 'none' })
		return
	}
	await submitAbnormalReport(orderId.value, {
		exceptionType: currentType.value as any,
		description: description.value,
		images: imageCount.value > 0 ? ['mock-abnormal-image-' + String(imageCount.value)] : [] as Array<string>,
		occurredAt: occurredAt.value,
		locationText: locationText.value,
		needPlatformIntervention: needPlatformIntervention.value,
		requestCancelOrder: requestCancelOrder.value,
		requestReschedule: requestReschedule.value
	})
	uni.showToast({ title: '异常已提交', icon: 'success' })
	setTimeout(() => {
		uni.redirectTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId.value })
	}, 300)
}

function goBack() {
	uni.redirectTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId.value })
}

onLoad(async (options) => {
	const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
	if (!authResult.ok) {
		return
	}
	if (options != null) {
		orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
	}
})
</script>

<style scoped>
.page {
	padding-bottom: 32rpx;
}

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

.section-title,
.primary-btn-text,
.type-text {
	font-weight: 700;
}

.section-title {
	font-size: 30rpx;
	color: #16324f;
}

.field,
.textarea {
	margin-top: 16rpx;
	padding: 0 20rpx;
	border-radius: 18rpx;
	background-color: #f4f8fb;
	font-size: 26rpx;
	color: #16324f;
	box-sizing: border-box;
}

.field {
	height: 84rpx;
}

.textarea {
	width: 100%;
	min-height: 180rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.type-grid {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.type-item {
	width: 48%;
	padding: 18rpx 16rpx;
	margin-top: 16rpx;
	border-radius: 18rpx;
	background: #eef2f6;
}

.type-active {
	background: #1f7db4;
}

.type-text {
	font-size: 24rpx;
	line-height: 34rpx;
	color: #476178;
}

.type-active .type-text {
	color: #ffffff;
}

.switch-row,
.action-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 16rpx;
}

.switch-label,
.info-text,
.outline-btn-text {
	font-size: 24rpx;
	color: #5e758c;
}

.mock-upload,
.outline-btn,
.primary-btn {
	margin-top: 18rpx;
	padding: 18rpx 0;
	border-radius: 18rpx;
	align-items: center;
	justify-content: center;
}

.mock-upload,
.outline-btn {
	background: #eaf2f0;
}

.mock-upload-text,
.outline-btn-text {
	font-size: 26rpx;
	color: #176e97;
}

.outline-btn,
.primary-btn {
	width: 48%;
}

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

.primary-btn-text {
	font-size: 26rpx;
	color: #ffffff;
}
</style>