<!-- 编辑救援工单 -->
<template>
	<view class="content">
		<VNavigationBarVue :title="title"></VNavigationBarVue>
		<view class="dil">
			<!-- 编辑模式提示 -->
			<view class="edit-mode-indicator" v-if="isEditMode">
				正在编辑工单
			</view>

			<view style="color: #000;font-size: 34rpx;font-weight:bold;padding: 24rpx 0;">救援地址</view>

			<!-- 救援地址 头部-->
			<view class="top">
				<view style="flex: 1;width: 0;">
					<!-- 起 -->
					<view class="top-box">
						<view class="tb-left">
							<image class="uicon" src="@/static/icons/initiate/start.png" mode="aspectFit"></image>
							<view @click="getmap()" style="width: 100%; position: relative;">
								<view class="text1" v-show="four == ''" v-if="rescueType != 5">请选择救援地址</view>
								<view class="text1" v-show="four == ''" v-if="rescueType == 5">请选择扣车地址</view>
								<view class="text1" v-show="four != ''">{{province}}{{city}}{{area}}</view>
								<view class="hong1" v-show="four == ''">*必填，请填写详细地址</view>
								<view class="hong2" v-show="four != ''">
									<textarea disabled style="width: 100%; height: 100rpx;"
										:placeholder="four"></textarea>
									<view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 终 -->
					<view class="top-box" v-if="rescueType == 1 || rescueType == 8"
						style="border-top:1px solid #EAEAEA;">
						<view class="tb-left">
							<image class="uicon" src="@/static/icons/initiate/end.png" mode="aspectFit"></image>
							<view @click="getmap1()" style="width: 100%; overflow: hidden; position: relative;">
								<view class="text1" v-show="four1 == ''">请选择终点地址</view>
								<view class="text1" v-show="four1 != ''">{{province1}}{{city1}}{{area1}}</view>
								<view class="hong2" v-show="four1 != ''">
									<textarea disabled style="width: 100%; height: 100rpx;"
										:placeholder="four1"></textarea>
									<view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<image v-if="rescueType == 1 || rescueType == 8" class="start-end"
					src="@/static/icons/initiate/qiehuan.png" mode="aspectFit">
				</image>
			</view>

			<view style="color: #000;font-size: 34rpx;font-weight:bold;padding: 24rpx 0;">救援地址备注</view>
			<view class="jyxx">
				<view class="jyxx-tinput">
					<view class="text1">救援地址备注</view>
					<view class="you">
						<textarea auto-height v-model="remarkRescuePosition" placeholder="请输入救援地址备注"
							placeholder-style="color: #929292;font-size:24rpx"
							style="width:100%;min-height:100rpx;"></textarea>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">目的地备注</view>
					<view class="you">
						<textarea auto-height v-model="remarkDestinationInfo" placeholder="请输入目的地备注"
							placeholder-style="color: #929292;font-size:24rpx"
							style="width:100%;min-height:100rpx;"></textarea>
					</view>
				</view>
			</view>

			<view style="color: #000;font-size: 34rpx;font-weight: bold;padding: 24rpx 0;">救援信息</view>

			<!-- 填空 -->
			<view class="jyxx">
				<view class="jyxx-tinput" @click="show = true" v-if="isAppointment == 1">
					<view class="text1"> <text class="hong1">*</text> 预约时间</view>
					<view class="you">
						<text>{{rescueTime}}</text>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">故障车经办人</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入故障车经办人"
							v-model="connectionName">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">经办人手机号</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入经办人手机号"
							v-model="connectionPhone">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">车主</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车主"
							v-model="carOwner">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">车主手机号</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车主手机号"
							v-model="carOwnerPhone">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">车牌号</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车牌号"
							v-model="licenseNum">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">车型(品牌)</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入车型"
							v-model="carBrand">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1"> <text class="hong1">*</text> 车辆类型</view>
					<view class="xz">
						<view :class="{'xlan':carzhi == index}" class="kuang" v-for="(item,index) in car" :key="index"
							@click="getzhi(index,item.value)">
							<view class="">{{item.label}}</view>
						</view>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1"> <text class="hong1">*</text> 故障车辆是否为新能源</view>
					<view class="xz" style="flex-wrap: wrap;row-gap: 20rpx">
						<view :class="{'xlan': ifNewEnergy==='1'}" class="kuang" @click="ifNewEnergy = '1'">
							<view class="">是</view>
						</view>
						<view :class="{'xlan': ifNewEnergy==='0'}" class="kuang" @click="ifNewEnergy = '0'">
							<view class="">否</view>
						</view>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1"> <text class="hong1">*</text> 故障类型选择</view>
					<view class="channel-container">
						<view :class="{'channel-item-selected': selectedFaultTypeId === item.id}" class="channel-item"
							v-for="(item,index) in faultTypeOptions" :key="index" @click="chooseFaultType(item)">
							<view class="channel-text">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="xinput-fault" v-if="selectedFaultTypeId">
					<view class="text1"> <text class="hong1">*</text> 故障现象选择</view>
					<view class="source-container">
						<view :class="{'source-item-selected': selectedPhenomenonId === item.id}" class="source-item"
							v-for="(item,index) in filteredPhenomenonOptions" :key="index"
							@click="choosePhenomenon(item)">
							<view class="source-text">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">故障现象备注</view>
					<view class="you">
						<textarea auto-height v-model="faultPhenomenon" placeholder="请输入故障现象备注"
							placeholder-style="color: #929292;font-size:24rpx"
							style="width:100%;min-height:100rpx;"></textarea>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">救援需求</view>
					<view class="you">
						<textarea auto-height v-model="rescueNeeds" placeholder="请输入救援需求"
							placeholder-style="color: #929292;font-size:24rpx"
							style="width:100%;min-height:100rpx;"></textarea>
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">预估下车地</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入预估下车地"
							v-model="estimateDownCar">
					</view>
				</view>
				<view class="jyxx-tinput">
					<view class="text1">预估费用(元)</view>
					<view class="you">
						<input type="text" placeholder-style="color: #929292;font-size:24rpx" placeholder="请输入预估费用"
							v-model="estimateMoney">
					</view>
				</view>
				<view class="jyxx-tinput" @click="shows = true" v-if="rescueType == 5">
					<view class="text1"> <text class="hong1">*</text> 扣车地点</view>
					<view class="you">
						<text>{{kcname || ''}}</text>
					</view>
				</view>
			</view>

			<view class="xinput">
				<view class="text1"> <text class="hong1">*</text> 业务渠道选择</view>
				<view class="channel-container">
					<view :class="{'channel-item-selected': selectedChannelId === item.id}" class="channel-item"
						v-for="(item,index) in channelOptions" :key="index" @click="chooseChannel(item)">
						<view class="channel-text">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="xinput" v-if="selectedChannelId">
				<view class="text1"> <text class="hong1">*</text> 来源选择</view>
				<view class="source-container">
					<view :class="{'source-item-selected': selectedSourceId === item.id}" class="source-item"
						v-for="(item,index) in filteredSourceOptions" :key="index" @click="chooseSource(item)">
						<view class="source-text">{{item.name}}</view>
					</view>
				</view>
			</view>

			<view class="xinput" v-if="orderStatus == '1' || orderStatus == '0' ">
				<view class="text1"> <text class="hong1">*</text> 收费类型</view>
				<view class="xz">
					<view :class="{'xlan':maneizhi == index}" class="kuang" v-for="(item,index) in manei" :key="index"
						@click="getzhi2(index,item.value)">
						<view class="">{{item.label}}</view>
					</view>
				</view>
				<view v-if="feeType == 2" style="margin-top: 10rpx;">
					<text style="font-size: 24rpx; color: red; font-weight: bold;">
						* 选择挂账即为同意该订单挂账，
						司机在收费时可以选择该订单为挂账</text>
				</view>
			</view>

			<view class="xinput" v-if="rescueType !== 5">
				<view class="text1"> <text class="hong1">*</text> 是否扣车</view>
				<view class="xz" style="flex-wrap: wrap;row-gap: 20rpx">
					<view :class="{'xlan': isKouChe==='1'}" class="kuang" @click="isKouChe = '1'">
						<view class="">是</view>
					</view>
					<view :class="{'xlan': isKouChe==='0'}" class="kuang" @click="isKouChe = '0'">
						<view class="">否</view>
					</view>
				</view>
			</view>

			<view class="tinput">
				<view class="text1" style="flex-shrink: 0;"> 备注</view>
				<view class="you">
					<input type="text" placeholder-style="color: #929292;font-size: 24rpx" placeholder="添加备注"
						v-model="rescueDetail">
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" @confirm="confirms" @cancel="cancels"
				mode="datetime"></u-datetime-picker>

			<view class="anniu" @click="postadd()">
				<text>保存修改</text>
			</view>
			<view style="width: 100%; height: 60px;"></view>
		</view>
		<view class="">
			<u-picker :show="shows" :columns="columns" @confirm="confirmm" @cancel="cancelm" keyName="label"></u-picker>
		</view>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import VNavigationBarVue from '../../components/VNavigationBar.vue'
	import request from '../../utils/request'
	import {
		getTenantId
	} from "@/utils/auth";

	export default {
		data() {
			return {
				isEditMode: true,
				infoId: '',
				orderId: '',
				isKouChe: '0',
				show: false,
				value1: Number(new Date()),
				rescueLongitude: '',
				rescueLatitude: '',
				connectionName: '',
				connectionPhone: '',
				carOwner: '',
				carOwnerPhone: '',
				rescuePosition: '',
				rescueDetail: '',
				rescueType: '',
				carType: 1,
				feeType: null,
				licenseNum: '',
				carBrand: '',
				remarkDestinationInfo: '',
				remarkRescuePosition: '',
				faultPhenomenon: '',
				rescueNeeds: '',
				estimateDownCar: '',
				estimateMoney: '',
				isAppointment: 0,
				rescueTime: '请选择约定时间',
				carzhi: null,
				maneizhi: null,
				province: '',
				city: '',
				area: '',
				four: '',
				province1: '',
				city1: '',
				area1: '',
				four1: '',
				shows: false,
				kcname: '',
				columns: [],
				title: '编辑工单',
				manei: [],
				car: [],
				selectedChannelId: null,
				selectedChannelName: '',
				selectedSourceId: null,
				selectedSourceName: null,
				channelOptions: [],
				sourceOptions: [],
				selectedFaultTypeId: null,
				selectedFaultTypeName: '',
				selectedPhenomenonId: null,
				selectedPhenomenonName: null,
				faultTypeOptions: [],
				phenomenonOptions: [],
				ifNewEnergy: '',
				userinfo: {},
				destinationLongitude: null,
				destinationLatitude: null,
				destinationInfo: '',
				orderStatus: '',
			}
		},
		computed: {
			filteredSourceOptions() {
				if (!this.selectedChannelId) return [];
				return this.sourceOptions.filter(item => item.pid == this.selectedChannelId);
			},
			filteredPhenomenonOptions() {
				if (!this.selectedFaultTypeId) return [];
				return this.phenomenonOptions.filter(item => item.pid == this.selectedFaultTypeId);
			}
		},
		onLoad(option) {
			console.log('option', option)
			this.rescueType = option.rescueType;

			this.newtwo().then(() => {
				if (option.data) {
					const orderData = JSON.parse(decodeURIComponent(option.data));
					this.populateFormData(orderData);
				}
			}).catch(error => {
				console.error('加载选项数据失败:', error);
			});

			if (this.rescueType) {
				switch (this.rescueType) {
					case '1':
						this.title = '编辑拖车工单'
						break;
					case '2':
						this.title = '编辑送油工单'
						break;
					case '3':
						this.title = '编辑搭电工单'
						break;
					case '4':
						this.title = '编辑换胎工单'
						break;
					case '5':
						this.title = '编辑扣车工单'
						break;
					default:
						this.title = '编辑工单'
						break;
				}
			}

			// this.newtwo();
			this.kcdd();
		},
		components: {
			tabBar,
			VNavigationBarVue
		},
		methods: {
			async newtwo() {
				return new Promise(async (resolve, reject) => {
					try {
						// 并行加载所有选项数据
						const [feeTypeRes, carTypeRes] = await Promise.all([
							request({
								url: '/rescue/dict/data/type/fee_type',
								method: 'get',
							}),
							request({
								url: '/rescue/dict/data/type/rescue_car_type',
								method: 'get',
							})
						]);

						this.manei = feeTypeRes.data;
						this.car = carTypeRes.data;

						this.userinfo = uni.getStorageSync('userInfo');

						// 并行加载其他选项数据
						await Promise.all([
							this.loadChannelOptions(),
							this.loadSourceOptions(),
							this.loadFaultTypeOptions(),
							this.loadPhenomenonOptions()
						]);

						resolve();
					} catch (error) {
						console.error('加载选项数据失败:', error);
						reject(error);
					}
				});
			},

			kcdd() {
				request({
					url: '/system/rescueInfo/getKcPosition',
					method: 'get',
				}).then((res) => {
					this.columns.push(res.data)
				})
			},

			confirmm(e) {
				this.kcname = e.value[0].label
				this.shows = false
			},

			cancelm() {
				this.shows = false
			},

			confirms(e) {
				const timestamp = e.value
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				this.rescueTime = `${year}-${month}-${day} ${hours}:${minutes}`
				this.show = false
			},

			cancels() {
				this.show = false
			},

			async postadd() {
				// this.rescueSceneImage = this.imageList.join(",")
				if (typeof this.rescueTime === "number") {} else {
					this.rescueTime = ''
				}
				if (this.isAppointment == 'undefined') {
					this.isAppointment = 0
				}
				if (this.rescueLongitude == "" || this.rescueLatitude == "") {
					uni.showToast({
						title: '起点位置不能为空',
						icon: 'none'
					})
					return
				}
				if (this.feeType === null) {
					uni.showToast({
						title: '请选择收费类型',
						icon: 'none'
					})
					return
				}

				let data = {
					id: this.infoId,
					rescueLongitude: this.rescueLongitude,
					rescueLatitude: this.rescueLatitude,
					destinationLongitude: this.destinationLongitude,
					destinationLatitude: this.destinationLatitude,
					connectionName: this.connectionName,
					connectionPhone: this.connectionPhone,
					carOwner: this.carOwner,
					carOwnerPhone: this.carOwnerPhone,
					rescuePosition: this.rescuePosition,
					destinationInfo: this.destinationInfo,
					licenseNum: this.licenseNum,
					isAppointment: this.isAppointment,
					rescueTime: this.rescueTime,
					rescueDetail: this.rescueDetail,
					rescueSceneImage: this.rescueSceneImage,
					rescueType: this.rescueType,
					carType: this.carType,
					feeType: this.feeType,
					kcPosition: this.kcname,
					isKouChe: this.isKouChe,
					faultPhenomenon: this.faultPhenomenon,
					rescueNeeds: this.rescueNeeds,
					estimateDownCar: this.estimateDownCar,
					estimateMoney: this.estimateMoney,
					isWeiXiu: '0',
					carBrand: this.carBrand,
					sectionRoad: (this.seletedRoad && this.seletedRoad.length > 0) ? this.seletedRoad[0] : null,
					channel: this.selectedChannelName,
					source: this.selectedSourceName,
					remarkRescuePosition: this.remarkRescuePosition,
					remarkDestinationInfo: this.remarkDestinationInfo,
					faultType: this.selectedFaultTypeName,
					phenomenon: this.selectedPhenomenonName,
					ifNewEnergy: this.ifNewEnergy,
					orderId: this.orderId,
				}

				try {
					const res = await request({
						url: '/app/rescueInfo/updateRescueInfoOnHomePage',
						method: 'put',
						data: data
					});

					if (res.code == 200) {
						uni.showToast({
							title: '修改成功'
						})

						// 触发全局事件，通知首页刷新数据
						// uni.$emit('refreshHomePage');

						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							})
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg || '修改失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: '修改失败，请重试',
						icon: 'none'
					})
				}
			},

			getmap() {
				let that = this
				console.log('选择位置Start')
				uni.getLocation({
					type: 'wgs84',
					success: function(getres) {
						console.log('当前位置的经度：' + getres.longitude);
						console.log('当前位置的纬度：' + getres.latitude);

						uni.chooseLocation({
							latitude: getres.latitude,
							longitude: getres.longitude,
							success: function(res) {
								console.log(res)
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								that.rescueLongitude = res.longitude
								that.rescueLatitude = res.latitude

								that.rescuePosition = res.address
								var address = res.address;
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								let addressList = address.match(reg).toString().split(",");
								if (addressList[0] == '重庆市' || addressList[0] == '北京市' ||
									addressList[0] == '天津市' ||
									addressList[0] == '上海市') {
									that.province = addressList[0];
									that.city = '市辖区';
									that.area = addressList[1];
									that.four = address.replace(that.province, '').replace(that
										.city, '').replace(that
										.area, '');
								} else {
									that.province = addressList[0];
									that.city = addressList[1];
									that.area = addressList[2];
									that.four = address.replace(that.province, '').replace(that
										.city, '').replace(that
										.area, '');
								};
								console.log(that.four.indexOf(res.name));
								if (that.four.indexOf(res.name) < 0) {
									that.four = that.four + res.name
									that.rescuePosition = that.rescuePosition + res.name
								}

							},
							fail: (err) => {
								console.log(err, 'err')
							},
							complete(res) {
								console.log(res, 'cpmplete')
							}
						});
					}
				});
			},

			getmap1() {
				let that = this
				console.log('选择位置End')
				uni.getLocation({
					type: 'wgs84',
					success: function(getres) {
						console.log('当前位置的经度：' + getres.longitude);
						console.log('当前位置的纬度：' + getres.latitude);

						uni.chooseLocation({
							latitude: getres.latitude,
							longitude: getres.longitude,
							success: function(res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								console.log(res)
								that.destinationLongitude = res.longitude
								that.destinationLatitude = res.latitude
								that.destinationInfo = res.address
								var address = res.address;
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								let addressList = address.match(reg).toString().split(",");
								if (addressList[0] == '重庆市' || addressList[0] == '北京市' ||
									addressList[0] ==
									'天津市' ||
									addressList[0] == '上海市') {
									that.province1 = addressList[0];
									that.city1 = '市辖区';
									that.area1 = addressList[1];
									that.four1 = address.replace(that.province, '').replace(that
											.city, '')
										.replace(that
											.area, '');
								} else {
									that.province1 = addressList[0];
									that.city1 = addressList[1];
									that.area1 = addressList[2];
									that.four1 = address.replace(that.province, '').replace(that
											.city, '')
										.replace(that
											.area, '');
								};
								console.log(that.four1);

							}
						});
					}
				});
			},

			getzhi(index, id) {
				this.carType = id
				this.carzhi = index
			},

			getzhi2(index, id) {
				this.feeType = id
				this.maneizhi = index
			},

			chooseChannel(item) {
				if (this.selectedChannelId === item.id) {
					this.selectedChannelId = null;
					this.selectedChannelName = '';
					this.selectedSourceId = null;
				} else {
					this.selectedChannelId = item.id;
					this.selectedChannelName = item.name;
					this.selectedSourceId = null;
				}
			},

			chooseSource(item) {
				if (this.selectedSourceId === item.id) {
					this.selectedSourceId = null;
					this.selectedSourceName = '';
				} else {
					this.selectedSourceId = item.id;
					this.selectedSourceName = item.name;
				}
			},

			chooseFaultType(item) {
				if (this.selectedFaultTypeId === item.id) {
					this.selectedFaultTypeId = null;
					this.selectedFaultTypeName = '';
					this.selectedPhenomenonId = null;
				} else {
					this.selectedFaultTypeId = item.id;
					this.selectedFaultTypeName = item.name;
					this.selectedPhenomenonId = null;
				}
			},

			choosePhenomenon(item) {
				if (this.selectedPhenomenonId === item.id) {
					this.selectedPhenomenonId = null;
					this.selectedPhenomenonName = '';
				} else {
					this.selectedPhenomenonId = item.id;
					this.selectedPhenomenonName = item.name;
				}
			},

			async loadSourceOptions() {
				try {
					const res = await request({
						url: '/rescue-channel-source/listByPid',
						method: 'get',
						params: {
							pid: null
						}
					});
					if (res.code === 200) {
						this.sourceOptions = res.data;
					}
				} catch (error) {
					console.error('加载来源选项失败:', error);
				}
			},

			async loadChannelOptions() {
				try {
					const res = await request({
						url: '/rescue-channel-source/getChannelListByDispatchId',
						method: 'get',
						params: {
							dispatchId: this.userinfo.id
						}
					});
					if (res.code === 200 && res.data) {
						this.channelOptions = res.data;
					}
				} catch (error) {
					console.error('加载渠道选项失败:', error);
				}
			},

			async loadFaultTypeOptions() {
				try {
					const res = await request({
						url: '/rescue-type-phenomenon/typeList',
						method: 'get'
					});
					if (res.code === 200 && res.data) {
						this.faultTypeOptions = res.data;
					}
				} catch (error) {
					console.error('加载故障类型选项失败:', error);
				}
			},

			async loadPhenomenonOptions() {
				try {
					const res = await request({
						url: '/rescue-type-phenomenon/listPhenomenonByPid',
						method: 'get',
						params: {
							pid: null
						}
					});
					if (res.code === 200) {
						this.phenomenonOptions = res.data;
					}
				} catch (error) {
					console.error('加载故障现象选项失败:', error);
				}
			},

			populateFormData(orderData) {
				this.infoId = orderData.id || '';
				this.rescueType = orderData.rescueType || '';
				this.rescueLongitude = orderData.rescueLongitude || '';
				this.rescueLatitude = orderData.rescueLatitude || '';
				this.rescuePosition = orderData.rescuePosition || '';
				this.orderId = orderData.orderId || '';
				this.orderStatus = orderData.orderStatus || '';
				console.log('orderData.orderId', this.orderId)

				// 解析救援地址
				if (orderData.rescuePosition) {
					this.parseAddress(orderData.rescuePosition, 'start');
				}

				// 处理目的地地址（仅拖车类型）
				if (orderData.rescueType == 1 || orderData.rescueType == 8) {
					this.destinationLongitude = orderData.destinationLongitude || null;
					this.destinationLatitude = orderData.destinationLatitude || null;
					this.destinationInfo = orderData.destinationInfo || '';

					if (orderData.destinationInfo) {
						this.parseAddress(orderData.destinationInfo, 'end');
					}
				}

				// 其余字段赋值保持不变
				this.isAppointment = orderData.isAppointment || 0;
				if (orderData.rescueTime && orderData.rescueTime !== '暂无数据') {
					this.rescueTime = orderData.rescueTime;
					this.value1 = new Date(orderData.rescueTime).getTime();
				}

				this.connectionName = orderData.connectionName || '';
				this.connectionPhone = orderData.connectionPhone || '';
				this.carOwner = orderData.carOwner || '';
				this.carOwnerPhone = orderData.carOwnerPhone || '';
				this.licenseNum = orderData.licenseNum || '';
				this.carBrand = orderData.carBrand || '';
				this.carType = orderData.carType || 1;

				// 设置车辆类型选中状态
				if (this.car && this.car.length > 0) {
					const carIndex = this.car.findIndex(item => item.value == this.carType);
					if (carIndex !== -1) {
						this.carzhi = carIndex;
					}
				}

				this.ifNewEnergy = orderData.ifNewEnergy || '';
				this.selectedFaultTypeName = orderData.faultType || '';
				this.selectedPhenomenonName = orderData.phenomenon || '';
				this.faultPhenomenon = orderData.faultPhenomenon || '';
				this.rescueNeeds = orderData.rescueNeeds || '';
				this.estimateDownCar = orderData.estimateDownCar || '';
				this.estimateMoney = orderData.estimateMoney || '';
				this.remarkRescuePosition = orderData.remarkRescuePosition || '';
				this.remarkDestinationInfo = orderData.remarkDestinationInfo || '';
				this.selectedChannelName = orderData.channel || '';
				this.selectedSourceName = orderData.source || '';

				// 收费类型赋值
				this.feeType = orderData.feeType !== undefined && orderData.feeType !== null ? orderData.feeType : null;

				// 设置收费类型选中状态
				if (this.manei && this.manei.length > 0 && this.feeType !== null) {
					const feeTypeNum = Number(this.feeType);
					const feeIndex = this.manei.findIndex(item => Number(item.value) === feeTypeNum);
					if (feeIndex !== -1) {
						this.maneizhi = feeIndex;
					}
				}

				this.isKouChe = orderData.isKouChe || '0';
				this.kcname = orderData.kcPosition || '';
				this.rescueDetail = orderData.rescueDetail || '';

				this.$nextTick(() => {
					setTimeout(() => {
						this.setChannelAndSourceSelection(orderData.channel, orderData.source);
						this.setFaultTypeAndPhenomenonSelection(orderData.faultType, orderData.phenomenon);
					}, 500);
				});
			},

			parseAddress(address, type) {
				const reg = /.+?(省|市|自治区|自治州|县|区)/g;
				const addressList = address.match(reg);
				if (!addressList) return;

				if (type === 'start') {
					if (addressList[0] === '重庆市' || addressList[0] === '北京市' ||
						addressList[0] === '天津市' || addressList[0] === '上海市') {
						this.province = addressList[0];
						this.city = '市辖区';
						this.area = addressList[1] || '';
						this.four = address.replace(this.province, '').replace(this.city, '').replace(this.area, '');
					} else {
						this.province = addressList[0] || '';
						this.city = addressList[1] || '';
						this.area = addressList[2] || '';
						this.four = address.replace(this.province, '').replace(this.city, '').replace(this.area, '');
					}
				} else if (type === 'end') {
					if (addressList[0] === '重庆市' || addressList[0] === '北京市' ||
						addressList[0] === '天津市' || addressList[0] === '上海市') {
						this.province1 = addressList[0];
						this.city1 = '市辖区';
						this.area1 = addressList[1] || '';
						this.four1 = address.replace(this.province1, '').replace(this.city1, '').replace(this.area1, '');
					} else {
						this.province1 = addressList[0] || '';
						this.city1 = addressList[1] || '';
						this.area1 = addressList[2] || '';
						this.four1 = address.replace(this.province1, '').replace(this.city1, '').replace(this.area1, '');
					}
				}
			},

			setChannelAndSourceSelection(channelName, sourceName) {
				if (channelName && this.channelOptions.length > 0) {
					const channel = this.channelOptions.find(item => item.name === channelName);
					if (channel) {
						this.selectedChannelId = channel.id;
						this.selectedChannelName = channel.name;

						if (sourceName && this.sourceOptions.length > 0) {
							const source = this.sourceOptions.find(item => item.name === sourceName && item.pid ==
								channel.id);
							if (source) {
								this.selectedSourceId = source.id;
								this.selectedSourceName = source.name;
							}
						}
					}
				}
			},

			setFaultTypeAndPhenomenonSelection(faultTypeName, phenomenonName) {
				if (faultTypeName && this.faultTypeOptions.length > 0) {
					const faultType = this.faultTypeOptions.find(item => item.name === faultTypeName);
					if (faultType) {
						this.selectedFaultTypeId = faultType.id;
						this.selectedFaultTypeName = faultType.name;

						if (phenomenonName && this.phenomenonOptions.length > 0) {
							const phenomenon = this.phenomenonOptions.find(item => item.name === phenomenonName &&
								item.pid == faultType.id);
							if (phenomenon) {
								this.selectedPhenomenonId = phenomenon.id;
								this.selectedPhenomenonName = phenomenon.name;
							}
						}
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
	}

	.dil {
		flex: 1;
		height: 0;
		overflow: auto;
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;
	}

	.edit-mode-indicator {
		background-color: #e6f7ff;
		border: 1px solid #91d5ff;
		border-radius: 8rpx;
		padding: 16rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #1890ff;
		text-align: center;
	}

	.top {
		box-sizing: border-box;
		padding: 0px 15px;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid rgba(50, 125, 251, 0.05);
		display: flex;
		align-items: center;
		column-gap: 28rpx;

		.start-end {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20px 0px;
	}

	.tb-left {
		height: 100%;
		width: 85%;
		display: flex;
		align-items: flex-start;
	}

	.uicon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 6px;
	}

	.text1 {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
	}

	.hong1 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #D42424;
	}

	.hong2 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
		width: 100%;
		overflow: hidden;

		input {
			width: 100%;
		}
	}

	.jyxx {
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid rgba(50, 125, 251, 0.05);
		padding: 14rpx 38rpx;
	}

	.jyxx-tinput {
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 12rpx;
		padding: 24rpx 0;
		border-bottom: 2rpx solid rgba(151, 151, 152, 0.20);

		&:last-child {
			border: none;
		}

		.text1 {
			font-size: 28rpx;
			color: #000;
			font-weight: bold;
		}

		.you {
			flex: 1;
			width: 0;
		}
	}

	.tinput {
		width: 100%;
		display: flex;
		background: white;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
	}

	.xinput {
		width: 100%;
		box-sizing: border-box;
		padding: 36rpx;
		margin-top: 14px;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid rgba(50, 125, 251, 0.05);
	}

	.xinput-fault {
		width: 100%;
		padding: 0 0 26rpx 0;
		margin-top: 14px;
		background: #FFFFFF;
		border-bottom: 2rpx solid rgba(151, 151, 152, 0.20);
	}

	.you {
		text-align: right;
	}

	.xz {
		margin-top: 10px;
		display: flex;
		align-items: center;
	}

	.kuang {
		width: 92rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #327DFB;
		border-radius: 5px;
		border: 2rpx solid #327DFB;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 24rpx;
		border-radius: 24rpx;
	}

	.xlan {
		background: #327DFB;
		border: 2rpx solid #327DFB;
		color: #fff;
	}

	.anniu {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin-top: 30rpx;
		background: #52c41a;
		border-radius: 12rpx;
	}

	.anniu:active {
		background: #389e0d;
	}

	.channel-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.channel-item {
		min-height: 50rpx;
		padding: 0 24rpx;
		border-radius: 25rpx;
		border: 2rpx solid #327DFB;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: white;
	}

	.channel-item-selected {
		background: #327DFB;
		color: #fff;
	}

	.channel-text {
		font-size: 24rpx;
		color: inherit;
		max-width: 240rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.source-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.source-item {
		min-height: 50rpx;
		padding: 0 24rpx;
		border-radius: 25rpx;
		border: 2rpx solid #327DFB;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: white;
	}

	.source-item-selected {
		background: #327DFB;
		color: #fff;
	}

	.source-text {
		font-size: 24rpx;
		color: inherit;
		max-width: 240rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>