<template>
	<view class="card user-info-card interactive">
		<view class="flex-row-g20">
			<view class="user-avatar">
				<image src="https://img1.baidu.com/it/u=2462918877,1866131262&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500" mode="aspectFill" alt="用户头像" />
			</view>
			<view class="user-details flex-col-g8">
				<view class="flex-row-g20">
					<view class="title">{{ currentCardNo }}</view>
				</view>
				<view class="caption">到期时间：{{ deviceInfo.expireDate }}</view>
			</view>
			<view class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
				{{ onlineStatus }}
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		currentCardNo: { type: String, default: '' },
		deviceInfo: { type: Object, default: () => ({}) },
		onlineStatus: { type: String, default: '离线' }
	});
</script>

<style scoped lang="scss">
	.user-info-card {
		color: var(--text-primary);
		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: var(--radius-medium);
			overflow: hidden;
			border: 2rpx solid var(--border-light);
			image { width: 100%; height: 100%; object-fit: cover; }
		}
		.user-details { flex: 1; }
	}
</style>
