<template>
	<view class="wifi-card">
		<view class="card-header">
			<text class="text-heading">WiFi配置</text>
			<button class="btn btn-mini btn-primary" @tap="$emit('modify')">修改</button>
		</view>
		<view class="wifi-list">
			<view class="wifi-item">
				<view class="wifi-icon-wrap">
					<text class="wifi-icon-text">📶</text>
				</view>
				<view class="wifi-content">
					<text class="wifi-label">网络名称</text>
					<text class="wifi-value">{{ deviceInfo.ssidName }}</text>
				</view>
				<button class="btn-copy" @tap="$emit('copy', deviceInfo.ssidName)">复制</button>
			</view>
			<view class="wifi-item">
				<view class="wifi-icon-wrap">
					<text class="wifi-icon-text">🔑</text>
				</view>
				<view class="wifi-content">
					<text class="wifi-label">连接密码</text>
					<text class="wifi-value">{{ deviceInfo.ssidPwd }}</text>
				</view>
				<button class="btn-copy" @tap="$emit('copy', deviceInfo.ssidPwd)">复制</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		deviceInfo: { type: Object, default: () => ({}) }
	});

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

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

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: var(--space-4);
		border-bottom: 1rpx solid var(--gray-100);
		margin-bottom: var(--space-4);
	}

	.wifi-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.wifi-item {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-4);
		background: var(--gray-50);
		border-radius: var(--radius-md);
	}

	.wifi-icon-wrap {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--bg-surface);
		border-radius: var(--radius-sm);
		flex-shrink: 0;
	}

	.wifi-icon-text {
		font-size: 32rpx;
	}

	.wifi-content {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2rpx;
	}

	.wifi-label {
		font-size: 22rpx;
		color: var(--text-tertiary);
	}

	.wifi-value {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--text-primary);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.btn-copy {
		padding: var(--space-2) var(--space-4);
		background: var(--bg-surface);
		color: var(--primary);
		font-size: 24rpx;
		font-weight: 600;
		border: none;
		border-radius: var(--radius-full);
		line-height: 1.5;
		flex-shrink: 0;

		&::after {
			border: none;
		}
	}
</style>