<template>
	<view class="container">
		<uni-navbar :title="form.id?'路线修改':'新增路线'"></uni-navbar>
		<view class="box commonMt" style="overflow: hidden;">
			<view class="topMap">
				<mapPreview v-show="isMap" @dot="dot" :isDot="true" :startPoint='form.startPoint'
					:getLocation=getLocation :endPoint='form.endPoint' :mtRoutePointList='form.mtRoutePointList'>
				</mapPreview>
			</view>
			<view class="box3">
				<view class="reject-box2 commonRedBj commonMt" v-if="form.id">
					<view class="reject-box-top">
						<image src="../../static/images/car/yunshu.png" mode="widthFix"></image>
						<text class="listTitle">审批状态</text>
					</view>
					<view class="reject-box-bottom">
						<view class="state-icon">
							<view class="state-icon-left">
								<view class="red-circle mCircle">
								</view>
								<text>审批状态：</text>
							</view>
							<view class="state-icon-right">
								<u-icon color="#FB5637" name="close-circle-fill"></u-icon>
								<text>驳回</text>
							</view>
						</view>
						<view class="state-icon">
							<view class="state-icon-left">
								<view class="red-circle mCircle">
								</view>
								<text>驳回原因：</text>
							</view>
							<view class="state-icon-right">
								<text>{{form.auditContent}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="reject-box commonBj commonMt">
					<view class="reject-box-top">
						<view class="top-left">
							<image src="../../static/images/path/location.png" mode="widthFix"></image>
							<text class="listTitle">运输路线</text>
						</view>
						<view class="top-right">
							<u-button class="buttonDd" @click="dot">
								<view class="dwImg"></view>
								<!-- <image src="../../static/images/path/location2.png" mode="widthFix"></image> -->
								打点
							</u-button>
						</view>
					</view>
					<u--form :model="form" ref="uForm" :rules="rules" labelWidth="0" class="formStyle firstItem">
						<!-- <u-form-item prop="endPoint">
							<view class="redCircle" style="margin-top: 30rpx;"></view>
							<text class="itemText" style="margin-top: 23rpx;">打点坐标</text>
							<view class="map" @click="dot">
								<mapImg :startPoint='form.startPoint' :endPoint='form.endPoint'
									:mtRoutePointList='form.mtRoutePointList'></mapImg>
							</view>
						</u-form-item> -->
						<u-form-item prop="startName">
							<view class="redCircle"></view>
							<text class="itemText">开始地址</text>
							<u-input confirm-type="search" @confirm="getAddress(form.startName,'startName')"
								disabledColor="rgba(73,91,147,0.2)" class="inputStyle" v-model="form.startName"
								maxlength="100" placeholder="请输入开始地址" />
						</u-form-item>
						<u-form-item prop="endName">
							<view class="redCircle"></view>
							<text class="itemText">结束地址</text>
							<u-input confirm-type="search" disabledColor="rgba(73,91,147,0.2)"
								@confirm="getAddress(form.endName,'endName')" class="inputStyle" v-model="form.endName"
								maxlength="100" placeholder="请输入结束地址" />
						</u-form-item>
						<u-form-item v-if="form.id">
							<view class="redCircle"></view>
							<text class="itemText">企业名称</text>
							<u-input disabled disabledColor="rgba(73,91,147,0.2)" class="inputStyle"
								suffixIconStyle="color: #495B93" v-model="form.companyName" />
						</u-form-item>
						<u-form-item v-if="form.id">
							<view class="redCircle"></view>
							<text class="itemText">发起部门</text>
							<u-input disabled disabledColor="rgba(73,91,147,0.2)" class="inputStyle"
								suffixIconStyle="color: #495B93" v-model="form.startDept" />
						</u-form-item>
					</u--form>
				</view>
				<view class="reject-box commonBj commonMt" v-if="!form.id">
					<view class="reject-box-top">
						<view class="top-left">
							<image src="../../static/images/path/initiator.png" mode="widthFix"></image>
							<text class="listTitle">发布信息</text>
						</view>
					</view>
					<u--form labelWidth="0" class="formStyle">
						<u-form-item>
							<view class="redCircle"></view>
							<text class="itemText">企业名称</text>
							<u-input disabled disabledColor="rgba(73,91,147,0.2)" class="inputStyle"
								suffixIconStyle="color: #495B93" v-model="form.companyName" />
						</u-form-item>
						<u-form-item>
							<view class="redCircle"></view>
							<text class="itemText">发起部门</text>
							<u-input disabled disabledColor="rgba(73,91,147,0.2)" class="inputStyle"
								suffixIconStyle="color: #495B93" v-model="form.startDept" />
						</u-form-item>
					</u--form>
				</view>
				<u-button @click="submit" class="custom-style mt33 commonMb" shape="circle"
					color="linear-gradient(to top, #F59A02, #FFD334)">{{form.id?'确定修改':'确认新增'}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		routePost,
		routeAdd,
		routeInfo,
		routeUpadate
	} from "@/api/company/path.js"
	import config from '@/config'
	export default {
		data() {
			return {
				form: {
					id: null,
					endPoint: '',
					startName: '',
					endName: '',
					companyName: '',
					startDept: '',
					lineName: '',
					// 企业id
					// companyId: '1023271044427829248',
					endPoint: '',
					startPoint: '',
					auditContent: '',
					mtRoutePointList: [],
				},
				id: '',
				pathData: '',
				isMap: true,
				rules: {
					endPoint: [{
						required: true,
						message: '请进行打点',
						trigger: ['blur', 'change']
					}, ],
					startName: [{
						required: true,
						whitespace:true,
						message: '请输入开始地址',
						trigger: ['blur', 'change']
					}, ],
					endName: [{
						required: true,
						whitespace:true,
						message: '请输入结束地址',
						trigger: ['blur', 'change']
					}, ],
				},
				city: '吉林省',
				getLocation: null,
			}
		},
		methods: {
			routePost2(data) {
				routePost(data).then(res => {
					this.form.mtRoutePointList = res.data.map(items => {
						return {
							pointCoordinate: items[0] + ',' + items[1]
						}
					})
				})
			},
			// 4326转3857
			WGS84ToMercator(data) {
				console.log(data, 'data');
				let list = data.split(',');
				let lonlat = {
					lng: list[0],
					lat: list[1]
				};
				const coord = {
					lat: 0,
					lng: 0
				};
				const earthRad = 6378137.0; //地球半径
				coord.lat = lonlat.lng * Math.PI / 180 * earthRad;
				const param = lonlat.lat * Math.PI / 180;
				coord.lng = earthRad / 2 * Math.log((1.0 + Math.sin(param)) / (1.0 - Math.sin(param)));
				return coord.lat + ',' + coord.lng;
			},
			getAddress(address, locationName) {
				//高德地图web服务端key
				let key = config.key;
				let city = this.city;
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/geo?key=${key}&address=${address}&city=${city}`,
					method: 'GET',
					success: (res) => {
						console.log(res, 'res');
						if (res.data.info === 'OK') {
							address = res.data.geocodes[0].formatted_address;
							let location = res.data.geocodes[0].location;

							switch (locationName) {
								case 'startName':
									if (this.WGS84ToMercator(location) == this.form.endPoint) {
										uni.showToast({
											title: '开始地址和结束地址不能是同一个点',
											icon: 'none'
										})
										return false;
									}
									this.form.startPoint = this.WGS84ToMercator(location);
									break;
								case 'endName':
									if (this.WGS84ToMercator(location) == this.form.startPoint) {
										uni.showToast({
											title: '开始地址和结束地址不能是同一个点',
											icon: 'none'
										})
										return false;
									}
									this.form.endPoint = this.WGS84ToMercator(location);
									break;
							}
							if (this.form.startPoint && this.form.endPoint) {
								let addres = {
									"startPoint": this.form.startPoint,
									"endPoint": this.form.endPoint,
								}
								this.routePost2(addres)
							}
						}
					},
					fail: (err) => {}
				})
			},
			submit() {
				if (!this.form.startPoint || !this.form.endPoint) {
					uni.showToast({
						title: '请进行打点',
						icon: 'none'
					})
					return false;
				}

				this.$refs.uForm.validate().then(res => {
					if (this.form.id) {
						this.routeUpadate();
					} else {
						this.routeAdd();
					}
				}).catch(errors => {})

			},
			// routeAdd,routeInfo,routeUpadate
			routeAdd() {
				routeAdd(this.form).then(res => {
					console.log(res);
					uni.navigateBack()
				})
			},
			routeUpadate() {
				routeUpadate(this.form).then(res => {
					uni.navigateBack()
				})
			},
			async routeInfo(id) {
				this.isMap = false;
				await routeInfo(id).then(res => {
					this.form = res.data;
					this.pathData = res.data.id;
					this.isMap = true;
				})
			},
			dot() {
				if (this.form.id) {

					uni.navigateTo({
						url: '/pages/dotPath/index?id=' + this.form.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/dotPath/index'
					});
				}
				// this.$tab.navigateTo('/pages/dotPath/index?id=' + this.id)
			},
			routePost(data) {
				console.log(data, '参数');
				this.isMap = false;
				routePost(data).then(res => {
					this.form.mtRoutePointList = res.data.map(items => {
						return {
							pointCoordinate: items[0] + ',' + items[1]
						}
					})
					this.isMap = true;
				})
			},

		},
		onShow() {
			if (this.form.startPoint || this.form.endPoint) {
				this.$refs.uForm.validate()
			}
		},
		onLoad: async function(option) {
			console.log(option, '<-------------option');
			this.form.companyId = this.$store.state.user.companyId;
			this.form.companyName = this.$store.state.user.companyName;
			this.form.lineName = this.$store.state.user.companyAbbreviation;
			this.form.startDept = this.$store.state.user.rolesName;
			if (!option.id && !option.startName) {
				this.isMap = false;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					geocode: true,
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						console.log('当前位置：' + JSON.stringify(res.address));
						// province":"吉林省","city":"长春市","district":"朝阳区","street":"丰顺街","streetNum":"3515号"
						// this.form.startName=res.address.province+res.address.city+res.address.district+res.address.street+res.address.poiName;
						let location = res.longitude + ',' + res.latitude;
						this.city = res.address.city;
						console.log(this.city, '当前城市');
						// this.form.startPoint=this.WGS84ToMercator(location);
						this.getLocation = res;
						this.isMap = true;
					},
					fail: function(err) {
						console.log(err, '失败')
						this.isMap = true;
					},
					complete() {
						// this.isMap=false;
					}
				})
			}
			if (option.id) {
				await this.routeInfo(option.id);
				this.form.id = option.id;
			}
			console.log(this.form, '<-------------this.form');
			//涉及到修改返回(没有用到)
			if (option.startName) {
				console.log(JSON.stringify(option));
				this.form.startName = option.startName;
				this.form.startPoint = option.startPoint;
				this.form.endName = option.endName;
				this.form.endPoint = option.endPoint;
				// this.form.id =option.formId;
				let addres = {
					"startPoint": option.startPoint,
					"endPoint": option.endPoint
				}
				this.routePost(addres);

			}
		}
	}
</script>

<style lang="scss" scoped>
	.reject-box {
		margin-bottom: 28rpx;

		.reject-box-top {
			width: 100%;
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0px 0px;
			display: flex;
			justify-content: space-between;

			.top-right {
				display: flex;
				justify-content: start;
				align-items: center;
				margin-right: 36rpx;
			}

			uni-image {
				width: 50rpx;
				margin-left: 32rpx;
				vertical-align: middle;
			}
		}

	}

	.buttonDd {
		width: 134rpx;
		height: 45rpx;
		background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
		border-radius: 23rpx;
		border: 0;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		padding: 0;
		text-align: center;
	}

	.map {
		width: 429rpx;
		height: 355rpx;
		background: #FFFFFF;
		border: 2rpx solid #495B93;
		border-radius: 15rpx;
	}

	.formStyle {
		margin: 32rpx 36rpx 57rpx 32rpx;
	}

	.reject-box2 {
		// width: 88%;
		// height: 290rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 28rpx;

		.reject-box-top {
			width: 100%;
			height: 69rpx;
			background: #FB5637;
			border-radius: 26rpx 26rpx 0px 0px;

			uni-image {
				width: 50rpx;
				margin-left: 32rpx;
				vertical-align: middle;
			}

		}
	}

	.reject-box-bottom {
		.state-icon {
			display: flex;
			margin: 40rpx;

			&:nth-child(2) {
				margin-bottom: 40rpx !important;
			}

			.state-icon-left {
				display: flex;

				// align-items: center;
				.red-circle {
					width: 15rpx;
					height: 15rpx;
					background: #FB5637;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				uni-text {
					font-size: 26rpx;
					font-weight: bold;
					color: #495B93;
				}
			}

			.state-icon-right {
				display: flex;
				// align-items: center;
				width: 70%;

				uni-text {
					font-size: 26rpx;
					font-weight: bold;
					color: #FB5637;
					margin-left: 14rpx;
				}
			}
		}

		.border-style {
			border-top: 1rpx dashed #FB5637;
			width: 90%;
			margin: 0 auto;
		}
	}

	.dwImg {
		width: 50rpx;
		height: 50rpx;
		background: url(../../static/images/path/location2.png);
		background-size: 100% 100%;
		display: inline-block;

	}

	// /deep/ .u-form-item__body__right__content__slot

	// .firstItem /deep/ .u-form-item:first-child .u-form-item__body__right__content .u-form-item__body__right__content__slot {
	// 	align-items: flex-start;
	// }
</style>
