<template>
	<view class="container">
		<uni-navbar :title="form.id?'路线修改':'新增路线'" path="/pages/home/index"></uni-navbar>
		<view class="box">
			<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>
							<!-- 							<mapNew height="355rpx">
								
							</mapNew> -->
						</view>
					</u-form-item>
					<u-form-item prop="startName">
						<view class="redCircle"></view>
						<text class="itemText">开始地址</text>
						<u-input class="inputStyle" v-model="form.startName" placeholder="请输入开始地址" />
					</u-form-item>
					<u-form-item prop="endName">
						<view class="redCircle"></view>
						<text class="itemText">结束地址</text>
						<u-input class="inputStyle" v-model="form.endName" 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="buttonLang commonMb" shape="circle"
				color="linear-gradient(to top, #F59A02, #FFD334)">{{form.id?'确定修改':'确认新增'}}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		routePost,routeAdd,routeInfo,routeUpadate
	} from "@/api/company/path.js"
	export default {
		data() {
			return {
				form: {
					id: null,
					endPoint: '',
					startName: '',
					endName: '',
					companyName: '',
					startDept: '',
					// 企业id
					// companyId: '1023271044427829248',
					endPoint:'',
					startPoint:'',
					auditContent:'',
					mtRoutePointList:[],
				},
				id:'',
				rules: {
					endPoint: [{
						required: true,
						message: '请进行打点',
						trigger: ['blur', 'change']
					}, ],
					startName: [{
						required: true,
						message: '请输入开始地址',
						trigger: ['blur', 'change']
					}, ],
					endName: [{
						required: true,
						message: '请输入结束地址',
						trigger: ['blur', 'change']
					}, ],
				},
			}
		},
		methods: {
			submit() {
				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=>{
					this.$tab.navigateTo('/pages/addPathSucceed/index')
				})
			},
			routeUpadate(){
				routeUpadate(this.form).then(res=>{
					this.$tab.navigateTo('/pages/path/index')
				})
			},
			routeInfo(id){
				routeInfo(id).then(res=>{
					this.form=res.data;
				})
			},
			dot() {
				this.$tab.navigateTo('/pages/dotPath/index?id='+this.id)
			},
			routePost(data){
				console.log(data,'参数');
				routePost(data).then(res=>{
					this.form.mtRoutePointList=res.data.map(items=>{
						return {
							pointCoordinate:items[0]+','+items[1]
						}
					})
				})
			},

		},
		onLoad: function(option) {
			this.form.companyId = this.$store.state.user.companyId;
			this.form.companyName = this.$store.state.user.companyName;
			this.form.startDept = this.$store.state.user.rolesName;
			// console.log(this.form, 'this.form');
			console.log(option, 'option');
			// console.log(this.$store.state.user, 'this.$store.state.user');
			if(option.id)
			{
				this.routeInfo(option.id);
				this.form.id=option.id;
			}
			//涉及到修改返回
			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;
				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;
		// background-color: #FB5637;
	}
</style>
