<template>
	<view class="card user-info-card interactive">
		<view class="flex-row-g20">
			<view class="user-details flex-col-g8">
				<view class="flex-row-g20">
					<view class="title">{{ currentCardNo || '-' }}</view>
				</view>
				<view class="iccid-row caption">
					<text>ICCID: {{ deviceInfo.iccid || '-' }}</text>
					<button
						v-if="deviceInfo.iccid && deviceInfo.iccid !== '-'"
						class="copy-btn"
						@tap.stop="$emit('copy', deviceInfo.iccid)"
					>
						复制
					</button>
				</view>
				<view class="caption">套餐名称：{{ deviceInfo.packageName || '-' }}</view>
				<view class="caption">套餐到期时间：{{ deviceInfo.expireDate || '-' }}</view>
			</view>
			<view v-if="isDevice" class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
				{{ onlineStatus }}
			</view>
			<view v-else class="tag-apple" :class="networkStatus == 1 ? 'tag-success' : 'tag-warning'">
				{{ networkStatus == 1 ? '正常' : '停机' }}
			</view>
		</view>
	</view>
</template>

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

	defineEmits(['copy']);
</script>

<style scoped lang="scss">
	.user-info-card {
		color: var(--text-primary);

		.user-details {
			flex: 1;
		}

		.iccid-row {
			display: flex;
			align-items: center;
			gap: 12rpx;
			flex-wrap: wrap;
		}

		.copy-btn {
			margin: 0;
			padding: 0 12rpx;
			min-height: 36rpx;
			line-height: 36rpx;
			border: none;
			border-radius: 6rpx;
			background: rgba(10, 132, 255, 0.12);
			color: var(--primary);
			font-size: 22rpx;
			font-weight: 600;
		}

		.copy-btn::after {
			border: none;
		}
	}
</style>
