<template>
	<a-modal
		v-model:visible="visible"
		title="设备属性设置"
		:width="500"
		:footer="null"
		@cancel="handleClose"
	>
		<a-form layout="vertical">
			<a-form-item label="设备ID">
				<a-input :value="device.id" disabled />
			</a-form-item>

			<a-form-item label="设备名称">
				<a-input :value="device.name" @change="handleUpdate('name', $event.target.value)" />
			</a-form-item>

			<a-form-item label="设备类型">
				<a-input :value="device.type" disabled />
			</a-form-item>

			<a-form-item label="X坐标">
				<a-input-number
					:value="device.x"
					:min="0"
					style="width: 100%"
					@change="handleUpdate('x', $event)"
				/>
			</a-form-item>

			<a-form-item label="Y坐标">
				<a-input-number
					:value="device.y"
					:min="0"
					style="width: 100%"
					@change="handleUpdate('y', $event)"
				/>
			</a-form-item>

			<a-form-item label="旋转角度 (度)">
				<a-input-number
					:value="device.angle || 0"
					:min="0"
					:max="360"
					:step="1"
					style="width: 100%"
					@change="handleUpdate('angle', $event)"
				/>
				<div class="form-hint">0-360度，0度为正东方向，顺时针旋转</div>
			</a-form-item>

			<a-form-item label="设备大小 (像素)">
				<a-input-number
					:value="device.size || 50"
					:min="10"
					:step="1"
					style="width: 100%"
					@change="handleUpdate('size', $event)"
				/>
				<div class="form-hint">最小10px，无上限</div>
			</a-form-item>

			<a-form-item>
				<a-button type="primary" danger block @click="handleDelete">
					删除设备
				</a-button>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup>
	import { ref, watch } from 'vue'
	import { Modal } from 'ant-design-vue'

	const props = defineProps({
		device: {
			type: Object,
			required: true
		}
	})

	const emit = defineEmits(['close', 'update', 'delete'])

	const visible = ref(true)

	watch(
		() => props.device,
		() => {
			visible.value = true
		}
	)

	const handleClose = () => {
		visible.value = false
		emit('close')
	}

	const handleUpdate = (property, value) => {
		emit('update', props.device.id, property, value)
	}

	const handleDelete = () => {
		Modal.confirm({
			title: '确定要删除这个设备吗？',
			content: `设备名称: ${props.device.name}`,
			okText: '确定',
			okType: 'danger',
			cancelText: '取消',
			onOk() {
				emit('delete', props.device.id)
				handleClose()
			}
		})
	}
</script>

<style scoped lang="less">
	.form-hint {
		font-size: 12px;
		color: #8b95a5;
		margin-top: 5px;
	}
</style>
