<template>
	<div class="card-name-module">
		<div class="member-avatar">
			<cl-avatar
				:size="60"
				:src="data.avatarUrl | default_avatar"
				:style="{ margin: 'auto' }"
			></cl-avatar>
		</div>
		<div class="source-wrap">
			<span class="member-name">{{ data.userName }}</span>
			<i v-if="data.source == 0" class="iconfont iconweixinlaiyuan"></i>
			<i v-if="data.source == 1" class="iconfont iconzhifubao"></i>
			<i
				class="iconfont iconweixingongzhonghao"
				:class="[data.subscribe ? 'app-color-4' : '']"
			></i>
			<i v-if="data.mobile" class="iconfont iconshoujihao1"></i>
		</div>
		<div class="label-wrap">
			<div class="label-list app-color-0">
				<span>最近到店：</span>
				<span>{{ data.visitTimeFormat }}</span>
			</div>
			<div class="label-list">
				<span>累计消费：</span>
				<span>￥{{ data.totalExpend || 0 }}</span>
			</div>
			<div class="label-list">
				<span>帐户余额：</span>
				<span>￥{{ data.balance || 0 }}</span>
			</div>
			<div class="label-list">
				<span>累计积分：</span>
				<span>{{ data.integral || 0 }}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'card-name',
	props: {
		data: {
			type: Object,
			default: () => {}
		}
	}
};
</script>

<style lang="scss" scoped>
.card-name-module {
	.source-wrap {
		@include disFlex(center, center);
		margin: 10px 0 16px;
		.member-name {
			font-size: 16px;
			text-align: center;
		}
		.iconfont {
			margin-left: 10px;
		}
		.iconweixinlaiyuan {
			color: #35b801;
		}
		.iconzhifubao {
			color: #00aaed;
		}
		.iconshoujihao1 {
			color: #fc2e47;
		}
	}

	.label-wrap {
		color: $fontColor2;
		.label-list {
			margin: 6px 0;
		}
	}
}
</style>
