<template>
	<scroll-view class="shipmentDetail content_box">
		<shipmentCard :propData="JSON.stringify(data)" />
		<template v-if="data.shipmentStatus!=='Received'">
			<view class="operation-btns">
<!-- 			测试用
                <button class="common_btn"  @click="onPunchIn(data,'Arrived')">确认到仓</button>
				<button class="common_btn"  @click="onPunchIn(data,'Leaved')">装货完成</button>
				<button class="common_btn"  @click="onPunchIn(data,'Received')">确认签收</button>
				<button class="common_btn"  @click="onNavSign(data,'error')">异常上报</button> -->
				
				<button class="common_btn" v-if="data.shipmentStatus ==='Dispatch'" @click="onPunchIn(data,'Arrived')">确认到仓</button>
				<button class="common_btn" v-if="data.shipmentStatus ==='Arrived'" @click="onPunchIn(data,'Leaved')">装货完成</button>
				<button class="common_btn" v-if="data.shipmentStatus ==='Leaved'" @click="onPunchIn(data,'Received')">确认签收</button>
				<button class="common_btn" v-if="data.shipmentStatus!=='Received'" @click="onNavSign(data,'error')">异常上报</button>
			</view>
		</template>
		<view class="flex_sb" style="margin: 28rpx 30rpx 0 0">
			<!-- 			<view class="flex_center" @click="onNavShipmentLbs" data-path="/subpkg/shipmentLbs/shipmentLbs">
				<view class="t-icon t-icon-view-track"></view>
				<text style="margin-left: 10rpx; color: #434343; font-weight: 400;">查看轨迹</text>
			</view> -->
		</view>

		</view>

		<!-- 运单明细 -->
		<view class="outer-frame" v-for="item in shipmentDatas" :key="item.shipmentNo" 
			:data-info="item">
			<uni-section title="配置图片" type="line">
				<uni-collapse>
					<uni-collapse-item style="height: auto;" :title="item.shipmentNo"  titleBorder="show" 
						:thumb="require('../../static/img/tabbar/shipment-active.png')">
						<u-col><text class="content-text" selectable>经销商名称：{{item['uc_dealer_label']}}</text></u-col>
						<u-col><text class="content-text" selectable>收货人：{{item['destination.addressContact.name']}} </text></u-col>
						<u-col><text class="content-text" selectable>收货电话：{{item['destination.addressContact.tel']}} </text></u-col>
						<u-col><text class="content-text" selectable>收货地址：{{item['destination.name']}} </text></u-col>	
						<u-col><text class="content-text" selectable>总重量：{{item['shipWeight']}} </text></u-col>
						<u-col><text class="content-text" selectable>总数量：{{item['shipQty']}} </text></u-col>
						<u-col><text class="content-text" selectable>派单时间：{{item['uc_dispatch_time']}} </text></u-col>
						<u-col><text class="content-text" selectable>车辆到仓时间：{{item['actualArrivalOriginalTime']}}</text></u-col>	
						<u-col><text class="content-text" selectable>车辆离仓时间：{{item['actualDepartureTime']}}</text></u-col>
						<u-col><text class="content-text" selectable>签收日期：{{item['uc_receive_date']}}</text></u-col>
						<view  v-if="data.shipmentStatus ==='Received'" class="operation-btns">
							<button class="common_btn" @click="onPodUpload(item)">回单上传</button>
							<!-- <button class="common_btn" @click="onNavSign">送货单明细</button> -->
							</view>
					</uni-collapse-item>
				</uni-collapse>
			</uni-section>
		</view>
		<!-- 		<stopsDetail ref="ownerStops" :propData="JSON.stringify(shipmentDatas)" :shipmentStatus="data.shipmentStatus"
			:orderSplitMode='data.splitMode' @onRefresh="onRefresh" / > -->
		<!-- 		<button class="common_btn historyBtn" @click="onNavHistory">操作历史</button> -->
	</scroll-view>
</template>

<script>
	import {
		shipmentOrderDetail,
		shipmentStationDetail,
		shipmentOrderDetailMass,
		getShipmentList
	} from '../../api/apiList'
	import {
		formatGMT
	} from '../../utils/util'
	import {
		TokenPrefix
	} from '../../publicConfig/config.js'
	const appInstance = getApp()
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				data: {}, //运单简要信息
				stopsDatas: [], //站点信息
				shipmentDatas: [], //运单明细
				orderId: '', //订单id
			}
		},
		onLoad: function(options) {
			const data = JSON.parse(options.shipmentgroup)
			console.log(data)
			this.data = data
			this.data.shipmentStatus=this.data.shipment_status
		},
		onShow: function() {
			let XSRFToken = uni.getStorageSync(`${TokenPrefix}_XSRFToken`)
			if (XSRFToken) {
				this.onRefresh()
			}
		},
		methods: {
			//初始化数据
			initData() {
				let reqData = {
					"args": {
						"pageNum": 1,
						"pageSize": 100,
						// "restrictions": [{
						// 	"field": "uc_master_no",
						// 	"type": "EQ",
						// 	"value": this.data.uc_master_no
						// }]
					}
				}
				getShipmentList(reqData).then(res => {
					uni.stopPullDownRefresh()
					const data = res.data.data.datas
					if (data.length > 0) {
						this.shipmentDatas = data;
						console.log("shipmentDatas：" + this.shipmentDatas)
					}
				})
			},

			//初始化站点信息
			initStationDetail() {
				const data = {
					"args": {
						"pageNum": 1,
						"pageSize": 100,
						"restrictions": [{
							"field": "shipment.id",
							"type": "EQ",
							"value": this.orderId
						}]
					}
				}
				shipmentStationDetail(data).then(res => {
					let stopsDatas = res.data.data.datas
					stopsDatas.sort((a, b) => (a.stopNumber - b.stopNumber || b.loadStop - a.loadStop)) //站点排序
					stopsDatas.map(stop => { //格式化站点信息中时间
						stop.actualArrivalTime = formatGMT(stop.actualArrivalTime)
						stop.actualDepartureTime = formatGMT(stop.actualDepartureTime)
						stop.loadStartTime = formatGMT(stop.loadStartTime)
						stop.loadFinishTime = formatGMT(stop.loadFinishTime)
						stop.unloadStartTime = formatGMT(stop.unloadStartTime)
						stop.unloadFinishTime = formatGMT(stop.unloadFinishTime)
						stop.receiveTime = formatGMT(stop.receiveTime)
						stop.signatureTime = formatGMT(stop.signatureTime)
						stop.weightTime = formatGMT(stop.weightTime)
					})
					this.stopsDatas = stopsDatas
				})
			},
			//站点操作后页面刷新
			onRefresh() {
				console.log(this.data)
				this.initData()
				// this.initStationDetail()
			},
			//跳转异常上报
			onNavSign(item,status) {
				const data = JSON.stringify(item)
				console.log(data)
				uni.navigateTo({
					url: `/subpkg/reportSign/reportSign?shipment=${data}&status=${status}`,
				})
			},
			//跳转打卡
			onPunchIn(item,status) {
				const data = JSON.stringify(item)
				console.log(data)
				uni.navigateTo({
					url: `/subpkg/punchIn/punchIn?shipment=${data}&status=${status}`,
				})
			},
			//回单上传
			onPodUpload(item) {
				const data = JSON.stringify(item)
				uni.navigateTo({
					url: `/subpkg/podUpload/podUpload?shipment=${data}`,
				})
			},
			//跳转费用上报
			onNavReport() {
				uni.navigateTo({
					url: `/subpkg/reportCost/reportCost?data=${JSON.stringify(this.data)}`,
				})
			},
			//跳转中转换车、中转卸货
			onNavPage(e) {
				const {
					path,
					action
				} = e.target.dataset
				const data = {
					selectedId: this.data.id,
					action
				}
				uni.navigateTo({
					url: path + `?data=${JSON.stringify(data)}`,
				})
			},
			//查询操作历史
			onNavHistory() {
				uni.navigateTo({
					url: `/subpkg/queryHistory/queryHistory?id=${this.data.id}`,
				})
			},
			//校验当前位置与站点距离, 自动展开较近站点详情
			getCurrentLocation(addresInfo) {
				const _this = this
				const {
					latitude,
					longitude
				} = addresInfo
				const stopsDatas = this.stopsDatas
				if (stopsDatas.length) {
					let distances = []
					const stopsInstance = this.$refs.ownerStops
					stopsDatas.map(stop => {
						const locationLatitude = stop['location.latitude']
						const locationLongitude = stop['location.longitude']
						if (locationLatitude && locationLongitude) {
							const distance = _this.distance(latitude, longitude, locationLatitude,
								locationLongitude)
							distances.push({
								id: stop.id,
								distance,
								locationId: stop['location.id']
							})
						}
					})
					if (distances.length) {
						distances = distances.sort((a, b) => (a.distance - b.distance)) //站点距离排序 由近到远
						stopsInstance.activeNames = [distances[0].id]
						appInstance.globalData.stopsInfo.locationId = [distances[0]
							.locationId] //设置全局变量，避免自动展开面板后查询不到站点关联订单
						// stopsInstance.currentName = distances[0].id

					} else {
						stopsInstance.activeNames = [stopsDatas[0].id]
						appInstance.globalData.stopsInfo.locationId = [stopsDatas[0][location.id]]
						// stopsInstance.currentName = stopsDatas[0].id
					}
				}
			},

			// 计算两点之间距离
			distance(la1, lo1, la2, lo2) {
				let La1 = la1 * Math.PI / 180.0;
				let La2 = la2 * Math.PI / 180.0;
				let La3 = La1 - La2;
				let Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(
					Math.sin(Lb3 / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2);
				return s;
			},

			//跳转运单Lbs
			onNavShipmentLbs(e) {
				const {
					id,
					shipmentNo
				} = this.data
				const data = {
					shipmentId: id,
					shipmentNo
				}
				const path = e.currentTarget.dataset.path + `?data=${JSON.stringify(data)}`
				uni.navigateTo({
					url: path,
				})
			},
		}
	}
</script>

<style lang="scss">
	.content-text{
		text-align: left; 
		font-size: 16px;
	}
	.shipmentDetail {
		background: #FAFAFA;

		.operation-btns {
			margin-top: 24rpx;
			padding-bottom: 24rpx;
			display: flex;
			flex-wrap: wrap;

			.btn-active {
				width: 90%;
				border: none;
				color: #2E75E6;
				background-color: #EAF1FC;
			}
		}

		.historyBtn {
			width: 90%;
			border: none;
			margin: 30rpx auto;
			background: #EAF1FC;
		}
	}
</style>