<!-- 发起订单 -->
<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 class="">
						<view class="text1" v-show="four == ''">请选择起点地址</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" :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="id == 1" style="border-top:1px solid #EAEAEA;">
				<view class="tb-left">
					<view class="uicon" >
						<text>终</text>
					</view>
					<view class="">
						<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">
			 <view class="text1"> <text class="hong1">*</text> 联系人</view>
			 <view class="you">
				 <input type="text" placeholder="请输入联系人">
			 </view>
		 </view>
		 <view class="tinput">
		 			 <view class="text1"> <text class="hong1">*</text> 手机号</view>
		 			 <view class="you">
		 				 <input type="text" placeholder="请输入手机号">
		 			 </view>
		 </view>
		 <view class="tinput">
		 			 <view class="text1"> <text class="hong1">*</text> 车牌号</view>
		 			 <view class="you">
		 				 <input type="text" placeholder="请输入车牌号">
		 			 </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)">
							 <view class="">{{item.text}}</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)">
		 							 <view class="">{{item.text}}</view>
		 						 </view>
		 					 </view>
		 </view>

		 <view class="tinput">
		 			 <view class="text1"> <text class="hong1">*</text> 备注</view>
		 			 <view class="you">
		 				 <input type="text" placeholder="请输入备注">
		 			 </view>
		 </view>
		 <view class="tinput">
		 			 <view class="text1"> <text class="hong1">*</text> 现场图片</view>
		 			 <view class="you">
		 				 <input type="text" placeholder="请输入现场图片">
		 			 </view>
		 </view>
		 	<!-- 上传图片 -->
			<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="10"
				></u-upload>


			<view class="anniu">
				<text>发起</text>
			</view>
			<view style="width: 100%; height: 60px;"></view>
		</view>

		<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{
					fileList1: [],

				id:1,
				carzhi:0,
				car:[
					{text:'大'},
					{text:'中'},
					{text:'小'}
				],
				maneizhi:0,
				manei:[
					{text:'现金'},
					{text:'签单'},

				],
				province:'',
				city:'',
				area:'',
				four:'',
				province1:'',
				city1:'',
				area1:'',
				four1:'',

			}
		},
		onLoad(option) {
			this.id = option.id
		},
		components:{
			tabBar,
		},
		methods:{
				// 删除图片
						deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
						// 新增图片
						async afterRead(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++) {
								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) {
							console.log(url);
							return new Promise(resolve => {
                upload({
                  url:'/common/upload',
                  filePath: url,



                }).then((res)=>{
                  console.log(res);
                  resolve(this.$baseImageUrl + res.data.url)
                })
              })
							// return new Promise((resolve, reject) => {
							// 	let a = uni.uploadFile({
							// 		url: 'http://192.168.1.2:8080/common/upload', // 仅为示例，非真实的接口地址
							// 		filePath: url,
							// 		name: 'file',
							// 		formData: {
							// 			user: 'test'
							// 		},
							// 		success: (res) => {
							// 			setTimeout(() => {
							// 				resolve(this.$baseImageUrl + res.data.url)
							// 			}, 1000)
							// 		}
							// 	});
							// })
						},
			// 以下为重点

			getmap(){
				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.four = res.address
						// that.adds = res.address;
						// let point = new plus.maps.Point(res.longitude,res.latitude);
						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);

					}
				});

			},
			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)


						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){
				this.carzhi = index
			},
			getzhi2(index){
				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: 80%;
		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;

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