<template>
	<view class="light-setting-container">
		<view class="fields">
			<view v-for="(field, idx) in fields" :key="field.id" class="field-item">
				<view class="field-name">{{ field.name }}</view>
				<view class="status" :class="{on: field.isOn, off: !field.isOn}">
					{{ field.isOn ? '已开启' : '已关闭' }}
				</view>
				<button
					class="toggle-btn"
					:class="{on: field.isOn, off: !field.isOn}"
					@click="toggleLight(idx)"
				>
					{{ field.isOn ? '关灯' : '开灯' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fields: [
				{ id: 1, name: '场地1', isOn: false },
				{ id: 2, name: '场地2', isOn: false },
				{ id: 3, name: '场地3', isOn: false },
				{ id: 4, name: '场地4', isOn: false },
				{ id: 5, name: '场地5', isOn: false },
				{ id: 6, name: '场地6', isOn: false },
			],
		};
	},
	methods: {
		toggleLight(idx) {
			this.fields[idx].isOn = !this.fields[idx].isOn;
		},
	},
};
</script>

<style scoped>
.light-setting-container {
	padding: 32rpx 24rpx;
	background: #f7f9fc;
	min-height: 100vh;
}
.title {
	font-size: 40rpx;
	font-weight: bold;
	color: #365A9A;
	margin-bottom: 40rpx;
	text-align: center;
}
.fields {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}
.field-item {
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(54,90,154,0.08);
	padding: 32rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.field-name {
	font-size: 32rpx;
	color: #365A9A;
	font-weight: 500;
}
.status {
	font-size: 28rpx;
	margin: 0 24rpx;
	padding: 4rpx 20rpx;
	border-radius: 24rpx;
	background: #e3eaf6;
	color: #365A9A;
	transition: background 0.2s, color 0.2s;
}
.status.on {
	background: #365A9A;
	color: #fff;
}
.status.off {
	background: #e3eaf6;
	color: #365A9A;
}
.toggle-btn {
	min-width: 180rpx;
	font-size: 28rpx;
	border: none;
	border-radius: 24rpx;
	padding: 8rpx 0;
	color: #fff;
	background: #365A9A;
	transition: background 0.2s;
}
.toggle-btn.on {
	background: #e74c3c;
}
.toggle-btn.off {
	background: #365A9A;
}
</style>