<template>
    <Teleport to="body">
        <div v-if="visible" class="fixed inset-0 bg-black/50 flex items-center justify-center" style="z-index: 9999">
            <div class="bg-white rounded-xl shadow-2xl w-full max-w-md p-6 mx-4">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">设置经纪信息</h3>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">经纪人</label>
                        <input type="text" placeholder="请输入经纪人名字" :value="config.agentName"
                            @input="onChange('agentName', $event.target.value)"
                            class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">公会</label>
                        <input type="text" placeholder="请输入公会名字" :value="config.guildName"
                            @input="onChange('guildName', $event.target.value)"
                            class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">联系工具</label>
                        <input type="text" placeholder="例如：微信 / Telegram" :value="config.contactTool"
                            @input="onChange('contactTool', $event.target.value)"
                            class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">联系方式</label>
                        <input type="text" placeholder="请输入联系方式" :value="config.contact"
                            @input="onChange('contact', $event.target.value)"
                            class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 focus:border-blue-500 focus:outline-none" />
                    </div>
                </div>

                <div class="flex justify-end gap-3 mt-6">
                    <button @click="onClose" class="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
                        取消
                    </button>
                    <button @click="onSave" class="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script setup>
import { watch } from 'vue'

const props = defineProps({
    visible: {
        type: Boolean,
        required: true
    },
    config: {
        type: Object,
        required: true
    }
})

const emit = defineEmits(['close', 'save', 'change'])

const onClose = () => emit('close')
const onSave = () => emit('save')
const onChange = (key, value) => emit('change', key, value)

// 锁定 Body 滚动
watch(() => props.visible, (newVal) => {
    if (newVal) {
        document.body.style.overflow = 'hidden'
    } else {
        document.body.style.overflow = ''
    }
})
</script>
