<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">{{ deviceInfo.carrier_name || '-' }}</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" v-if="isDevice">IMEI：{{ deviceInfo.imei || '-' }}</view>
					<view class="subtitle" v-else>手机号：{{ deviceInfo.bound_phone || '-' }}</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">{{ deviceInfo.signal_quality || '暂无数据' }}</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 v-if="shouldShowSignalReason(deviceInfo)" class="signal-reason">
			<text class="signal-reason-label">怀疑原因：</text>
			<text class="signal-reason-text">{{ deviceInfo.signal_bad_reason }}</text>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		deviceInfo: { type: Object, default: () => ({}) },
		isRealName: { type: Boolean, default: false },
		isDevice: { type: Boolean, default: true },
		opratorList: { type: Array, default: () => [] }
	});

	defineEmits(['authentication']);

	const shouldShowSignalReason = (deviceInfo) =>
		['信号较弱', '信号很差', '暂无数据'].includes(deviceInfo?.signal_quality) &&
		!!deviceInfo?.signal_bad_reason;
</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;
			}
		}

		.signal-reason {
			margin-top: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			font-size: 24rpx;
			line-height: 1.5;
			text-align: center;
			color: var(--text-secondary);
		}

		.signal-reason-label {
			color: var(--text-primary);
		}
	}
</style>
