<template>
	<el-drawer
		title="我是标题"
		:visible.sync="showStatus"
		size="70%"
		:before-close="closeFn"
		:with-header="false"
	>
		<div class="head-wrap">
			<div class="head-left">
				<cl-avatar
					:size="60"
					:src="info.avatarUrl | default_avatar"
					:style="{ margin: 'auto' }"
				></cl-avatar>
				<div>{{ info.userName }}</div>
				<div v-if="info.userAsset">{{ info.userAsset.growth }}</div>
			</div>
			<div class="head-right">
				<div>
					<div class="info-label">用户ID</div>
					<div class="info-val">{{ info.id || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">手机号</div>
					<div class="info-val">{{ info.mobile || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">昵称</div>
					<div class="info-val">{{ info.userName || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">关注公众号</div>
					<div class="info-val">{{ info.subscribe || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">性别</div>
					<div class="info-val">{{ info.sex || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">最近访问</div>
					<div class="info-val">{{ info.visitTimeFormat || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">生日</div>
					<div class="info-val">{{ info.birthday || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">创建时间</div>
					<div class="info-val">{{ info.createTime || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">住址</div>
					<div class="info-val">{{ info.address || '暂无' }}</div>
				</div>
				<div>
					<div class="info-label">用户来源</div>
					<div class="info-val">{{ info.source || '暂无' }}</div>
				</div>
			</div>
		</div>
		<!-- assets -->
		<div class="card-wrap">
			<div class="card-tit">资产信息</div>
			<el-table :data="assetsData">
				<el-table-column property="totalExpend" label="消费金额"></el-table-column>
				<el-table-column property="totalBuyNum" label="消费次数"></el-table-column>
				<el-table-column property="balance" label="余额"></el-table-column>
				<el-table-column property="growth" label="成长值"></el-table-column>
				<el-table-column property="getCouponNum" label="领优惠券数"></el-table-column>
				<el-table-column property="totalRecharge" label="累计充值"></el-table-column>
				<el-table-column property="inviteNum" label="邀请新人数"></el-table-column>
				<el-table-column property="discount" label="享折扣"></el-table-column>
			</el-table>
		</div>
		<!-- order -->
		<div class="card-wrap">
			<div class="card-tit">订单记录</div>
			<el-table :data="orderData">
				<el-table-column property="id" label="ID"></el-table-column>
				<el-table-column property="createTime" label="提交时间"></el-table-column>
				<el-table-column property="orderName" label="订单名称"></el-table-column>
				<el-table-column property="actPrice" label="订单金额"></el-table-column>
				<el-table-column property="payWay" label="支付方式"></el-table-column>
				<el-table-column property="sendNum" label="编号"></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-column property="discount" label="操作">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="$router.push('/order/list')"
							>查看订单</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-drawer>
</template>

<script>
export default {
	name: 'detail-draw',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			showStatus: false,
			data: {},
			assetsData: [],
			orderData: []
		};
	},
	watch: {
		show(val) {
			this.showStatus = val;
			if (val) {
				this.init();
			}
		}
	},
	methods: {
		init() {
			this.$service.member.allDetail({ userId: this.info.id }).then(res => {
				this.data = res;
				this.assetsData = [res.userAsset];
				this.orderData = res.orderList;
			});
		},
		closeFn(done) {
			this.$emit('update:show', false);
			done();
		}
		// assets
	}
};
</script>

<style lang="scss" scoped>
.head-wrap {
	@include disFlex(center, flex-start);
	border-bottom: 1px solid $borderColor;
	padding: 0 10px;
	.head-left {
		width: 30%;
		text-align: center;
		& > div {
			margin-top: 20px;
		}
	}
	.head-right {
		width: calc(100% - 30%);
		@include disFlex(center, space-between);
		flex-wrap: wrap;
		border-left: 1px solid $borderColor;
		font-size: 14px;
		& > div {
			width: 49%;
			padding: 10px 0;
			@include disFlex(center, space-between);
			// border-top: 1px solid $borderColor;
			&:nth-child(even) {
				// border-left: 1px solid $borderColor;
			}
			.info-label {
				width: 100px;
				text-align: right;
				color: $fontColor3;
			}
			.info-val {
				width: calc(100% - 120px);
				margin-left: 20px;
				text-align: left;
			}
		}
	}
}
.card-wrap {
	// padding: 0 20px;
	margin: 20px;
	// border: 1px solid $borderColor;
	// border-bottom: 0;
	.card-tit {
		font-size: 16px;
		margin-bottom: 4px;
	}
}
</style>
