<template>
	<div class="sel-pending-order-module">
		<!-- 列表 -->
		<time-axis>
			<!-- 发货 -->
			<timeaxis-item class="axis-list axis-first confirm-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">{{ orderComData[0].actionName }}</div>
						<div class="axis-det">
							<div>配送方：{{ orderComData[0].sendInfo.sendSideName }}</div>
                            <div>距离：{{ orderComData[0].sendInfo.sendDistance }}km</div>
                            <div>运费：¥{{ orderComData[0].sendInfo.sendCost }}</div>
                            <div>
                                <span>小费：¥{{ orderComData[0].sendInfo.sendTip }}</span>
                                <i class="iconfont iconbianjijiage1 modify-btn"></i>
                            </div>
                            <div>
								<span>状态：</span>
								<span class="app-price">{{ orderComData[0].sendInfo.sendStatus | constantfilter('SEND_STATUS') }}</span>
							</div>
                            <div>期待送花时间：{{ orderComData[2].addTime | formatTime }}</div>
                            <div class="admin-button-com default">取消</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">打单</div>
						<div class="axis-det">
							<div>2019-10-10 18:00:00</div>
                            <card-name />
                            <div class="btn-wrap-com">
                                <button class="admin-button-com default">修改</button>
                                <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">下单</div>
						<div class="axis-det">
							<div>2019-10-10 18:00:00</div>
						</div>
					</div>
				</template>
			</timeaxis-item>
		</time-axis>
	</div>
</template>

<script>
import TimeAxis from '@/admin/home/components/plugin/time-axis'
import TimeaxisItem from '@/admin/home/components/plugin/timeaxis-item'
import CardName from './card-name'
export default {
	name: 'sel-pending-order-module',
	components: {
		TimeAxis,
		TimeaxisItem,
		CardName
	},
	props: {
		query: {
			type: Object,
			default: () => {}
		},
		orderData: {
			type: Object,
			default: () => {}
		},
		orderComData: {
			type: Array,
			default: () => []
		}
	}
}
</script>

<style lang="scss" scoped>
    // 发货
    .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;
            }
            .modify-btn {
                color: $mainColor;
                font-size: 24px;
                margin-left: 30px;
            }
		}
    }
	// 打单
	.com-wrap {
		.axis-det {
			margin-top: 14px;
            & > div {
                margin-top: 20px;
                &:first-child {
                    margin-top: 0;
                }
            }
		}
	}
</style>
