<template>
	<view class="card device-status-card">
		<view class="card-header mb-md flex-row-sb">
			<view class="title">设备信息</view>
			<view class="tag-apple tag-success">{{ getOperator(deviceInfo.currentIccid) }}</view>
		</view>
		<view class="device-info flex-col-g16">
			<view class="info-row flex-row-sb">
				<view class="info-label">
					<view class="subtitle">当前卡: {{ deviceInfo.currentIccid }}</view>
				</view>
				<view class="info-values flex-row-g20" @tap="$emit('authentication')">
					<view class="tag-apple" :class="isRealName ? 'tag-success' : 'tag-warning'">
						{{ isRealName ? "已实名" : "未实名" }}
					</view>
				</view>
			</view>
			<view class="info-row flex-row-sb">
				<view class="info-label">
					<view class="subtitle">到期时间：{{ deviceInfo.expireDate }}</view>
				</view>
				<view class="info-values flex-row-g20">
					<view class="tag-apple tag-primary">{{ statusText }}</view>
				</view>
			</view>
		</view>
		<view class="device-metrics flex-row-sb mt-md">
			<view class="metric-item flex-col-center">
				<view class="caption mb-xs">信号强度</view>
				<view class="metric-value">{{ getSignalText(deviceInfo.rssi) }}</view>
			</view>
			<view class="metric-item flex-col-center">
				<view class="caption mb-xs">设备电量</view>
				<view class="metric-value">{{ deviceInfo.battery }} %</view>
			</view>
			<view class="metric-item flex-col-center">
				<view class="caption mb-xs">连接数量</view>
				<view class="metric-value">{{ deviceInfo.connCnt }}/{{ deviceInfo.max_clients }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';

	const props = defineProps({
		deviceInfo: { type: Object, default: () => ({}) },
		isRealName: { type: Boolean, default: false },
		opratorList: { type: Array, default: () => [] }
	});

	defineEmits(['authentication']);

	const getOperator = (iccid) => {
		return '中国电信';
	};

	const getSignalText = (rssi) => rssi || '强';

	const statusText = computed(() => {
		const statusMap = {
			1: '在库',
			2: '已分销',
			3: '已激活',
			4: '已停用'
		};
		return statusMap[props.deviceInfo.status] || '-';
	});
</script>

<style scoped lang="scss">
	.device-status-card {
		.info-row {
			padding: var(--space-sm) 0;
			border-bottom: 1rpx solid var(--gray-200);
			&:last-child { border-bottom: none; }
			.info-label { min-width: 200rpx; }
			.info-values { flex: 1; justify-content: flex-end; }
		}
		.device-metrics {
			background: var(--gray-100);
			border-radius: var(--radius-small);
			padding: 20rpx;
			.metric-item { flex: 1; }
		}
	}
</style>
