<template>
	<div class="app-content">
		<!-- order-top -->
		<div class="module-com order-wrap" v-if="!$util.isEmpty(data)">
			<div class="order-det">
				<div>
					<div class="label">订单号</div>
					<div>{{ data.orderSn }}</div>
				</div>
				<div>
					<div class="label">下单时间</div>
					<div>{{ data.addTime | formatTime }}</div>
				</div>
				<div v-if="!$util.isEmpty(data.goodsInfoList)">
					<div class="label">商品名称</div>
					<div>{{ data.goodsInfoList[0].title }}</div>
				</div>
				<div>
					<div class="label">金额</div>
					<div>¥{{ data.actPrice }}</div>
				</div>
			</div>
			<div class="order-img" v-if="!$util.isEmpty(data.goodsInfoList)">
				<img :src="data.goodsInfoList[0].smallCoverUrl" alt="商品图" mode="widthFix" />
			</div>
		</div>
		<!-- order-bottom -->
		<div class="module-com order-axis" v-if="showIndex != null">
			<!-- 列表 -->
			<!-- 选择订单 -->
			<block v-if="showIndex == 0">
				<sel-order :orderData="data" :query="option" />
			</block>
			<!-- 选择发货 -->
			<block v-if="showIndex == 1">
				<sel-ship :orderData="data" :query="option" :orderComData="orderComData" />
			</block>
			<!-- 选择自提 -->
			<!-- <block v-if="showIndex == 2">
				<sel-mention :orderData="data" :query="option" />
			</block> -->
			<!-- 快递送待接单 -->
			<!-- <block v-if="showIndex == 3">
				<sel-pending-order :orderData="data" :query="option" :orderComData="orderComData" />
			</block> -->
			<!-- 发货选择快递送已接单 -->
			<block v-if="showIndex == 4">
				<sel-express-confirm :orderData="data" :query="option" :orderComData="orderComData" />
			</block>
			<!-- 发货选择完成 -->
			<block v-if="showIndex == 5">
				<sel-confirm :orderData="data" :query="option" :orderComData="orderComData" />
			</block>
			<!-- 发货管理完成 -->
			<block v-if="showIndex == 6">
				<sel-ship-confirm :orderData="data" :query="option" :orderComData="orderComData" />
			</block>
			<!-- 有配送单-发货管理 -->
			<block v-if="showIndex == 7">
				<sel-ship-manage :orderData="data" :query="option" :orderComData="orderComData" />
			</block>
		</div>
	</div>
</template>

<script>
// 选择订单
import SelOrder from './components/sel-order'
// 选择发货
import SelShip from './components/sel-ship'
// 选择自提
import SelMention from './components/sel-mention'
// 快递送待接单
import SelPendingOrder from './components/sel-pending-order'
// 发货选择快递送已接单
import SelExpressConfirm from './components/sel-express-confirm'
// 发货选择完成
import SelConfirm from './components/sel-confirm'
// 发货管理完成
import SelShipConfirm from './components/sel-ship-confirm'
// 有配送单-发货管理
import SelShipManage from './components/sel-ship-manage'

// api
import { getDetB, orderSendDet } from '@/api/order'
export default {
	name: 'admin-ship',
	components: {
		SelOrder,
		SelShip,
		SelMention,
		SelPendingOrder,
		SelExpressConfirm,
		SelConfirm,
		SelShipConfirm,
		// 有配送单
		SelShipManage
	},
	data() {
		return {
			showIndex: null,
			data: {},
			orderComData: []
		}
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		// this.init()
	},
	methods: {
		init() {
			// this.showIndex = this.option.pageStatus || 0
			this._getDet()

			this._orderComDet()
		},
		_getDet() {
			return getDetB({ id: this.option.id }).then(res => {
				this.data = res.data
			})
		},
		_orderComDet() {
			orderSendDet({ id: this.option.id }).then(res => {
				this.orderComData = res.data
				this.getPageStatus()
			})
		},
		getPageStatus() {
			uni.hideLoading()
			if (this.$util.isEmpty(this.orderComData)) return false
			let textStatus = this.orderComData[0].actionName
			if (textStatus == '打单') {
				let receive = this.orderComData[0].receive
				if (this.$util.isEmpty(receive)) {
					this.showIndex = 0
				} else {
					this.showIndex = 1
				}
			} else if (textStatus == '发货') {
				this.showIndex = 7
			} else if (textStatus == '送达') {
				this.showIndex = 4
			} else if (textStatus == '完成') {
				let classify = this.orderComData[0].classify
				if (this.$util.isEmpty(classify)) {
					this.showIndex = 5
				} else {
					this.showIndex = 6
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		background-color: #fff;
	}
	// 公共
	.module-com {
		padding: 30px;
		// margin-bottom: 20px;
	}
	// 订单信息
	.order-wrap {
		@include disFlex(center, space-between);
		padding: 20px;
		border-bottom: 20px solid $backColor;
		.order-det {
			font-size: 24px;
			& > div {
				@include disFlex(center, flex-start);
				margin-top: 12px;
				&:first-child {
					margin-top: 0;
				}
				.label {
					width: 120px;
					color: $fontColor2;
				}
			}
		}
		.order-img {
			width: 146px;
		}
	}
	// 订单详情
	.order-axis {
		padding-top: 50px;
		// 公共
		/deep/.axis-list {
			margin-bottom: 50px;
			.axis-slot-wrap {
				position: relative;
				top: -14px;
				.axis-title {
					font-size: 30px;
					font-weight: 600;
				}
			}
			.btn-wrap-com {
				.admin-button-com {
					width: 120px;
					margin-left: 20px;
					&:first-child {
						margin-left: 0;
					}
				}
			}
		}
		// 首个圆点
		/deep/.axis-first {
			.axis-slot-wrap {
				top: -4px !important;
			}
			.node-big {
				position: absolute;
				top: 0;
				left: -20px;
				transform-origin: 0;
				transform: translateX(-50%);
				width: 32px !important;
				height: 32px !important;
				border-radius: 50%;
				background: #fdc3b8;
			}
			.node-small {
				position: absolute;
				top: 8px;
				left: 16px;
				transform-origin: 0;
				transform: translateX(-50%);
				background: #f51608;
				width: 16px !important;
				height: 16px !important;
				border-radius: 50%;
			}
		}
	}
</style>
