<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" v-if="data!=''">

				<!-- 花材信息 -->
				<div class="card-wrap">
					<div class="card-tit">花材信息</div>
					<div class="card-body">
						<el-table :data="data[0].product" show-summary>
							<el-table-column label="花材图片">
								<template slot-scope="scope">
									<cl-avatar
										shape="square"
										:size="30"
										:src="scope.row.cover"
									></cl-avatar>
								</template>
							</el-table-column>
							<el-table-column property="name" label="花材名称"></el-table-column>
							<el-table-column property="property" label="属性"></el-table-column>
							<el-table-column property="num" 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 property="customName" label="名称"></el-table-column>
							<el-table-column property="customMobile" label="手机号"></el-table-column>
							<el-table-column property="fullAddress" label="地址" width="280px"></el-table-column>
							<el-table-column property="showAddress" label="备用地址" width="280px"></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="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="debt" label="欠款">
								<template slot-scope="scope">
									<span v-if="scope.row.debt == 1">是</span><span v-else></span>
								</template>
							</el-table-column>
							<el-table-column property="status" label="状态">
								<template slot-scope="scope">
									<span>{{ scope.row.status | constantfilter('ORDER_STATUS') }}</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() {
			this.$service.order.info({ id: this.orderOperate.id }).then(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 {
	margin: 20px;
	.card-tit {
		font-size: 16px;
		margin-bottom: 8px;
	}
	.card-body {
		border: 1px solid $borderColor;
	}
}
</style>