<template>
	<view class="shipmentItem box_shadow_card" @click="navToShipmentDetail">
		<view class="shipment-header flex_sb">
			<view class="shipment_code flex_center">
				<text selectable> 运单号：{{propData.shipmentNo}}</text>
			</view>
			<view :class="propData.shipmentStatus ==='Approved' ? 'shipment-state' : 'shipment-state shipmenting'">
				{{propData.shipmentStatusLabel}}
			</view>
		</view>
		<u-line color="#E5E5E5" margin="20rpx 0" />
		<view class="stations">
			<view class="start-station flex_center">
				<view class="t-icon t-icon-start-sddress "></view>
				{{propData['original.city']}}
			</view>
			<view class="end-station flex_center">
				<view class="t-icon t-icon-end-sddress"></view>
				{{propData['destination.city']}}
			</view>
		</view>
		<bs-customCell label="发运日期 :" :value="propData.shipmentDate" labelCol="3" wrapCol="6" />
		<!-- <customCell label="运输时效" :value="propData.transportTimeliness || '0天'" labelCol="4" wrapCol="6" /> -->
		<template v-if="propData.shipmentStatus ==='Finished'">
			<bs-customCell label="完成日期 :" :value="propData.finishTime" labelCol="3" wrapCol="6" />
		</template>
		<bs-customCell label="货量 :" labelCol="2" wrapCol="10"
			:value="propData.shipOrders + '单/' +propData.shipQty+ '件/' + propData.shipWeight+'千克/'+ propData.shipVolume+'方'" />
		<template v-if="propData.shipmentStatus ==='Approved'">
			<!-- <template > -->
			<view class="flex_sb">
				<view class="start-btn stop-check-btn flex_center flex_cen" @click.stop="truckStopCheck" :data-id="propData.id">车辆点检</view>
				<view class="start-btn flex_center flex_cen" @click.stop="onClick" :data-id="propData.id">开始</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { startShipment } from '../../api/apiList'
	import AMap from "../../utils/AMapUtil.js"
	import { formatTime } from '../../utils/util'
	const getUserLocation = require('../../mixins/getUserLocation')

	export default {
		name: "shipmentItem",
		mixins: [getUserLocation],
		options: { styleIsolation: 'shared' },
		props: {
			propData: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				shipmentId: '' //运单id
			};
		},
		methods: {
			//跳转运单明细
			navToShipmentDetail() {
				this.onSetGlobalData()
				const orderId = this.propData.id
				uni.navigateTo({
					url: `/subpkg/shipmentDetail/shipmentDetail?orderId=${orderId}`,
				})
			},
			//设置全局变量
			onSetGlobalData() {
				const appInstance = getApp()
				appInstance.globalData.shipmentInfo = {
					shipmentBizName: this.propData.bizName,
				}
				appInstance.globalData.transferAddress = {} //清除中转数据缓存
			},
			onClick(e) {
				const shipmentId = e.currentTarget.dataset.id
				this.shipmentId = shipmentId
				this.getUserSetting()
			},
			truckStopCheck(e){
				const orderId = this.propData.id	
				const shipmentNo = this.propData.shipmentNo
				// const orderId = 545775850205745152
				uni.navigateTo({
					url: `/subpkg/truckStopCheck/truckStopCheck?orderId=${orderId}&shipmentNo=${shipmentNo}`,
					

				})
			},
			//获取当前位置
			getSiteName() {
				const _this = this
				AMap.reverseGeocoder().then(res => {
					const address = res.textData.desc
					const time = formatTime(new Date())
					const info = { ...res, address, time }
					_this.onStartShipment(info)
				})
			},
			//运输开始
			onStartShipment(info) {
				const { longitude, latitude, address, time } = info
				const data = {
					"aux": { longitude, latitude, address, time },
					"args": {
						"selectedIds": [this.shipmentId]
					}
				}
				startShipment(data).then(res => {
					if (res.data.messageType === 'success') {
						uni.showToast({
							title: '操作成功',
							duration: 1500
						})
						setTimeout(() => {
							this.$emit('onReload')
						}, 2000)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.shipmentItem {
		position: relative;
		margin: 0 24rpx 24rpx;

		&/deep/.custom-cell-row {
			margin-top: 20rpx;
		}

		.shipment_code {
			line-height: 40rpx;
			text-shadow: 1rpx 3rpx 12rpx rgba(0, 0, 0, 0.04);
		}

		.shipment-state {
			height: 44rpx;
			font-size: 24rpx;
			color: #F7A64A;
			line-height: 44rpx;
			padding: 0 24rpx;
			border-radius: 8rpx;
			background: rgba(247, 166, 74, .1);
			text-shadow: 1rpx 3rpx 12rpx rgba(0, 0, 0, 0.04);
		}

		.shipmenting {
			color: #66CCCC;
			background: rgba(61, 204, 185, .1);
		}

		.stations {
			margin-top: 24rpx;
			margin-bottom: 32rpx;
		}

		.start-station,
		.end-station {
			margin: 20rpx 0;
			font-size: 30rpx;
			font-weight: bolder;

			.t-icon{
				margin-right: 6rpx;
			}
		}

		.start-btn {
			color: #FFFFFF;
			padding: 20rpx;
			margin-top: 30rpx;
			border-radius: 44rpx;
			box-shadow: 1rpx 3rpx 12rpx 0px rgba(0, 0, 0, 0.04);
			background: linear-gradient(90deg, #2E75E6 0%, #5E58EE 100%);
			width: 315rpx;
		}

		.stop-check-btn {
			border: 3rpx solid transparent;
			color: #2E75E6;
			background-image: linear-gradient(#FFFFFF , #FFFFFF ), linear-gradient(90deg, #2E75E6 0%, #5E58EE 100%);
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
		}
	}
</style>
