<template>
	<div class="order-detail">
		<!-- 抽屉 -->
		<el-drawer
			:visible.sync="showOrderDetail"
			size="1000px"
			:before-close="closeFn"
			custom-class="order-draw-wrap"
		>
			<template slot="title">
				<div class="title-status-wrap">
					<div class="title-text">订单详情</div>
					<div class="title-status" :class="{ success: orderOperate.status == 5 }">
						<span>当前订单状态：</span>
						<span>{{ orderOperate.status | constantfilter('ORDER_STATUS') }}</span>
					</div>
				</div>
			</template>
			<div class="order-manage-wrap">
				<!-- 信息 -->
				<div class="card-wrap">
					<div class="card-tit">基本信息</div>
					<div class="card-body">
						<el-table :data="data">
							<el-table-column
								property="orderSn"
								label="订单编号"
								width="280px"
							></el-table-column>
							<el-table-column property="sendCost" label="运费"></el-table-column>
							<el-table-column property="prePrice" label="原价"></el-table-column>
							<el-table-column property="actPrice" label="实付款"></el-table-column>
							<el-table-column
								property="sourceType"
								label="订单来源"
							></el-table-column>
							<el-table-column
								property="totalRecharge"
								label="订单类型"
							></el-table-column>
						</el-table>
						<el-table :data="data">
							<el-table-column
								property="sendType"
								label="配送方式"
								width="280px"
							></el-table-column>
							<el-table-column property="payWay" label="支付方式"></el-table-column>
							<el-table-column property="grade" label="获得成长值"></el-table-column>
							<el-table-column property="bookName" label="下单客户"></el-table-column>
							<el-table-column label="客户打分">
								<template slot-scope="scope"
									><el-rate v-model="scope.row.totalFlow" disabled> </el-rate>
								</template>
							</el-table-column>
							<el-table-column property="evaluate" label="客户评价"></el-table-column>
						</el-table>
					</div>
				</div>
				<!-- 收花人信息 -->
				<div class="card-wrap">
					<div class="card-tit">收花人信息</div>
					<div class="card-body">
						<el-table :data="data">
							<el-table-column
								property="receiveUserName"
								label="昵称"
							></el-table-column>
							<el-table-column
								property="receiveMobile"
								label="手机号"
							></el-table-column>
							<el-table-column property="deadline" label="收花时间">
								<template slot-scope="scope">
									<span>{{ scope.row.deadline | formatTime }}</span>
								</template>
							</el-table-column>
							<el-table-column
								property="receiveFullAddress"
								label="地址"
								width="280px"
							></el-table-column>
							<el-table-column
								property="print"
								label="操作"
								width="110px"
							>
							<el-button type="primary" icon="el-icon-printer"></el-button>
							</el-table-column>


						</el-table>
					</div>
				</div>
				<!-- 订花人信息 -->
				<div class="card-wrap">
					<div class="card-tit">订花人信息</div>
					<div class="card-body">
						<el-table :data="data">
							<el-table-column property="bookName" label="昵称"></el-table-column>
							<el-table-column property="bookMobile" label="手机号"></el-table-column>
							<el-table-column
								property="reachDate"
								label="期望送到时间"
							></el-table-column>
							<el-table-column property="cardInfo" label="祝福语"></el-table-column>
						</el-table>
					</div>
				</div>
				<!-- 商品信息 -->
				<div class="card-wrap">
					<div class="card-tit">商品信息</div>
					<div class="card-body">
						<el-table :data="data.goodsInfoList" show-summary>
							<el-table-column label="商品图片">
								<template slot-scope="scope">
									<cl-avatar
										shape="square"
										:size="40"
										:src="scope.row.smallCoverUrl | default_avatar"
										:style="{ margin: 'auto' }"
									></cl-avatar>
								</template>
							</el-table-column>
							<el-table-column property="title" label="商品名称"></el-table-column>
							<el-table-column property="goodsId" label="ID"></el-table-column>
							<el-table-column
								property="goodsStyleName"
								label="属性"
							></el-table-column>
							<el-table-column property="num" label="数量"></el-table-column>
							<!-- <el-table-column property="unitPrice" label="库存"></el-table-column> -->
							<el-table-column property="unitPrice" label="小计"></el-table-column>
						</el-table>
					</div>
				</div>
				<!-- 费用信息 -->
				<div class="card-wrap">
					<div class="card-tit">费用信息</div>
					<div class="card-body">
						<el-table :data="data">
							<el-table-column label="商品合计">
								<template slot-scope="scope">
									<span class="app-price">{{
										scope.row.prePrice - scope.row.sendCost
									}}</span>
								</template>
							</el-table-column>
							<el-table-column property="sendCost" label="运费"></el-table-column>
							<el-table-column property="prePrice" label="应付款"></el-table-column>
							<el-table-column
								property="discountAmount"
								label="随机优惠"
							></el-table-column>
						</el-table>
						<el-table :data="data">
							<el-table-column label="会员优惠">
								<template slot-scope="scope">
									<span>{{ scope.row.discountType == 1 ? '有' : '无' }}</span>
								</template></el-table-column
							>
							<el-table-column property="modPrice" label="手动改价"></el-table-column>
							<el-table-column property="balance" label="优惠券">
								<template slot-scope="scope">
									<span>{{ scope.row.discountType == 0 ? '有' : '无' }}</span>
								</template>
							</el-table-column>
							<el-table-column label="实付款">
								<template slot-scope="scope">
									<span class="app-price">{{ scope.row.actPrice }}</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
export default {
	name: 'order-detail',
	props: {
		orderOperate: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			showOrderDetail: false,
			data: []
		};
	},
	methods: {
		init() {
			console.log('蒋小姐额', this.orderOperate);
			this.$service.order.info({ id: this.orderOperate.id }).then(res => {
				console.log('江总', res);
				this.data = [res];
				this.showOrderDetail = true;
			});
		},
		closeFn() {
			this.showOrderDetail = false;
		}
	}
};
</script>

<style lang="scss">
.order-draw-wrap {
	.el-drawer__header {
		margin-bottom: 20px;
	}
	.el-table__header-wrapper {
		.el-table__header tr,
		.el-table__header th {
			background-color: #f7f7f7;
		}
	}
}
</style>
<style lang="scss" scoped>
.order-draw-wrap {
	.title-status-wrap {
		@include disFlex(center, flex-start);
		.title-text {
			margin-right: 200px;
		}
		.title-status {
			color: red;
			&.success {
				color: green;
			}
		}
	}
}
.order-manage-wrap {
	height: calc(100vh - 64px);
	overflow-y: auto;
	padding-bottom: 20px;
}
.card-wrap {
	// padding: 0 20px;
	margin: 20px;
	// border: 1px solid $borderColor;
	// border-bottom: 0;
	.card-tit {
		font-size: 16px;
		margin-bottom: 8px;
	}
	.card-body {
		border: 1px solid $borderColor;
	}
}
</style>
