<template>
	<view class="user-info-card">
		<view class="card-main">
			<view class="user-avatar">
				<image :src="avatarUrl" mode="aspectFill" alt="用户头像" />
			</view>
			<view class="user-details">
				<view class="user-id">
					<text class="device-id">{{ currentCardNo || '-' }}</text>
					<view class="status-badge" :class="isOnline ? 'status-online' : 'status-offline'">
						<text class="status-dot"></text>
						<text class="status-text">{{ isOnline ? '在线' : '离线' }}</text>
					</view>
				</view>
				<view class="user-meta">
					<text class="meta-text" v-if="isDevice">IMEI：{{ deviceInfo.imei || '-' }}</text>
					<text class="meta-text" v-else>手机号：{{ deviceInfo.bound_phone || '-' }}</text>
				</view>
			</view>
		</view>
		<view class="card-footer" v-if="!isDevice">
			<view class="network-badge" :class="networkStatus == 1 ? 'network-ok' : 'network-stop'">
				{{ networkStatus == 1 ? '正常' : '停机' }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { useUserStore } from '@/store/index.js';

	const props = defineProps({
		currentCardNo: { type: String, default: '' },
		deviceInfo: { type: Object, default: () => ({}) },
		onlineStatus: { type: String, default: '离线' },
		networkStatus: { type: [String, Number], default: '离线' },
		isDevice: { type: Boolean, default: true }
	});

	const userStore = useUserStore();

	const defaultAvatar = 'https://img1.baidu.com/it/u=2462918877,1866131262&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500';

	const avatarUrl = computed(() => {
		return userStore.state.userInfo.avatar || defaultAvatar;
	});

	const isOnline = computed(() => {
		return props.onlineStatus === '在线';
	});
</script>

<style scoped lang="scss">
	.user-info-card {
		background: var(--bg-surface);
		border-radius: var(--radius-xl);
		padding: var(--space-5);
		box-shadow: var(--shadow-md);
	}

	.card-main {
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.user-avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: var(--radius-lg);
		overflow: hidden;
		border: 4rpx solid var(--gray-100);
		flex-shrink: 0;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.user-details {
		flex: 1;
		min-width: 0;
	}

	.user-id {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.device-id {
		font-size: 32rpx;
		font-weight: 700;
		color: var(--text-primary);
		letter-spacing: -0.01em;
	}

	.status-badge {
		display: inline-flex;
		align-items: center;
		gap: 6rpx;
		padding: 4rpx 12rpx;
		border-radius: var(--radius-full);
		font-size: 20rpx;
		font-weight: 600;
	}

	.status-online {
		background: var(--success-light);
		color: var(--success);
	}

	.status-offline {
		background: var(--warning-light);
		color: var(--warning);
	}

	.status-dot {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: currentColor;
	}

	.status-text {
		line-height: 1;
	}

	.user-meta {
		margin-top: var(--space-2);
	}

	.meta-text {
		font-size: 24rpx;
		color: var(--text-tertiary);
	}

	.card-footer {
		margin-top: var(--space-4);
		padding-top: var(--space-4);
		border-top: 1rpx solid var(--gray-100);
	}

	.network-badge {
		display: inline-flex;
		align-items: center;
		padding: var(--space-2) var(--space-4);
		border-radius: var(--radius-full);
		font-size: 24rpx;
		font-weight: 600;
	}

	.network-ok {
		background: var(--success-light);
		color: var(--success);
	}

	.network-stop {
		background: var(--danger-light);
		color: var(--danger);
	}
</style>