<template>
	<view class="parts-detail">
		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="物流信息" titleColor="#333333"
			:border-bottom="false" title-bold>
		</u-navbar>
		<view class="content-view">
			<view class="contacts-view">
				<view class="contacts-left-view">
					<image class="image-view" :src="imageUrl"></image>
					<view class="total-view">共{{total}}件</view>
				</view>
				<view class="right-view">
					<view class="title-view">{{title}}</view>
					<view>{{'物流公司：' + (info.express.com || '--')}}</view>
					<view class="number-view">
						<text>{{'物流单号：' + (info.express.number || '--')}}</text>
						<text class="copy-view" @click="$u.throttle(handleClick, 500)">复制单号</text>
					</view>
				</view>
			</view>
			<view class="record-view" v-if="hasRecords">
				<view class="express-record-list">
					<view class="dashed-line-view"></view>
					<view class="express-list">
						<view v-for="(item, index) in logisticsRecords" :key="index" class="order-cell">
							<view class="node-view">
								<view :class="['node-border-view', {'first': index == 0}]">
									<view :class="['node-middle-view', {'first': index == 0}]"></view>
								</view>
							</view>
							<view class="right-view">
								<view class="line-view-time">
									<text>{{item.datetime}}</text>
								</view>
								<view class="line-view-context">
									<text>{{item.context}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					items: [],
					express: []
				},
				logisticsRecords: [], // 物流
			};
		},
		computed: {
			// 待签收 15；待发货 10；待审核 1；已取消 -1；已驳回 -2；已签收 20
			title() {
				return this.titles[String(this.info.status)]
			},
			titles() {
				return {
					'1': '待审核',
					'10': '待发货',
					'15': '待签收',
					'20': '已签收',
					'-1': '已驳回',
					'1': '已取消'
				}
			},
			hasRecords() {
				return this.$u.test.isEmpty(this.logisticsRecords) ? false : true
			},
			imageUrl() {
				let item = this.info.items[0] || {}
				return item.images ? process.uniEnv.systemUrl.apiUrl + item.images.split(',').shift() : this.placeholderImage
			},
			total() { // 合计
				var i = 0
				for (var item of this.info.items) {
					i += item.quantity
				}
			
				return i
			},
			titleColor() {
				switch (String(this.info.status)) {
					case '-1': // 已驳回
						return '#FA5A49'
					case '1': // 已取消
						return '#666666'
					default:
						return '#2272FF'
				}
			},
			total() { // 合计
				var i = 0
				for (var item of this.info.items) {
					i += item.quantity
				}

				return i
			},
			placeholderImage() {
				return process.uniEnv.qn_base_url + 'morentupian.png'
			},
		},
		onLoad(e) {
			getApp().trackPage('配件单物流信息')
			var pages = getCurrentPages();
			if (pages.length >= 2) {
				var page = pages[pages.length - 2];
				this.info = page.info
			}
			this.getLogistics()
		},
		methods: {
			getLogistics() {
				this.$u.api.getLogistics(this.info.id).then((res) => {
					if (res.code == 200) {
						if (res.data && res.data.expressInfo && res.data.expressInfo.records) {
							this.logisticsRecords = res.data.expressInfo.records
						}
					} else {
						console.log(res.message)
					}
				});

			},
			handleClick() {
				uni.setClipboardData({
					data: this.info.express.number,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.parts-detail {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		background-color: #F4F5F7;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.content-view {
			padding: 30rpx;
			height: 100%;
			overflow: auto;

			.contacts-view {
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: flex-start;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				.contacts-left-view {
					position: relative;
					.image-view {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						position: relative;
					}
					.total-view {
						position: absolute;
						height: 32rpx;
						border-radius: 16rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						background-color: rgba(0, 0, 0, 0.5);
						bottom: 16rpx;
						width: 100rpx;
						text-align: center;
						margin-left: 10rpx;
						line-height: 32rpx;
					}
				}

				.right-view {
					font-size: 26rpx;
					color: #333333;
					padding-left: 30rpx;
					width: 100%;

					.title-view {
						font-weight: bold;
						font-size: 32rpx;
						margin-bottom: 12rpx;
					}

					.number-view {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 12rpx;
						.copy-view {
							color: #2272FF;
							padding-left: 30rpx;
							flex-shrink: 0;
						}
					}
				}
			}

			.record-view {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				padding: 30rpx 30rpx 0 30rpx;
				position: relative;
				display: flex;
				justify-content: space-between;

				.express-record-list {
					position: relative;

					.dashed-line-view {
						position: absolute;
						width: 2rpx;
						border-left: 1px dashed #999999;
						height: calc(100% - 64rpx);
						top: 14rpx;
						left: 11rpx;
					}

					.express-list {
						width: 100%;

						.order-cell {
							margin-bottom: 50rpx;
							display: flex;

							.node-view {
								margin-right: 18rpx;
								flex-shrink: 0;
								margin-top: 8rpx;
								z-index: 1;

								.node-border-view {
									border: 2rpx solid #999999;
									border-radius: 11rpx;
									width: 22rpx;
									height: 22rpx;
									padding: 5rpx;
									background-color: #FFFFFF;

									&.first {
										border: 2rpx solid #2272FF;
									}

									.node-middle-view {
										width: 10rpx;
										height: 10rpx;
										background-color: #999999;
										border-radius: 6rpx;

										&.first {
											background-color: #2272FF;
										}
									}
								}
							}

							.right-view {
								width: 100%;

								.line-view-time {
									font-size: 28rpx;
									font-weight: bold;
									color: #333333;
									margin-bottom: 20rpx;
								}

								.line-view-context {
									font-size: 26rpx;
									color: #666666;
								}
							}

						}
					}
				}

			}
		}

		.bottom-view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 30rpx 44rpx 30rpx;

			.total-view {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;

				.amount-view {
					color: #2272FF;
				}
			}

		}
	}
</style>
