<template>	<full-page mainStyle="background:#f0f0f0">
		<template v-if="item">
			<view v-if="refundInfo" :class="{ 'refund-info--elder': elderMode }" class="refund-info">
				<view :class="{ 'refund-title--elder': elderMode }" class="refund-title">{{ refundInfo.title }}</view>
				<view v-if="refundInfo.subTitle" :class="{ 'refund-subtitle--elder': elderMode }" class="refund-subtitle">{{ refundInfo.subTitle }}</view>
				<view v-if="refundInfo.time" :class="{ 'refund-subtitle--elder': elderMode }" class="refund-subtitle">{{ refundInfo.time }}</view>
			</view>
			<view :class="{ 'order-head--elder': elderMode }" class="order-head">订单信息</view>
			<view :class="{ 'card--elder': elderMode }" class="card">
				<view :class="{ 'card_head--elder': elderMode }" class="card_head info-row">
					<view :class="{ 'doctor-info--elder': elderMode }" class="doctor-info">
						<text :class="{ 'doctor-name--elder': elderMode }">{{ item.doctorName }}</text>
						<text :class="{ 'dept--elder': elderMode }" class="dept">{{ item.deptName }}</text>
					</view>
					<view :class="{ 'uni-primary--elder': elderMode }" class="uni-primary">{{ item.preOrderId ? "在线续方" : "在线复诊" }}</view>
				</view>
				<view :class="{ 'card_body--elder': elderMode }" class="card_body">
					<view :class="{ 'info-text--elder': elderMode }">
						<text :class="{ 'label--elder': elderMode }" class="label">线下确诊疾病：</text>
						<text :class="{ 'content--elder': elderMode }">{{ item.diseases.join("、") }}</text>
					</view>
					<view :class="{ 'desc--elder': elderMode }" class="desc">
						<text :class="{ 'label--elder': elderMode }" class="label">病情描述：</text>
						<text :class="{ 'content--elder': elderMode }">{{ item.description }}</text>
					</view>					<view :class="{ 'info-text--elder': elderMode }">
						<text :class="{ 'label--elder': elderMode }" class="label">问诊人：</text>
						<text :class="{ 'content--elder': elderMode }">{{ item.name }} {{ item.sex }}
							{{ item.age ? item.age + "岁" : "" }}</text>
					</view>					<view :class="{ 'date-text--elder': elderMode, 'date-line--elder': elderMode }" class="date-line">
						{{ item.createTime ? dayjs(item.createTime).format("YYYY-MM-DD HH:mm") : "" }}
					</view>
				</view>
				<view :class="{ 'card_footer--elder': elderMode }" class="card_footer info-row">
					<view :class="{ 'fee-label--elder': elderMode }">退费金额</view>
					<view :class="{ 'fee--elder': elderMode }" class="fee">￥{{ item.settlement.total_fee }}</view>
				</view>
			</view>
			<view :class="{ 'order-head--elder': elderMode }" class="order-head order-head--gap">退费申请</view>
			<view v-if="refundInfo" :class="{ 'card--elder': elderMode }" class="card">
				<view :class="{ 'card_body--elder': elderMode }" class="card_body">
					<view :class="{ 'info-row--elder': elderMode }" class="info-row">
						<view :class="{ 'label--elder': elderMode }" class="label">申请时间</view>
						<view :class="{ 'content--elder': elderMode }">{{ refundInfo.date }}</view>
					</view>
					<view :class="{ 'info-row--elder': elderMode }" class="info-row">
						<view :class="{ 'label--elder': elderMode }" class="label">退费原因</view>
						<view :class="{ 'content--elder': elderMode }">{{ refundInfo.reason }}</view>
					</view>
				</view>
			</view>
			<view v-if="!refundInfo" :class="{ 'reason-container--elder': elderMode }" class="reason-container">
				<textarea v-model="reason" placeholder="请输入退费原因" :maxlength="200" :class="{ 'reason-textarea--elder': elderMode }" class="reason-textarea"></textarea>
			</view>
		</template>
		<empty-data v-else />
		<template #footer>
			<footer-button v-if="!refundInfo && item" text="提交退费申请" @onClick="applyRefund" />
		</template>
	</full-page>
</template>
<script setup>
import {
	ref,
	computed,
	onMounted,
	onUnmounted
} from "vue";
import {
	onLoad
} from "@dcloudio/uni-app";
import dayjs from "dayjs";
import { applyRefundOrder } from "@/utils/api";
import {
	toast,
	confirm,
	loading,
	hideLoading
} from "@/utils/widget";

import emptyData from "@/components/empty.vue";
import fullPage from "@/components/full-page.vue";
import footerButton from "@/components/footer-button.vue";

// 大字版状态管理
const elderMode = ref(false);

// 处理长辈模式变化
const handleElderModeChange = () => {
	try {
		const storedElderMode = uni.getStorageSync('elderMode');
		elderMode.value = storedElderMode === 'true' || storedElderMode === true;
		
		// 同步到全局数据
		const app = getApp();
		if (app && app.globalData) {
			app.globalData.elderMode = elderMode.value;
		}
	} catch (error) {
		console.error('获取长辈模式状态失败:', error);
		elderMode.value = false;
	}
};

onMounted(() => {
	handleElderModeChange();
	// 监听长辈模式变化事件
	uni.$on('elderModeChanged', handleElderModeChange);
});

onUnmounted(() => {
	// 移除事件监听
	uni.$off('elderModeChanged', handleElderModeChange);
});

const item = ref(null)
const reason = ref('')

const refundInfo = computed(() => {
	if (item.value && item.value.refundInfo) {
		const { status, reason, updateTime, rejectReason, createTime } = item.value.refundInfo;
		const date = dayjs(createTime).format('YYYY-MM-DD HH:mm');
		if (status === 'INIT') {
			return { title: '您已成功发起退费申请，请耐心等待处理', subTitle: '医生如同意您的申请，系统将退款给您。', date, reason }
		}
		if (status === 'PASS') {
			return { title: '您的退费申请已通过', time: `${dayjs(updateTime).format('YYYY-MM-DD HH:mm')}`, date, reason }
		}
		if (status === 'REJECT') {
			return { title: '您的退费申请已被拒绝', subTitle: `拒绝原因：${rejectReason || ''}`, time: `${dayjs(updateTime).format('YYYY-MM-DD HH:mm')}`, date, reason }
		}
	}
	return null
})

onLoad((e) => {
	const order = uni.getStorageSync('refund-order')
	try {
		item.value = order
	} catch (e) { }
	// uni.removeStorageSync('refund-order')
});

async function applyRefund() {
	if (reason.value.trim() === '') {
		toast('请输入退费原因')
		return
	}
	confirm('确定提交退费申请吗？').then(async () => {
		loading('正在提交申请')
		try {
			const { success, message, data } = await applyRefundOrder({
				id: item.value._id,
				orderId: item.value.orderId,
				reason: reason.value.trim(),
			})
			hideLoading()
			if (success) {
				item.value.refundInfo = data;
				toast('退费申请已提交')
			} else {
				toast(message)
			}
		} catch (e) {
			hideLoading()
			toast(e.message)
		}
	})
}
</script>
<style lang="scss" scoped>
.refund-info {
	padding: 30rpx;
	margin-bottom: 30rpx;
	font-weight: 600;
	font-size: 32rpx;
	line-height: 50rpx;
	background-color: white;

	&--elder {
		padding: 40rpx;
		margin-bottom: 40rpx;
	}
}

.refund-title {
	&--elder {
		font-size: 40rpx;
		line-height: 64rpx;
	}
}

.refund-subtitle {
	color: #666;
	font-size: 28rpx;
	line-height: 44rpx;
	font-weight: normal;

	&--elder {
		font-size: 36rpx;
		line-height: 56rpx;
	}
}

.order-head {
	padding: 30rpx;
	font-weight: bold;
	font-size: 30rpx;
	background: #fff;
	margin-bottom: 1px;

	&--elder {
		padding: 40rpx;
		font-size: 38rpx;
	}
}

.order-head--gap {
	margin-top: 20rpx;
}

.reason-container {
	padding: 24rpx 30rpx;
	background-color: #fff;

	&--elder {
		padding: 32rpx 40rpx;
	}
}

.reason-textarea {
	width: 650rpx;
	height: 400rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	line-height: 44rpx;
	color: #333;

	&--elder {
		font-size: 36rpx;
		line-height: 56rpx;
		height: 500rpx;
		padding: 0 24rpx;
	}
}

.card {
	background: white;

	&--elder {
		margin-top: 28rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&--elder {
			margin: 8rpx 0;
		}
	}

	&_head {
		padding: 24rpx 30rpx 0;
		font-size: 28rpx;
		color: #333;

		&--elder {
			padding: 32rpx 40rpx 0;
			font-size: 36rpx;
		}
	}

	&_footer {
		padding: 24rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		border-top: 1px solid #f0f0f0;

		&--elder {
			padding: 32rpx 40rpx;
			font-size: 36rpx;
		}
	}

	.doctor-info {
		font-weight: bold;
		max-width: 400rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 48rpx;
		font-size: 30rpx;

		&--elder {
			max-width: 500rpx;
			line-height: 60rpx;
			font-size: 38rpx;
		}
	}

	.doctor-name--elder {
		font-size: 38rpx;
	}

	.dept {
		margin-left: 10rpx;
		color: #666;
		font-weight: normal;
		font-size: 28rpx;

		&--elder {
			font-size: 36rpx;
			margin-left: 14rpx;
		}
	}

	.uni-primary {
		&--elder {
			font-size: 36rpx;
		}
	}

	&_body {
		padding: 24rpx 30rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #333;

		&--elder {
			padding: 32rpx 40rpx;
			font-size: 36rpx;
			line-height: 60rpx;
		}

		.label {
			color: #666;
			flex-shrink: 0;
			margin-right: 20rpx;

			&--elder {
				font-size: 36rpx;
				margin-right: 24rpx;
			}
		}

		.content--elder {
			font-size: 36rpx;
		}

		.info-text--elder {
			font-size: 36rpx;
		}

		.date-text--elder {
			font-size: 36rpx;
		}
	}
	.date-line {
		margin-top: 16rpx;
		color: #999;
		font-size: 26rpx;
		text-align: left;

		&--elder {
			margin-top: 20rpx;
			font-size: 34rpx;
		}
	}

	.desc {
		&--elder {
			margin: 8rpx 0;
		}
	}
}

.fee {
	color: red;

	&--elder {
		font-size: 36rpx;
	}
}

.fee-label--elder {
	font-size: 36rpx;
}
</style>