<!-- 发起订单 -->
<template>
	<view class="content">
		<view class="dil">
			<view class="top-icon" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<!-- 发起救援 头部-->
			<view class="top">
				<!-- 起 -->
				<view class="top-box">
					<view class="tb-left">
						<view class="uicon" style="background:#2A96FE; ">
							<text>起</text>
						</view>
						<view 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">
						<view class="uicon">
							<text>终</text>
						</view>
						<view 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>
			<!-- 填空 -->
			<view class="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="tinput">
				<view class="text1"> 联系人</view>
				<view class="you">
					<input type="text" placeholder="请输入联系人" v-model="connectionName">
				</view>
			</view>
			<view class="tinput">
				<view class="text1"> 手机号</view>
				<view class="you">
					<input type="text" placeholder="请输入手机号" v-model="connectionPhone">
				</view>
			</view>
			<view class="tinput">
				<view class="text1"> 车牌号</view>
				<view class="you">
					<input type="text" placeholder="请输入车牌号" v-model="licenseNum">
				</view>
			</view>
			<view class="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 class="xinput">
				<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.dictValue)">
						<view class="">{{item.dictLabel}}</view>
					</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.dictValue)">
						<view class="">{{item.dictLabel}}</view>
					</view>
				</view>
			</view>

			<view class="tinput">
				<view class="text1"> 现场描述</view>
				<view class="you">
					<input type="text" placeholder="请输入备注" v-model="rescueDetail">
				</view>
			</view>
			<view class="tinput">
				<view class="text1"> 现场图片</view>
				<view class="you">
					<!-- <input type="text" placeholder="请输入现场图片"> -->
					<text>请上传现场图片</text>
				</view>
			</view>
			<!-- 上传图片 -->
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
				:maxCount="10"></u-upload>
			<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>
		<u-picker :show="shows" :columns="columns" @confirm="confirmm" @cancel="cancelm" keyName="dictValue"></u-picker>

		<tabBar></tabBar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import request from '../../utils/request'
	import config from '@/config'
	import upload from '@/utils/upload.js'
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				rescueLongitude: '',
				rescueLatitude: '',
				rescueLongitude: '',
				rescueLatitude: '',
				connectionName: '',
				connectionPhone: '',
				rescuePosition: '',
				rescueDetail: '',
				rescueSceneImage: '',
				rescueType: '',
				baseUrl: this.$baseUrl,
				carType: 1,
				feeType: 1,
				licenseNum: '',
				isAppointment: 0,
				fileList1: [],
				imageList: [],
				rescueSceneImage: [],
				rescueTime: '请选择约定时间',
				carzhi: 0,
				car: [{
						text: '大',
						id: 1
					},
					{
						text: '中',
						id: 2
					},
					{
						text: '小',
						id: 3
					}
				],
				maneizhi: 1,
				manei: [{
						text: '现金',
						id: 1
					},
					{
						text: '签单',
						id: 2
					},

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

				],
			}
		},
		onLoad(option) {
			this.rescueType = option.id
			this.newtwo()
			this.isAppointment = option.isAppointment
			this.role = uni.getStorageSync('role')

			if (this.role[0] == 'jjdd') {
				this.kcdd()
			}
		},
		components: {
			tabBar,
		},
		methods: {
			newtwo() {
				request({
					url: '/system/dict/data/type/fee_type',
					method: 'get',

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

				}).then((res) => {
					this.car = res.data
					console.log(res);
				})
			},
			kcdd() {
				request({
					url: '/system/rescueInfo/getKcPosition',
					method: 'get',

				}).then((res) => {
					this.columns.push(res.data)
					console.log(this.columns);
				})
			},
			confirmm(e) {
				console.log(e);
				this.kcname = e.value[0].dictLabel
				this.shows = false
			},
			cancelm() {
				this.shows = 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") {

					console.log("是数字类型");
				} else {
					this.rescueTime = ''
					console.log("不是数字类型");
				}
				if (this.isAppointment == 'undefined') {
					this.isAppointment = 0
				}
				if (this.rescueLongitude == "" || this.rescueLatitude == "") {
					uni.showToast({
						title: '起点位置不能为空',
						icon: 'error'
					})

					return
				}
				// if (this.connectionName == "") {
				// 	uni.showToast({
				// 		title: '联系人不能为空',
				// 		icon: 'error'
				// 	})

				// 	return
				// }
				// if (this.connectionPhone == "") {
				// 	uni.showToast({
				// 		title: '手机号不能为空',
				// 		icon: 'error'
				// 	})
				// 	return

				// }

				let data = {
					rescueLongitude: this.rescueLongitude,
					rescueLatitude: this.rescueLatitude,
					destinationLongitude: this.destinationLongitude,
					destinationLatitude: this.destinationLatitude,
					connectionName: this.connectionName,
					connectionPhone: this.connectionPhone,
					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
				}
				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) => {
							this.imageList.push(res.fileName)
							console.log(res);
						})

					}
				})


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

		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding-top: 45px;
	}

	.top-icon {
		margin-bottom: 15px;
	}

	.dil {
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;
	}

	.top {
		box-sizing: border-box;
		padding: 0px 15px;
		width: 100%;
		background-color: white;
	}

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

	.uicon {
		width: 18px;
		height: 18px;
		border-radius: 4px;
		color: white;
		background: orangered;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-weight: bold;
		margin-right: 6px;
	}

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

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

	.text1 {
		font-size: 16px;
		font-weight: bold;
		color: #363636;
	}

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

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

		input {
			width: 100%;
		}
	}

	.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%;
		background: white;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
	}

	.you {
		text-align: right;
	}

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

	.kuang {
		width: 38px;
		height: 23px;
		background: #ECECEC;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666666;
		font-size: 14px;
		margin-right: 15px;
	}

	.xlan {
		background: #CDE7FF !important;
		color: #1D62FF !important;
		border: 1px solid #2A96FE;
	}

	.anniu {
		width: 100%;
		background: linear-gradient(105deg, #FFE3AC 0%, #F3BA60 98%);
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #542F0E;
		border-radius: 4px;
		margin-top: 20px;
	}
</style>