<template>
	<div class="sel-confirm-module">
		<!-- 列表 -->
		<time-axis v-if="!$util.isEmpty(orderComData)">
			<!-- 完成 -->
			<timeaxis-item class="axis-list axis-first com-wrap" bgcolor="none">
				<template v-slot:node>
					<div class="tui-node node-big">
						<div class="node-small"></div>
					</div>
				</template>
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">完成</div>
						<div class="axis-det">
							<button class="admin-button-com big blue confirm-btn" @click="confirmFn">订单归类</button>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 送达 -->
			<timeaxis-item class="axis-list com-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[1].actionName }}</div>
						<div class="axis-det">
							<div class="app-color-0 app-bold">{{ orderComData[1].addTime | formatTime }}</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 发货 -->
			<timeaxis-item class="axis-list confirm-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[2].actionName }}</div>
						<div class="axis-det">
							<div class="app-color-0 app-bold">{{ orderComData[2].addTime | formatTime }}</div>
							<block v-if="!$util.isEmpty(orderComData[2].sendInfo)">
								<div>配送方：{{ orderComData[2].sendInfo.sendSideName }}</div>
								<div>距离：{{ orderComData[2].sendInfo.sendDistance }}km</div>
								<div>运费：¥{{ orderComData[2].sendInfo.sendCost }}</div>
								<div>小费：¥{{ orderComData[2].sendInfo.sendTip }}</div>
								<div>
									<span>状态：</span>
									<span class="app-color-4">{{ orderComData[2].sendInfo.sendStatus | constantfilter('SEND_STATUS') }}</span>
								</div>
							</block>
							<block v-else>
								<div>配送方：自己送</div>
							</block>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 打单 -->
			<timeaxis-item class="axis-list com-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[3].actionName }}</div>
						<div class="axis-det">
							<div class="app-bold">{{ orderComData[3].addTime | formatTime }}</div>
							<card-name :info="orderComData[3].receive" />
							<div class="btn-wrap-com">
								<!-- <button class="admin-button-com default">明细</button> -->
								<button class="admin-button-com default">重打</button>
							</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
			<!-- 下单 -->
			<timeaxis-item class="axis-list com-wrap" bgcolor="none">
				<template v-slot:content>
					<div class="axis-slot-wrap">
						<div class="axis-title">{{ orderComData[4].actionName }}</div>
						<div class="axis-det">
							<div class="app-color-0 app-bold">{{ orderComData[4].addTime | formatTime }}</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
		</time-axis>
		<!-- 选取分类 -->
		<modal-module :show="selModal" :maskClosable="false" @cancel="modalCancel" @click="selModalClick" title="订单归类" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="upload-confirm-wrap">
					<!-- 选择分类 -->
					<div class="sel-wrap">
						<div class="sel-tit">选择分类</div>
						<div class="sel-btn">
							<block v-for="(item, index) in categoryData" :key="index">
								<button class="admin-button-com" :class="[form.categoryId == item.id ? '' : 'default']" @click="selCategoryFn(item)">{{ item.categoryName || '暂无' }}</button>
							</block>
						</div>
					</div>
					<!-- 选择用途 -->
					<div class="sel-wrap">
						<div class="sel-tit">选择用途</div>
						<div class="sel-btn">
							<block v-for="(item, index) in usageData" :key="index">
								<button class="admin-button-com" :class="[form.usageId == item.id ? '' : 'default']" @click="selUsageFn(item)">{{ item.usageName || '暂无' }}</button>
							</block>
						</div>
					</div>
				</div>
			</template>
		</modal-module>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import TimeAxis from '@/admin/home/components/plugin/time-axis'
import TimeaxisItem from '@/admin/home/components/plugin/timeaxis-item'
import ModalModule from '@/components/plugin/modal'
import CardName from './card-name'
// api
import { getCategory, getUsage } from '@/utils/config'
import { orderClass } from '@/api/order'
export default {
	name: 'sel-confirm-module',
	components: {
		TimeAxis,
		TimeaxisItem,
		ModalModule,
		CardName
	},
	props: {
		query: {
			type: Object,
			default: () => {}
		},
		orderData: {
			type: Object,
			default: () => {}
		},
		orderComData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			selModal: false,
			form: {
				categoryId: '',
				usageId: ''
			}
		}
	},
	computed: {
		...mapGetters({ categoryData: 'getCategory' }),
		...mapGetters({ usageData: 'getUsage' })
	},
	mounted() {
		getCategory()
		getUsage()
	},
	methods: {
		confirmFn() {
			this.selModal = true
		},
		// modal
		// 操作
		selCategoryFn(item) {
			this.form.categoryId = item.id
		},
		selUsageFn(item) {
			this.form.usageId = item.id
		},
		selModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				orderClass({
					id: this.orderData.id,
					...this.form
				}).then(res => {
					this.$msg('订单归类成功！')
					setTimeout(() => {
						this.$util.pageTo({
							url: '/admin/order/ship',
							query: {
								id: this.query.id,
								pageStatus: 6
							}
						})
					}, 1000)
				})
			}
		},
		modalCancel() {
			this.selModal = false
		}
	}
}
</script>

<style lang="scss" scoped>
	// 完成
	.axis-first {
		.axis-det {
			margin-top: 40px !important;
		}
		.confirm-btn {
			width: 100%;
		}
	}
	// 发货
	.confirm-wrap {
		.axis-det {
			margin-top: 20px;
			margin-bottom: 10px;
			color: $fontColor2;
			& > div {
				margin-top: 14px;
				&:first-child {
					margin-top: 0;
				}
			}
			.admin-button-com {
				width: 120px;
				margin-top: 20px;
			}
		}
	}
	// 打单
	.com-wrap {
		.axis-det {
			margin-top: 14px;
			& > div {
				margin-top: 20px;
				&:first-child {
					margin-top: 0;
				}
			}
		}
	}
	// 弹窗
	.upload-confirm-wrap {
		max-height: 600px;
		overflow-y: auto;
		.modal-tit {
			@include disFlex(center, center);
			font-size: 40px;
			margin-top: 30px;
			margin-bottom: 50px;
			.iconfont {
				color: #09bb07;
				margin-right: 20px;
				font-size: 50px;
			}
		}
		//  分类
		.sel-wrap {
			color: $fontColor2;
			font-size: 32px;
			.sel-tit {
				text-align: left;
			}
			.sel-btn {
				@include disFlex(center, flex-start);
				flex-wrap: wrap;
				padding: 10px 0 40px;
				.admin-button-com {
					// width: 170px;
					margin-right: 20px;
					margin-top: 20px;
					padding-top: 16px;
					padding-bottom: 16px;
					border-radius: 4px;
					// &:nth-child(3n + 1) {
					// 	margin-left: 0;
					// }
				}
			}
		}
	}
</style>
