<template>
	<view class="truck-stop-check">
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="location routine_radius_card">
			<bs-customCell label="当前位置 :" :value="locationInfo.address" labelCol="3" wrapCol="8">
				<view slot="right-icon" class="flex_center">
					<view v-if="isLocation" class="t-icon t-icon-location" @click="getUserSetting" />
					<view v-else>
						<u-loading-icon color="#2E75E6" size="40" mode="semicircle"></u-loading-icon>
					</view>

				</view>
			</bs-customCell>
			<map id="myAMap" style="width: 100%;min-height: 150rpx;" :show-location='true'
				:markers="locationInfo.markers" :longitude="locationInfo.longitude" :latitude="locationInfo.latitude">
			</map>
		</view>
		<view class="truck-stop-check-content">
			<bs-customCell label="车牌号" :value="truckNo" labelCol="3" wrapCol="8">
			</bs-customCell>
			<u-line margin="39rpx 0"></u-line>
			<bs-customCell label="司机名" :value="driverName" labelCol="3" wrapCol="8">
			</bs-customCell>
		</view>
		<view class="truck-stop-check-content">
			<bs-customCell label="检查项目"  labelCol="3" wrapCol="8">
				<view slot="value" style="height: 100%;"  @click="navCargoDetail">
					{{getCheckItem}}					
				</view>
				<view slot="right-icon">
					<u-icon name="arrow-right" size="36" @click="navCargoDetail" />
				</view>
			</bs-customCell>
		</view>
		<view class="operation-btn flex_sb">
			<button class="backBtn common_btn" @click="back">返回</button>
			<button class="submitBtn common_btn" @click="startStopCheck">开始点检</button>
		</view>
		<!-- 类型选择动作面板 -->
		<bs-selectPicker ref="mySelectPicker" :pickerEnums="optionEnums" :visible="visible" @onVisible="onVisible"
			@onConfirm="onConfirmPicker" />
	</view>
</template>

<script>
	const getUserLocation = require('../../mixins/getUserLocation')
	import {
		shipmentOrderDetail,
		shipmentOrderDetailMass,
		GetTruckCheckItems
	} from '../../api/apiList'
	const appInstance = getApp()
	export default {
		mixins: [getUserLocation],

		data() {
			return {
				orderId: "",
				optionEnums: [],
				visible: false,
				driverName: '',
				truckNo: '',
				shipmentNo: '',
				checkItem: '',
				driverId: '',
				truckId: ''

			};
		},
		onLoad(option) {
			const {
				orderId,
				shipmentNo
			} = option
			// #ifdef H5
			const platform = uni.getSystemInfoSync().platform
			if (platform === 'ios') {
				// this.isIos = true
			}
			// #endif
			this.orderId = orderId
			this.shipmentNo = shipmentNo
			this.getUserSetting()
			this.getShipmentInfo()
		},
		onReady: function(options) {
			// #ifdef H5
			const time = setInterval(() => {
				if (this.locationInfo.address) {
					this.initMap()//初始化地图
					clearInterval(time)
				}
			}, 1000);
			// #endif	
		},
		computed: {
			getCheckItem() {
				for (const item of this.optionEnums) {
					if (item.value === this.checkItem) return item.label
				}
				return ' '
			}
		},
		methods: {
			//初始化地图
			initMap() {
				const { MapIns, userLocation } = getApp().globalData
				const { latitude, longitude } = userLocation
				this.map = new MapIns.Map('myAMap', {
					center: [longitude, latitude], //中心点坐标
					zoom: 16
				});
				// 构造矢量圆形,如签到范围, 项目根据需要自行添加
				const circle = new MapIns.Circle({
					center: new MapIns.LngLat(longitude, latitude), // 圆心位置
					radius: 100, //半径
					strokeColor: "#F33", //线颜色
					strokeOpacity: 1, //线透明度
					strokeWeight: 3, //线粗细度
					fillColor: "#ee2200", //填充颜色
					fillOpacity: 0.35 //填充透明度
				});
				// 构造点标记
				const marker = new MapIns.Marker({
					position: [longitude, latitude],
					anchor: 'bottom-center'
				});
				this.map.add([marker]); //添加多个覆盖物[circle, marker]
			},
			back() {
				uni.navigateBack()
			},
			startStopCheck() {
				if (this.checkItem.trim() === "") {
					uni.showToast({
						icon: 'error',
						title: " 请选择检查项目"
					})
				} else {
					const data = {
						driverName:this.driverName,
						truckNo:this.truckNo,
						checkItemName:this.getCheckItem,
						checkItemId:this.checkItem,
						address: this.locationInfo.address,
						shipmentId: this.orderId,
						truckId: this.truckId,
						driverId: this.driverId
						
					}
					uni.redirectTo({
						url: `/subpkg/stopCheckDetail/stopCheckDetail?data=${JSON.stringify(data)}`
					})
				}
			},
			getShipmentInfo() {
				const data = {
					"aux": {
						"id": this.orderId
					}
				}
				const {
					shipmentBizName
				} = appInstance.globalData.shipmentInfo
				const requestFun = shipmentBizName === 'tm.MassShipment' ? shipmentOrderDetailMass : shipmentOrderDetail
				requestFun(data).then(res => {
					this.driverName = res.data.data.header['driver1.name']
					this.driverId = res.data.data.header['driver1.id']
					this.truckNo = res.data.data.header['truck.name']
					this.truckId = res.data.data.header['truck.id']
				})
			},
			navCargoDetail() {
				this.visible = true
				this.getTruckCheckItems()

			},
			onConfirmPicker(value) {
				console.log(value)
				this.checkItem = value
				this.visible = false
			},
			getTruckCheckItems() {
				this.optionEnums = []
				GetTruckCheckItems({
					"args": {
						"pageNum": 0,
						"pageSize": 200
					}
				}).then(res => {
					res.data.data.datas.map(item => {
						this.optionEnums.push({
							label: item.label,
							value: item.id
						})
					})
				})
			},
			onVisible() {
				this.visible = false
			}
		}
	}
</script>

<style lang="scss">
	.truck-stop-check {
		font-size: 28rpx;
		background-color: #FAFAFA;
		height: 100vh;

		/deep/.custom-cell-row {
			margin: 0 0 24rpx 0;

			.custom-cell-label {
				color: #8C8C8C;
			}

			.t-icon-location {
				width: 50rpx;
				height: 50rpx;
			}
		}

		/deep/.form-content {
			padding: 0 40rpx;
			background-color: #ffffff;
			margin: 25rpx 0;

			.input-tip {
				font-size: 28rpx;
				color: #BFBFBF;
			}

			.u-form-item__body__left__content__label {
				color: #8C8C8C;
				font-size: 28rpx;
			}

			.u-form-item__body__left__content__required {
				font-size: 28rpx !important;
				top: auto !important;
				left: -16rpx !important;
			}

			.u-icon {
				margin-left: 20rpx;
			}
		}

		&-content {
			background-color: #FFFFFF;
			margin-top: 24rpx;
			padding: 40rpx 24rpx;

			.custom-cell-row {
				margin: 0;
			}
		}

		.operation-btn {
			position: fixed;
			bottom: 0rpx;
			height: auto;
			background-color: #FFFFFF;
			padding: 24rpx 0;
			z-index: 98;
			margin-bottom: 0;

			&:after {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: inherit;
				filter: blur(12rpx);
				z-index: 99;
			}

			.common_btn {
				margin-top: 0;
				z-index: 100;
			}
		}
		/deep/.custom-cell-value{
			width: 100%;
			height: 100%;
		}
	}
</style>
