<template>
	<view class="card wifi-card">
		<view class="card-header flex-row-sb">
			<view class="title">WiFi配置</view>
			<view class="btn-group">
				<button class="btn-apple btn-primary btn-mini" @tap="$emit('modify')">修改</button>
			</view>
		</view>
		<view class="wifi-info flex-col-g16 mt-30">
			<view class="wifi-item flex-row-sb">
				<view class="wifi-details flex-col-g8">
					<view class="caption">网络名称</view>
					<view class="subtitle">{{ deviceInfo.ssidName }}</view>
				</view>
				<button class="btn-apple btn-primary btn-mini" @tap="$emit('copy', deviceInfo.ssidName)">复制</button>
			</view>
			<view class="wifi-item flex-row-sb">
				<view class="wifi-details flex-col-g8">
					<view class="caption">连接密码</view>
					<view class="subtitle">{{ deviceInfo.ssidPwd }}</view>
				</view>
				<button class="btn-apple btn-primary btn-mini" @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 {
		.wifi-item {
			padding: var(--space-md);
			background: var(--gray-100);
			border-radius: var(--radius-medium);
			margin-bottom: var(--space-sm);
			&:last-child { margin-bottom: 0; }
			.wifi-details { flex: 1; }
		}
	}
	
	.btn-group{
		padding-right: var(--space-md);
	}
</style>
