<!-- 发起订单 -->
<template>
	<view class="content">
		<VNavigationBarVue :title="title"></VNavigationBarVue>
		<view class="dil">
			<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%;">
								<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 != ''">
									<input type="text" style="width: 100%;" :placeholder="four">
								</view>
							</view>
						</view>
						<!-- 					<view class="tb-right" @click="getmap()">
											<image src="../../static/dingwei.png" mode=""></image>
										</view> -->
					</view>
					<!-- 终 -->
					<view class="top-box" v-if="rescueType == 1" 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; ">
								<view class="text1" v-show="four1 == ''">请选择终点地址</view>
								<view class="text1" v-show="four1 != ''">{{province1}}{{city1}}{{area1}}</view>
								<!--<view class="hong1" v-show="four1 == ''">*必填，请填写详细地址</view>-->
								<view class="hong2" v-show="four1 != ''">
									<input type="text" :placeholder="four1">
								</view>
							</view>
						</view>
						<!-- 					<view class="tb-right" @click="getmap1()">
											<image src="../../static/dingwei.png" mode=""></image>
										</view> -->
					</view>
				</view>
				<image v-if="rescueType == 1" 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>
			<!-- rescueType = 5 -->


			<!-- 填空 -->
			<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 class="source-item source-add-button" @click="showAddPhenomenonDialog">
							<text>+</text>
						</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': channel === item.label}" class="channel-item"
						v-for="(item,index) in channelOptions" :key="index" @click="chooseChannel(index, item.label)">
						<view class="channel-text">{{item.label}}</view>
					</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 class="channel-item channel-add-button" @click="showAddChannelDialog">
						<text>+</text>
					</view>
				</view>
			</view>
			<!-- <view class="xinput">
				<view class="text1"> <text class="hong1">*</text> 来源选择</view>
				<view class="source-container">
					<view :class="{'source-item-selected': source == item.label}" class="source-item"
						v-for="(item,index) in sourceOptions" :key="index" @click="getzhi3(index,item.label)">
						<view class="source-text">{{item.label}}</view>
					</view>
					<view class="source-item source-add-button" @click="showAddSourceDialog">
						<text>+</text>
					</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 class="source-item source-add-button" @click="showAddSourceDialog">
						<text>+</text>
					</view>
				</view>
			</view>

			<view class="xinput">
				<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">
				<view class="text1"> <text class="hong1">*</text> 是否需要挂账</view>
				<view class="xz">
					<view :class="{'xlan':onAccount == index}" class="kuang" v-for="(item,index) in ifOnAccount"
						:key="index" @click="getIfOnAccount(index,item.value)">
						<view class="">{{item.label}}</view>
					</view>
				</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="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': isWeiXiu==='1'}" class="kuang" @click="isWeiXiu = '1'">
						<view class="">是</view>
					</view>
					<view :class="{'xlan': isWeiXiu==='0'}" class="kuang" @click="isWeiXiu = '0'">
						<view class="">否</view>
					</view>
				</view>
			</view> -->

			<!-- 上传图片有问题，待修改 -->
			<!-- <view class="tinput">
				<view class="text1"> 现场图片</view>
				<view class="you">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10">
						<view style="display: flex;align-items: center;justify-content: center;height: 100%;">
							<text style="color: #929292;font-size: 24rpx">上传图片</text>
						</view>
					</u-upload>
				</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 class="">
			<u-picker :show="roadVisible" :columns="roadOptions" @confirm="roadConfirm" @cancel="roadCancel"
				keyName="dictValue"></u-picker>
		</view>
		<view class="">
			<!-- 新增来源弹窗 -->
			<u-modal :show="showAddChannelModal" title="新增渠道" @confirm="addNewChannel" @cancel="handleCancelAddChannel"
				:showCancelButton="true">
				<view class="modal-content">
					<view class="modal-input-item">
						<text class="modal-label">渠道名称</text>
						<u-input v-model="newChannelName" placeholder="请输入渠道名称" />
					</view>
				</view>
			</u-modal>
			<u-modal :show="showAddSourceModal" :title="'新增来源 - ' + selectedChannelName" @confirm="addNewSource"
				@cancel="handleCancelAddSource" :showCancelButton="true">
				<view class="modal-content">
					<view class="modal-input-item">
						<text class="modal-label">来源名称</text>
						<u-input v-model="newSourceName" placeholder="请输入来源名称" />
					</view>
					<view class="modal-channel-info">
						<text>所属渠道：{{selectedChannelName}}</text>
					</view>
				</view>
			</u-modal>

			<u-modal :show="showAddPhenomenonModal" :title="'新增故障现象 - ' + selectedFaultTypeName"
				@confirm="addNewPhenomenon" @cancel="handleCancelAddPhenomenon" :showCancelButton="true">
				<view class="modal-content">
					<view class="modal-input-item">
						<text class="modal-label">故障现象名称</text>
						<u-input v-model="newPhenomenonName" placeholder="请输入故障现象名称" />
					</view>
					<view class="modal-channel-info">
						<text>所属故障类型：{{selectedFaultTypeName}}</text>
					</view>
				</view>
			</u-modal>
		</view>
		<tabBar msg="1"></tabBar>

	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import VNavigationBarVue from '../../components/VNavigationBar.vue'
	import request from '../../utils/request'
	import config from '@/config'
	import upload from '@/utils/upload.js'
	import {
		getTenantId,
		hasRole
	} from "@/utils/auth";
	export default {
		data() {
			return {
				// isWeiXiu: '0',
				isKouChe: '0',
				show: false,
				value1: Number(new Date()),
				rescueLongitude: '',
				rescueLatitude: '',
				connectionName: '',
				connectionPhone: '',
				carOwner: '',
				carOwnerPhone: '',
				rescuePosition: '',
				rescueDetail: '',
				rescueType: '',
				baseUrl: this.$baseUrl,
				carType: 1,
				feeType: null,
				sourceType: 1,
				licenseNum: '',
				carBrand: '',
				remarkDestinationInfo: '',
				remarkRescuePosition: '',
				faultPhenomenon: '',
				rescueNeeds: '',
				estimateDownCar: '',
				estimateMoney: '',
				isAppointment: 0,
				fileList1: [],
				imageList: [],
				rescueSceneImage: [],
				rescueTime: '请选择约定时间',
				carzhi: null,
				source: '',
				channel: '',
				car: [{
						text: '大',
						id: 1
					},
					{
						text: '中',
						id: 2
					},
					{
						text: '小',
						id: 3
					}
				],
				maneizhi: null,
				manei: [{
						text: '挂账',
						id: 1
					},
					{
						text: '现金',
						id: 2
					},

				],
				onAccount: null,
				ifOnAccount: [{
						label: '挂账',
						value: 1
					},
					{
						label: '不挂账',
						value: 2
					},

				],
				province: '',
				city: '',
				area: '',
				four: '',
				province1: '',
				city1: '',
				area1: '',
				four1: '',
				shows: false,
				kcname: '',
				columns: [

				],
				title: '救援',
				roadOptions: [],
				seletedRoad: '',
				selectChannel: '',
				roadVisible: false,

				showAddSourceModal: false, // 控制新增来源弹窗显示
				newSourceName: '', // 新来源名称

				// 渠道和来源相关字段
				selectedChannelId: null,
				selectedChannelName: '',
				selectedSourceId: null,
				selectedSourceName: null,
				showAddChannelModal: false,
				newChannelName: '',
				channelOptions: [], //数组，包含id和name
				sourceOptions: [], //数组，包含id、name和pid

				selectedFaultTypeId: null,
				selectedFaultTypeName: '',
				selectedPhenomenonId: null,
				selectedPhenomenonName: null,
				faultTypeOptions: [],
				phenomenonOptions: [],
				showAddPhenomenonModal: false,
				newPhenomenonName: '',

				ifNewEnergy: '',

				userinfo: {},
			}
		},
		onLoad(option) {
			this.rescueType = option.id
			switch (option.id) {
				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:
					break;
			}
			this.newtwo()
			this.isAppointment = option.isAppointment

			/* if (hasRole('jjdd')) {
				this.kcdd()
			} */
			this.kcdd()
		},
		components: {
			tabBar,
			VNavigationBarVue
		},
		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);
			}
		},
		methods: {
			async newtwo() {
				request({
					url: '/rescue/dict/data/type/fee_type',
					method: 'get',

				}).then((res) => {
					this.manei = res.data
					console.log(res);
				})
				request({
					url: '/rescue/dict/data/type/rescue_car_type',
					method: 'get',

				}).then((res) => {
					this.car = res.data
					console.log(res);
				})
				this.userinfo = uni.getStorageSync('userInfo')
				await this.loadChannelOptions()
				await this.loadSourceOptions()
				await this.loadFaultTypeOptions()
				await this.loadPhenomenonOptions()
			},
			kcdd() {
				request({
					url: '/system/rescueInfo/getKcPosition',
					method: 'get',

				}).then((res) => {
					console.log('kcddres', res)
					this.columns.push(res.data)
					console.log('kcdd', this.columns);
				})
			},
			confirmm(e) {
				console.log(e);
				this.kcname = e.value[0].label
				this.shows = false
			},
			cancelm() {
				this.shows = false
			},
			roadConfirm(e) {
				console.log('e: ', e);
				this.roadVisible = false
			},
			roadCancel() {
				this.roadVisible = false
			},

			confirms(e) {
				console.log(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}`
				console.log(this.rescueTime);
				this.show = false
			},
			cancels() {
				this.show = false
			},
			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
				}
				// if (this.connectionName == "") {
				// 	uni.showToast({
				// 		title: '联系人不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.connectionPhone == "") {
				// 	uni.showToast({
				// 		title: '手机号不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (!this.licenseNum) {
				//   uni.showToast({
				//     title: '车牌号不能为空',
				//     icon: 'none'
				//   })
				//   return
				// }
				// if (this.seletedRoad.length === 0) {
				//   uni.showToast({
				//     title: '未选择路段',
				//     icon: 'none'
				//   })
				//   return
				// }
				console.log('this.seletedRoad: ', this.seletedRoad);

				let data = {
					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,
					// roadIds: this.seletedRoad,
					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,
					secondDispatchId: this.userinfo.id,
					secondDispatchName: this.userinfo.nickname,
					secondDispatchPhone: this.userinfo.mobile,
					faultType: this.selectedFaultTypeName,
					phenomenon: this.selectedPhenomenonName,
					ifNewEnergy: this.ifNewEnergy,

				}
				request({
					url: '/app/rescueInfo/add',
					method: 'post',
					data: data
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							})
						}, 2000);
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log('执行了', event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					console.log('路径', lists[i].url);
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {

				uni.compressImage({
					src: url,

					success: res => {
						upload({
							url: '/common/upload',
							filePath: res.tempFilePath,
						}).then((res) => {
							console.log('res.fileName', res.data.url)
							this.imageList.push(this.$baseImageUrl + res.data.url)
							console.log('this.imageList', this.imageList)
							console.log(res);
						})

					}
				})


			},
			// 以下为重点
			// 起点经纬
			getmap() {
				let that = this
				console.log('选择位置')
				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
				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);

							}
						});
					}
				});


			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			getzhi(index, id) {
				this.carType = id
				this.carzhi = index
			},
			getzhi2(index, id) {
				this.feeType = id
				this.maneizhi = index
			},
			getzhi3(index, label) {
				this.source = label
			},
			// 是否挂账选择
			getIfOnAccount(index, label) {
				this.onAccount = index
			},
			/**
			 * 路段选择事件
			 * @param index
			 * @param id
			 */
			/* chooseRoad(index, label) {
				if (this.seletedRoad.includes(label)) {
					const findIndex = this.seletedRoad.indexOf(label)
					this.seletedRoad.splice(findIndex, 1)
				} else {
					this.seletedRoad.push(label)
				}
			} */
			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;
				}
			},
			// 显示新增渠道弹窗
			showAddChannelDialog() {
				this.newChannelName = '';
				this.showAddChannelModal = true;
			},

			// 取消新增渠道
			handleCancelAddChannel() {
				this.newChannelName = '';
				this.showAddChannelModal = false;
			},

			// 新增渠道
			async addNewChannel() {
				if (!this.newChannelName.trim()) {
					uni.showToast({
						title: '请输入渠道名称',
						icon: 'none'
					});
					return;
				}

				try {
					const response = await request({
						url: '/rescue-channel-source/createChannelApp',
						method: 'post',
						data: {
							name: this.newChannelName.trim(),
							userId: this.userinfo.id
						}
					});

					if (response.code === 200) {
						uni.showToast({
							title: '添加成功'
						});

						// 重新加载渠道选项
						await this.loadChannelOptions();
						this.showAddChannelModal = false;

						// 新增后取消选中状态
						this.selectedChannelId = null;
						this.selectedChannelName = '';
						this.selectedSourceId = null;
					} else {
						uni.showToast({
							title: response.msg || '添加失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('添加渠道失败:', error);
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				}
			},

			// 显示新增来源弹窗
			showAddSourceDialog() {
				if (!this.selectedChannelId) {
					uni.showToast({
						title: '请先选择渠道',
						icon: 'none'
					});
					return;
				}

				this.newSourceName = '';
				this.showAddSourceModal = true;
			},

			// 取消新增来源
			handleCancelAddSource() {
				this.newSourceName = '';
				this.showAddSourceModal = false;
			},

			// 添加新来源
			async addNewSource() {
				if (!this.newSourceName.trim()) {
					uni.showToast({
						title: '请输入来源名称',
						icon: 'none'
					});
					return;
				}

				try {
					const response = await request({
						url: '/rescue-channel-source/createSource',
						method: 'post',
						data: {
							name: this.newSourceName.trim(),
							pid: this.selectedChannelId
						}
					});

					if (response.code === 200) {
						uni.showToast({
							title: '添加成功'
						});

						// 重新加载来源选项
						await this.loadSourceOptions();
						this.showAddSourceModal = false;

						// 新增后取消选中状态
						this.selectedSourceId = null;
					} else {
						uni.showToast({
							title: response.msg || '添加失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('添加来源失败:', error);
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				}
			},

			// 显示故障现象来源弹窗
			showAddPhenomenonDialog() {
				if (!this.selectedFaultTypeId) {
					uni.showToast({
						title: '请先选择故障类型',
						icon: 'none'
					});
					return;
				}

				this.newPhenomenonName = '';
				this.showAddPhenomenonModal = true;
			},

			// 取消故障现象来源
			handleCancelAddPhenomenon() {
				this.newPhenomenonName = '';
				this.showAddPhenomenonModal = false;
			},

			// 添加新故障现象
			async addNewPhenomenon() {
				if (!this.newPhenomenonName.trim()) {
					uni.showToast({
						title: '请输入故障现象名称',
						icon: 'none'
					});
					return;
				}

				try {
					const response = await request({
						url: '/rescue-type-phenomenon/createPhenomenon',
						method: 'post',
						data: {
							name: this.newPhenomenonName.trim(),
							pid: this.selectedFaultTypeId
						}
					});

					if (response.code === 200) {
						uni.showToast({
							title: '添加成功'
						});

						// 重新加载故障现象选项
						await this.loadPhenomenonOptions();
						this.showAddPhenomenonModal = false;

						// 新增后取消选中状态
						this.selectedPhenomenonId = null;
					} else {
						uni.showToast({
							title: response.msg || '添加失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('添加来源失败:', error);
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				}
			},

			// 加载来源选项方法
			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;
						console.log('channelOptions', this.channelOptions)
					}
				} 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;
						console.log('channelOptions', this.faultTypeOptions)
					}
				} 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);
				}
			},

		}

	}
</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;
	}

	.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;
	}

	.tb-right {
		width: 20px;
		height: 26px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.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%;
		// box-sizing: border-box;
		padding: 0 0 26rpx 0;
		margin-top: 14px;

		background: #FFFFFF;
		// border-radius: 16rpx;
		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: #327DFB;
		border-radius: 12rpx;
	}

	.add-button {
		background-color: #f1f1f1;
		font-weight: bold;
		font-size: 28rpx;
	}

	.modal-content {
		padding: 20rpx;
	}

	/* 业务渠道选择专用样式 */
	.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;
	}

	.source-add-button {
		background-color: #f1f1f1;
		font-weight: bold;
		font-size: 28rpx;
		width: 50rpx;
		padding: 0;
	}

	/* 保持原有样式不变 */
	.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;
	}

	.channel-add-button {
		background-color: #f1f1f1;
		font-weight: bold;
		font-size: 28rpx;
		width: 50rpx;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-input-item {
		margin-bottom: 20rpx;
	}

	.modal-label {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #333;
	}

	.modal-channel-info {
		margin-top: 20rpx;
		padding: 10rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #666;
	}
</style>