<template>
	<view class="routine_radius_card shipmentCard">
		<view class="shipment-header flex_sb">
			<view class="shipment_code flex_center">
				<text selectable> 运单号：{{data.uc_master_no}}</text>
			</view>
			<view :class="data.shipmentStatus ==='Approved' ? 'shipment-state' : 'shipment-state shipmenting'">
				{{data.shipment_status_label}}
			</view>
		</view>
		<!-- 主要运单信息 -->
		<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="onGetLocation" />
				<view class="t-icon" v-else>
					<u-loading-icon color="#2E75E6" size="40" mode="semicircle"></u-loading-icon>
				</view>
			</view>
		</bs-customCell>
	<!-- 	<bs-customCell label="发运日期 :" :value="data.shipmentDate" labelCol="3" wrapCol="7" /> -->
		<!-- <bs-customCell label="运输时效 :" :value="data.transportTimeliness" labelCol="3" wrapCol="7" /> -->
		<template v-if="data.shipmentStatus ==='Finished'">
			<bs-customCell label="完成时间 :" :value="data.finishTime" labelCol="3" wrapCol="7" />
		</template>
		<bs-customCell label="司机姓名 :" :value="data['drivername']" labelCol="3" wrapCol="9" />
		<bs-customCell label="司机手机 :" :value="data['tel']" labelCol="3" wrapCol="9" />
		<bs-customCell label="车牌号 :" :value="data['truckname']" labelCol="3" wrapCol="10" />
		<bs-customCell label="货量 :" labelCol="2" wrapCol="9"
			:value="data.shipqtycount+ '箱/' + data.shipweightcount+'千克'">
			<view slot="right-icon">
				<u-icon name="arrow-right" size="36" @click="navCargoDetail" />
			</view>
		</bs-customCell>
	</view>
</template>

<script>
	import AMap from "../../utils/AMapUtil.js"
	const getUserLocation = require('../../mixins/getUserLocation')
	export default {
		name: "shipmentCard",
		mixins: [getUserLocation],
		data() {
			return {
				isLocation: true
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		props: {
			propData: {
				type: String,
				default: ""
			},
		},
		watch: {
			propData: {
				handler(newValue) {
					this.data = JSON.parse(newValue);
					this.getUserSetting()
				}
			}
		},
		data() {
			return {
				data: []
			};
		},
		methods: {
			//获取当前位置
			getSiteName() {
				const _this = this
				AMap.reverseGeocoder().then(res => {
					const address = res.textData.desc
					const info = {
						...res,
						address
					}
					_this.$emit('getCurrentLocation', info)
					_this.locationInfo = info
					_this.isLocation = true
				})
			},
			onGetLocation() {
				this.isLocation = false
				this.getUserSetting()
			},
			//跳转至货物明细
			navCargoDetail() {
				uni.navigateTo({
					url: '/subpkg/cargoDetail/cargoDetail',
				})
			}
		}
	}
</script>

<style lang="scss">
	.shipmentCard {
		border-radius: 0;
		margin: 0rpx 0rpx 0rpx 24rpx;
		font-size: 28rpx;


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

		.shipment-state {
			font-size: 28rpx;
			color: #F7A64A;
			line-height: 33rpx;
			padding: 6rpx 40rpx;
			margin-bottom: 30rpx;
			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);
		}

		.t-icon-location {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>
