<template>
	<view class="queryHistory">
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="history-list routine_radius_card">
			<u-empty mode="data" textSize='32' iconSize="160" text="暂无操作历史" v-if="!datas.length" />
			<!-- 步骤条 -->
			<u-steps direction="column">
				<u-steps-item v-for="(item,index) in datas" :key="index">
					<view slot="icon">
						<image :class="['t-icon',{'icon_font_size': index}]" :src="!index ? '../../static/img/steps/step-active.png' : '../../static/img/steps/step-inactive.png'"></image>
					</view>
					<view class="step-desc flex_center flex_sb" slot="desc">
						<view class="flex_col">
							<view style="color: #262626">
								<text>{{item.eventTime}}</text>
								<text class="font_bolder" style="margin-left: 40rpx;">{{item.eventTypeLabel}}</text>
							</view>
							<view style="color: #8C8C8C;margin: 10rpx 0">
								<text>{{item['location.name'] || item.address}}</text>
							</view>
						</view>
						<view v-if="item.isLink">
							<u-icon name="arrow-right" size="36" @click="onNavigatePage(item)" />
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
	import { operationHistory, operationDetail, getOptionEnum } from '../../api/apiList'
	import { formatGMT } from '../../utils/util'
	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
				datas: [], //操作历史信息
				linkUrl: '', //页面跳转地址
				eventTypes: [], //在途事件类型
				orderId: "", //订单Id
				shipmentNo: '', //运单号

				pageNum: 1, //页码
				pageSize: 20, //每页条数
				loadMore: true, //加载更多
			}
		},
		onLoad: function(options) {
			this.orderId = options.id
			this.shipmentNo = getApp().globalData.shipmentInfo.shipmentNo
			this.initData()
		},
		//下拉刷新
		onPullDownRefresh: function() {
			this.onReload()
		},
		//触底加载更多
		onReachBottom: function() {
			if (this.loadMore) {
				this.initData();
				this.loadMore = false
			}
		},
		methods: {
			initData() {
				const _this = this
				const { pageNum, pageSize, orderId } = _this
				const reqData = {
					"args": {
						"pageNum": pageNum,
						"pageSize": pageSize,
						"restrictions": [{
							"field": "shipment.id",
							"type": "EQ",
							"value": orderId
						}]
					}
				}
				operationHistory(reqData).then(res => {
					uni.stopPullDownRefresh()
					const datas = res.data.data.datas
					if (!datas.length) return
					_this.getEventTypes().then(types => { // 获取在途事件类型枚举
						datas.map(item => {
							item.eventTime = formatGMT(item.eventTime) //格式化时间
							//判断是否跳转操作详情
							let isLink = false
							switch (item.eventType) {
								case 'Loading': //装货开始
								case 'LoadFinish': //装货完成
								case 'Unloading': //卸货开始
								case 'UnloadFinish': //卸货完成
								case 'LoadAbort': //放弃装货
								case 'UnloadRefuse': //拒收
								case 'Weight': //上传磅单
								case 'TransferAndChangeTruck': //中转换车
								case 'TransferUnload': //中转卸货
									// case 'Signature': //电子签收
								case 'Arrival': //到站
								case 'Departure': //离站
								case 'Received': //签收
								case 'LoadQty': //数量装货
								case 'UnloadQty': //数量卸货
									isLink = true
									break;
							}
							if (types.some(itm => itm === item.eventType)) { //在途事件类型特殊处理
								isLink = true
							}
							item.isLink = isLink
						})
						this.datas = _this.datas.concat(datas)
						this.eventTypes = types
						this.pageNum = pageNum + 1
						this.loadMore = true
					})
				})
			},
			// 刷新页面
			onReload() {
				this.datas = []
				this.pageNum = 1
				this.initData()
			},
			// 获取在途事件类型枚举
			getEventTypes() {
				return new Promise((reslove, reject) => {
					getOptionEnum('TransitType').then(res => {
						const datas = res.data.data.datas
						let enums = []
						datas.map(item => {
							enums.push(item.value)
						})
						reslove(enums)
					})
				})
			},
			// 查看操作详情 + 页面跳转
			onNavigatePage(datas) {
				let { eventType, id } = datas
				let linkUrl = ""
				let data = {}
				switch (eventType) {
					case 'Loading': //装货开始
					case 'LoadFinish': //装货完成
					case 'Unloading': //卸货开始
					case 'UnloadFinish': //卸货完成
					case 'LoadAbort': //放弃装货
					case 'UnloadRefuse': //拒收
					case 'LoadQty': //数量装货
					case 'UnloadQty': //数量卸货
						linkUrl = "/subpkg/viewLoadDischarg/viewLoadDischarg" //查看装卸货
						break;
					case 'Weight':
						linkUrl = "/subpkg/viewWeight/viewWeight" //查看磅单
						break;
					case 'TransferAndChangeTruck':
					case 'TransferUnload':
						linkUrl = '/subpkg/transferChange/transferChange' //查看中转换车、中转卸货
						break;
					case 'Received':
						linkUrl = "/subpkg/viewSignFor/viewSignFor" //查看纸质签收
						break;
					case 'Signature':
						linkUrl = "/subpkg/viewSignature/viewSignature" //查看电子签收
						break;
					case 'Arrival':
					case 'Departure':
						linkUrl = "/subpkg/viewArrivalDeparture/viewArrivalDeparture" //查看到站、离站
						break;
				}
				if (this.eventTypes.some(itm => itm === eventType)) {
					linkUrl = "/subpkg/viewSign/viewSign" //查看位置上报 在途事件
				}
				operationDetail({ "aux": { id } }).then(res => {
					const resData = res.data.data.header
					if (linkUrl) {
						uni.navigateTo({
							url: linkUrl + `?data=${JSON.stringify(resData)}`,
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.queryHistory {

		.step-desc {
			margin: 5rpx 10rpx;
			font-size: 28rpx;
		}

		// .step_icon{

		// }
	}
	.icon_font_size{
		width: 20rpx;
		height: 20rpx;
	}
</style>
