<template>
	<view class="repair-detail-container">

		<!-- 维修流程模块 -->
		<view class="info-section">
			<uni-section title="维修流程" type="line" style="margin-bottom: 20rpx;">
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="12">
						<up-steps :current="currentStep" direction="column" space="30" active-color="#007aff">
							<up-steps-item title="待处理" desc="提交报修成功"></up-steps-item>
							<up-steps-item title="已派单" desc="维修师傅已接单"></up-steps-item>
							<up-steps-item title="已完成" desc="维修完成"></up-steps-item>
						</up-steps>
					</uni-col>
					<uni-col :span="12">
						<view class="step-time">2026-03-24 09:30:38</view>
						<view class="step-time">2026-03-26 09:30:38</view>
						<view class="step-time-3">2026-03-28 09:30:38</view>
					</uni-col>
				</uni-row>
				
			</uni-section>
		</view>

		<!-- 报修信息模块 -->
		<view class="info-section">
			<uni-section title="报修信息" type="line" style="margin-bottom: 20rpx;">
				<!-- <view class="section-title">报修信息</view> -->
				<view class="info-item">
					<view class="info-label">报修房屋</view>
					<view class="info-value">{{repairInfo.house}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">维修项目</view>
					<view class="info-value">{{repairInfo.project}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">标题</view>
					<view class="info-value">{{repairInfo.title}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">问题描述</view>
					<view class="info-value multi-line">{{repairInfo.description}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">手机号</view>
					<view class="info-value">{{repairInfo.phone}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">报修时间</view>
					<view class="info-value">{{repairInfo.time}}</view>
				</view>
				<view class="info-item">
					<view class="info-label">问题照片</view>
					<view class="photo-container">
						<view class="photo-item" v-for="(item, index) in 2" :key="index">
							<uni-icons type="plusempty" size="24" color="#ccc"></uni-icons>
						</view>
					</view>
				</view>
			</uni-section>
		</view>

		<!-- 联系物业按钮 -->
		<view class="btn-container">
			<button class="contact-btn" @click="contactProperty">联系物业</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 步骤条当前激活的步骤（0=待处理，1=已派单，2=已完成）
	const currentStep = ref(2)
	const nvueWidth = ref('300')

	// 报修信息数据
	const repairInfo = ref({
		house: '桂花园(别墅) 2号楼2层',
		project: '照明-路灯',
		title: '1栋楼下道路灯不亮了',
		description: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
		phone: '15688888888',
		time: '2023-08-01 15:30'
	})

	onLoad((option) => {
		const decodeStr = decodeURIComponent(JSON.stringify(option))
		// let item = JSON.parse(decodeStr)
		// repairInfo.value = optionStr
		console.log('item', decodeStr)
		const status = decodeStr.statusClass
		// console.log('status',status)
		switch (status) {
			case 'pending': //待处理 
				currentStep.value = 0
				break
			case 'assignde':
				currentStep.value = 1
				break
			case 'completed':
				currentStep.value = 2
				break
			default:
				currentStep.value = 0
		}
	})

	// 联系物业按钮点击事件
	const contactProperty = () => {
		uni.showToast({
			title: '正在联系物业...',
			icon: 'none'
		})
	}
</script>

<style scoped>
	.repair-detail-container {
		padding: 16px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.process-section,
	.info-section {
		background-color: #fff;
		border-radius: 8px;
		padding: 13px;
		margin-bottom: 16px;
		/* margin-top: 20rpx; */
	}

	.repair-steps-container {
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

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

	.step-time {
		height: 54px;
		line-height: 54px;
		font-size: 12px;
		color: #999;
	/* 	font-size: 22rpx;
		color: #999;
		text-align: right;
		margin-top: 5rpx; */
	}
	.step-time-3{
		height: 38px;
		line-height: 38px;
		font-size: 12px;
		color: #999;
	}

	/* -------- */
	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 12px;
		color: #333;
	}

	.slot-title {
		position: absolute;
		top: -10px;
		font-size: 12px;
		font-weight: 400;
	}

	.slot-desc {
		font-size: 10px;

	}

	/* .step-time {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 14px;
		color: #999;
		white-space: nowrap;
	} */

	.info-item {
		display: flex;
		padding: 12px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-section.active {
		color: #007AFF;
		/* font-weight: 500; */
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		width: 80px;
		color: #666;
		font-size: 14px;
	}

	.info-value {
		flex: 1;
		color: #333;
		font-size: 14px;
	}

	.multi-line {
		white-space: pre-wrap;
		line-height: 1.5;
	}

	.photo-container {
		display: flex;
		gap: 12px;
		margin-top: 4px;
	}

	.photo-item {
		width: 80px;
		height: 80px;
		border: 1px dashed #ccc;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-container {
		padding: 16px;
	}

	.contact-btn {
		background-color: #007AFF;
		color: #fff;
		border: none;
		border-radius: 8px;
		height: 48px;
		font-size: 16px;
		width: 100%;
	}

	.contact-btn::after {
		border: none;
	}
</style>