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

		<!-- 维修流程模块 -->
		<view class="info-section">
			<view class="section-title">维修流程</view>
				<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" v-if="currentStep >= 0">{{timeData.createTime}}</view>
						<view class="step-time" v-if="currentStep >= 1">{{timeData.dispatchTime}}</view>
						<view class="step-time-3" v-if="currentStep >= 2">{{timeData.finishTime}}</view>
					</uni-col>
				</uni-row>
		</view>

		<!-- 报修信息模块 -->
		<view class="info-section">
				<view class="section-title">报修信息</view>
				<view class="info-item" v-if="!repairInfo.isPublic">
					<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-desc">
					<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-desc">
					<view class="info-label">问题照片</view>
					<view class="photo-container" v-if="repairInfo.images && repairInfo.images.length">
						<image class="photo-item" v-for="(img, index) in repairInfo.images" :key="index" :src="img" mode="aspectFill" @click="previewImage(img)"></image>
					</view>
					<!-- <view class="photo-container" v-else>
						<view class="photo-item">
						</view>
					</view> -->
				</view>
				<view class="info-item">
					<view class="info-label">预约时间</view>
					<view class="info-value">{{repairInfo.orderDate}}</view>
				</view>
		</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'
import { getRepairDetail } from '../api/api.js'

const nvueWidth = ref('300')

// 报修信息数据
const repairInfo = ref({
  house: '',
  project: '',
  title: '',
  description: '',
  phone: '',
  orderDate:'',
  time: '',
  images: [],
  isPublic: false
})

// 步骤状态
const currentStep = ref(0)
// 三个步骤对应的时间
const timeData = ref({
  createTime: '',    // 待处理/提交时间
  dispatchTime: '', // 已派单时间
  finishTime: ''    // 已完成时间
})


const setStep = (status) => {
  if (status === '0' || status === 0) currentStep.value = 0
  else if (status === '1' || status === 1) currentStep.value = 1
  else if (status === '2' || status === 2) currentStep.value = 2
  else currentStep.value = 0
}

const mapData = (data) => {
  if (!data) return
  const images = data.problemImageUrl ? data.problemImageUrl.split(',').filter(Boolean) : []
  repairInfo.value = {
    house: data.houseName || '',
    project: data.maintenanceItemName || '',
    title: data.item || '',
    description: (data.problem || '').replace(/\\n/g, '\n'),
    phone: data.phone || '',
	orderDate: data.orderDate || '',
    time: data.createTime || '',
    images,
    // 公共报修不展示报修房屋
    isPublic: data.projectTypeStr === '公共报修'
  }
  setStep(data.problemStatus)
    // 三个步骤时间赋值
    timeData.value.createTime = data.updateTime || ''
    timeData.value.dispatchTime = data.updateTime || ''
    timeData.value.finishTime = data.updateTime || ''
}

// 获取详情接口
const fetchDetail = async (id) => {
  if (!id) {
    return
  } 
  try {
    const res = await getRepairDetail({ id })
    
    if (res.code === 200) {
      mapData(res.data || {})
    } else {
      uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: '网络异常', icon: 'none' })
  }
}

onLoad((option) => {
  // console.log("页面打开，路由参数：", option)
  
  // 传了 id 才调用接口
  if (option?.id) {
    fetchDetail(option.id) // 调用接口
  } else {
    uni.showToast({ title: '参数错误', icon: 'none' })
  }
})

// 预览图片
const previewImage = (url) => {
  uni.previewImage({ urls: repairInfo.value.images, current: url })
}

// 联系物业按钮点击事件
const contactProperty = () => {
	uni.navigateTo({
		url: '/pageSubPack/service-list/contactProperty'
	})
}
</script>

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

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

	.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: 24rpx;
		color: #999;
	}
	.step-time-3{
		height: 38px;
		line-height: 38px;
		font-size: 24rpx;
		color: #999;
	}

	.section-title {
		font-size: 32rpx;
		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;
	}

	.info-item {
		display: flex;
		padding: 12px 0;
	}
	.info-item-desc {
		padding: 12px 0;
	}

	.info-section.active {
		color: #007AFF;
	}

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

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

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

	.multi-line {
		white-space: pre-wrap;
		word-break: break-all;
		line-height: 1.5;
		border: 1px solid #f0f0f0;
		border-radius: 8rpx;
		padding: 30rpx;
		margin: 30rpx 0;
	}

	.photo-container {
		display: flex;
		flex-wrap: wrap;
		margin-top: 4px;
		margin-right: -12px;
		margin-bottom: -12px;
	}

	.photo-item {
		width: 95px;
		height: 80px;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		margin-right: 12px;
		margin-bottom: 12px;
	}

	.btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		background-color: #ffffff;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
	}

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

	.contact-btn::after {
		border: none;
	}
	/* ========== 颜色的代码 ========== */
	/* 激活的步骤标题 + 描述 强制蓝色 */
	:deep(.u-steps-item__content--current .u-text__value--main) {
	  color: #007aff !important;
	}
	:deep(.u-steps-item__content--current .u-text__value--tips) {
	  color: #007aff !important;
	}

</style>