<template>
	<view class="container">
		<uni-navbar title="运输申请"></uni-navbar>
		<view class="box commonMt">
			<view class="addLineSuccess-big-box commonBj">
				<view class="addLineSuccess-big-box-top">
					<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
						src="../../static/images/transport/dingwei.png" mode="widthFix">
					</image>
					<text class="listTitle">路线信息</text>
				</view>
				<view class="addLineSuccess-big-box-bottom infoHeight" style="padding-bottom: 40rpx;">
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">运输名称:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.transportName}}</text>
						</view>
					</view>
					<view class="map">
						<mapImg :startPoint='form.startPoint' :endPoint='form.endPoint'
							:mtRoutePointList='form.mtRoutePointList'></mapImg>
						<!-- <mapNew height="339rpx">
							
						</mapNew> -->
					</view>
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">开始地址:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.startName}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">结束地址:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.endName}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">运输期限:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.startDate}} 至 {{form.endDate}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">开始时间:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{ changeTime(form.startTime) }}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">结束时间:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{ changeTime(form.endTime) }}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">计划车辆:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.expectCar}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">上报企业:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.companyName}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
				</view>
			</view>
			<!-- 审批状态 -->
			<view class="addLineSuccess-big-box mt31 mb43 commonGreenBj">
				<view class="addLineSuccess-big-box-top bg-color-green">
					<image style="width: 45rpx; height: 45rpx;margin-left: 30rpx;"
						src="../../static/images/car/yunshu.png" mode="widthFix">
					</image>
					<text class="listTitle">审批状态</text>
				</view>
				<view class="addLineSuccess-big-box-bottom">
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">审批状态:</text>
						</view>
						<view class="flexAlignCenter ">
							<u-icon color="#017D3E" name="checkmark-circle-fill" style="margin-right: 12rpx;"></u-icon>
							<text class="greenText">通过</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		transportDetail
	} from "../../api/company/transport.js"
	export default {
		data() {
			return {
				form: {
					startTime: "00:00:00",
					endTime: "00:00:00",
					// 结束坐标和开始坐标
					endPoint: '',
					startPoint: '',
					mtRoutePointList: [],
				},

			}
		},
		methods: {
			// 获取运输申请详情
			async getDetail(id) {
				const res = await transportDetail(id)
				console.log('运输详情', res);
				this.form = res.data

			},
			changeTime(time) {
				return time.slice(0, 5)
			},

		},
		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addLineSuccess-big-box {

		.addLineSuccess-big-box-top {
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
		}

		.addLineSuccess-big-box-bottom {
			padding: 0rpx 39rpx;
			border-radius: 0 0 28rpx 28rpx;

			.addLineSuccess-big-box-bottom-item {
				display: flex;
				margin: 36rpx auto;
			}

			.map {
				// width: 599rpx;
				height: 339rpx;
				background: #FFFFFF;
				border: 2rpx solid #495B93;
				border-radius: 15rpx;
				margin: 25rpx auto 40rpx;
			}

			// .border-style {
			// 	border-top: 1rpx dashed #F98803;
			// 	margin: 0 auto;
			// }
		}
	}

	.custom-style {
		box-shadow: 0px 2rpx 13rpx 0rpx rgba(27, 43, 95, 0.25);
		border-radius: 28rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 27rpx 0 36rpx;
		height: 85rpx;
	}


	.bg-color-green {
		background: #36C372 !important;
	}


	.mb {
		margin-bottom: 11rpx !important;
	}

	.mt31 {
		margin-top: 31rpx;
	}

	.mb43 {
		margin-bottom: 43rpx;
	}
</style>
