<template>
	<!-- 骨架屏 -->
	<view v-if="loading" class="skeleton-container">
		<!-- 骨架屏提示信息 -->
		<view class="skeleton-warning">
			<view class="skeleton-warning-text"></view>
		</view>

		<!-- 骨架屏问题类型 -->
		<view class="skeleton-section">
			<view class="skeleton-title"></view>
			<view class="skeleton-radio-group">
				<view class="skeleton-radio-item" v-for="i in 6" :key="i">
					<view class="skeleton-radio-circle"></view>
					<view class="skeleton-radio-text"></view>
				</view>
			</view>
		</view>

		<!-- 骨架屏详细描述 -->
		<view class="skeleton-section">
			<view class="skeleton-title"></view>
			<view class="skeleton-textarea"></view>
		</view>

		<!-- 骨架屏图片上传 -->
		<view class="skeleton-section">
			<view class="skeleton-title"></view>
			<view class="skeleton-image-group">
				<view class="skeleton-image" v-for="i in 3" :key="i">
					<view class="skeleton-image-content"></view>
				</view>
			</view>
		</view>

		<!-- 骨架屏说明文字 -->
		<view class="skeleton-info"></view>

		<view class="" style="width: 100vw; height: 120rpx;"></view>

		<!-- 骨架屏底部按钮 -->
		<view class="skeleton-submit-section">
			<view class="skeleton-submit-btn"></view>
		</view>
	</view>

	<view v-else class="exception-report">
		<!-- 提示信息 -->
		<view class="warning-tip">
			<text class="warning-text">上报异常后，系统将自动暂停配送计时</text>
		</view>
		<!-- 问题类型选择 -->
		<view class="problem-section">
			<view class="section-title">请选择问题类型</view>
			<view class="radio-group">
				<view v-for="(item, index) in problemTypes" :key="index" class="radio-item"
					:class="{ active: selectedProblem === index }" @click="selectProblem(index)">
					<view class="radio-circle">
						<view v-if="selectedProblem === index" class="radio-inner"></view>
					</view>
					<text class="radio-text">{{ item }}</text>
				</view>
			</view>
		</view>

		<!-- 详细描述 -->
		<view class="description-section">
			<view class="section-title">详细描述问题</view>
			<up-textarea v-model="message.des" placeholder="请说明具体情况，如用户电话无法接通、地址找不到等..."></up-textarea>
		</view>

		<!-- 凭证图片上传 -->
		<view class="image-section">
			<view class="section-title">上传凭证图片（最多3张）</view>
			<view class="image-upload">
				<!-- 上传按钮 -->
				<view v-if="message.img.length <3" class="upload-btn" @click="uploaduserImg()">
					<u-icon name="plus" size="40rpx" color="#999"></u-icon>
				</view>

				<!-- 已上传图片 -->
				<view v-for="(image, index) in message.img" :key="index" class="image-item">
					<view class="image-placeholder">
						<image :src="Service.GetMateUrlByImg(image.url)" style="width: 100%; height: 100%; " mode="">
						</image>
					</view>
					<view class="delete-btn" @click="removeImage(index)">
						<u-icon name="close-circle" size="36rpx" color="#fff"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 说明文字 -->
		<!-- <view class="info-text">
			<up-icon name="clock" color="var(--nav-diluted)" size="22"></up-icon>
			<view style="margin-left: 20rpx;">上报后，本单配送时间将暂停计算，不影响您的准时率。</view>
		</view> -->

		<view class="" style="width: 100vw; height: 120rpx; ">

		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<u-button type="primary" class="submit-btn" @click="submitReport">提交异常上报</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { Service } from "@/Service/Service"
	import { onLoad } from '@dcloudio/uni-app'
	import { CNRiderOrderService } from '@/Service/CN/CNRiderOrderService'

	let loading = ref(false)
	// 问题类型选项
	const problemTypes = [
		'联系不上用户',
		'用户地址错误/不详',
		'餐品洒漏/包装破损',
		'商家出餐慢/未出餐',
		'交通堵塞/临时封路',
		'其他问题'
	]

	let message = ref({
		type: '联系不上用户',
		des: '',
		img: []
	})

	// 选中的问题类型
	const selectedProblem = ref<number | null>(0) // 默认选中第一个
	
	let orderId=ref('')
	onLoad((data:any) => {
		orderId.value=data.orderId
	})

	// 选择问题类型
	const selectProblem = (index : number) => {
		selectedProblem.value = index
		message.value.type = problemTypes[index]
	}
	// 上传图片
	const uploaduserImg = () => {
		uni.chooseImage({
			count: 1, // 最多选择1张图片
			sizeType: ['original', 'compressed'], // 支持原图和压缩图
			sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
			success: function (res) {
				let path = res.tempFiles[0].path
				Service.uploadH5(path, 'Avatar', data => {
					message.value.img.push({
						url: data
					})
				})
			},
			fail: function (err) {
				console.error('选择失败:', err.errMsg);
			}
		})
	}

	// 删除图片
	const removeImage = (index : number) => {
		message.value.img.splice(index, 1)
	}

	// 提交上报
	const submitReport = () => {
		if(!message.value.des){
			Service.Msg('请输入订单异常详情!')
			return
		}
		if(message.value.img.length==0){
			Service.Msg('请上传图片!')
			return
		}
		
		let img=JSON.stringify(message.value.img)
		CNRiderOrderService.ApplyOrderService(orderId.value,message.value.type,message.value.des,img).then(res=>{
			if(res.data){
				Service.Msg('提交成功!')
				setTimeout(()=>{
					Service.GoPage('/pages/my/abnormalDetail?orderId='+orderId.value)
				},1000)
			}else{
				Service.Msg(res.msg)
			}
		})

	}
</script>

<style scoped>
	/* 骨架屏样式 */
	.skeleton-container {
		min-height: 100vh;
		background-color: #fff;
	}

	/* 骨架屏导航栏 */
	.skeleton-nav-icon {
		width: 32rpx;
		height: 32rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: pulse 1.5s infinite;
	}

	.skeleton-nav-title {
		width: 180rpx;
		height: 36rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: pulse 1.5s infinite;
	}

	/* 骨架屏提示信息 */
	.skeleton-warning {
		height: 80rpx;
		background-color: #FFF2F0;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: pulse 1.5s infinite;
	}

	.skeleton-warning-text {
		width: 70%;
		height: 40rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
	}


	/* 骨架屏通用区块 */
	.skeleton-section {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #fff;
	}

	.skeleton-title {
		width: 200rpx;
		height: 36rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		margin-bottom: 30rpx;
		animation: pulse 1.5s infinite;
	}

	/* 骨架屏单选组 */
	.skeleton-radio-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.skeleton-radio-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 10rpx;
		animation: pulse 1.5s infinite;
	}

	.skeleton-radio-circle {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #d9d9d9;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #f5f5f5;
	}

	.skeleton-radio-text {
		width: 60%;
		height: 32rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
	}

	/* 骨架屏文本域 */
	.skeleton-textarea {
		height: 180rpx;
		background-color: #e6e6e6;
		border-radius: 10rpx;
		animation: pulse 1.5s infinite;
	}

	/* 骨架屏图片上传 */
	.skeleton-image-group {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.skeleton-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
		animation: pulse 1.5s infinite;
	}

	.skeleton-image-content {
		width: 100%;
		height: 100%;
		background-color: #e6e6e6;
		position: relative;
		overflow: hidden;
	}

	.skeleton-image-content::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		animation: shimmer 1.5s infinite;
	}

	/* 骨架屏说明文字 */
	.skeleton-info {
		height: 100rpx;
		background-color: #FFF2F0;
		margin: 30rpx;
		border-radius: 10rpx;
		animation: pulse 1.5s infinite;
	}

	/* 骨架屏底部按钮 */
	.skeleton-submit-section {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 30rpx;
		width: 100vw;
	}

	.skeleton-submit-btn {
		width: 100%;
		height: 90rpx;
		background-color: #e6e6e6;
		border-radius: 45rpx;
		animation: pulse 1.5s infinite;
	}

	/* 骨架屏动画 */
	@keyframes pulse {
		0% {
			opacity: 0.6;
		}

		50% {
			opacity: 0.8;
		}

		100% {
			opacity: 0.6;
		}
	}

	@keyframes shimmer {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	/* end */
	.exception-report {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 40rpx;
	}

	/* 提示信息样式 */
	.warning-tip {
		background-color: #FFF2F0;
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		text-align: center;
	}

	.warning-text {
		font-size: 30rpx;
		font-weight: 700;
		color: var(--nav-diluted);
	}

	/* 通用区域样式 */
	.problem-section,
	.description-section,
	.image-section {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
	}

	/* 问题类型选择样式 */
	.radio-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 10rpx;
		cursor: pointer;
		transition: all 0.3s;
	}

	.radio-item.active {
		border-color: #ff4d4f;
	}

	.radio-circle {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #d9d9d9;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.radio-item.active .radio-circle {
		border-color: #ff4d4f;
	}

	.radio-inner {
		width: 20rpx;
		height: 20rpx;
		background-color: #ff4d4f;
		border-radius: 50%;
	}

	.radio-text {
		font-size: 30rpx;
		color: #333;
	}

	/* 详细描述样式 */
	.description-input {
		border: 2rpx solid #e6e6e6;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		min-height: 160rpx;
	}

	/* 图片上传样式 */
	.image-upload {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.upload-btn {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #e2e2e2;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;
		cursor: pointer;
	}

	.image-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.image-placeholder {
		width: 100%;
		height: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
	}

	.delete-btn {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
	}

	/* 说明文字样式 */
	.info-text {
		display: flex;
		margin: 30rpx;
		padding: 20rpx;
		background-color: #FFF2F0;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: var(--nav-diluted);
		line-height: 1.5;
	}

	/* 提交按钮样式 */
	.submit-section {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 30rpx;
		width: 100vw;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		font-size: 32rpx;
		border-radius: 45rpx;
		background-color: var(--nav-diluted);
		border: none;
	}
</style>