<template>
  <a-modal
    :visible="visible"
    title="快捷配置"
    :mask-closable="false"
    :ok-loading="loading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form :model="form" layout="vertical">
      <a-form-item label="远程访问端口">
        <a-input-number
          v-model="form.remote_port"
          placeholder="请输入远程访问端口，为空则不可远程访问"
          :min="1"
          :max="65535"
          style="width: 100%"
          allow-clear
        />
        <template #extra>
          <span style="color: #86909c">为空则不可远程访问</span>
        </template>
      </a-form-item>

      <a-form-item label="Agent URL配置">
        <a-input
          v-model="form.agent_url"
          placeholder="请输入Agent URL"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Message } from '@arco-design/web-vue'

interface Props {
  visible: boolean
  record: any
}

const props = defineProps<Props>()
const emit = defineEmits(['update:visible', 'success'])

const loading = ref(false)

const form = ref({
  remote_port: undefined as number | undefined,
  agent_url: '',
})

watch(
  () => props.visible,
  (val) => {
    if (val && props.record) {
      form.value.remote_port = props.record.remote_port
      form.value.agent_url = props.record.agent_url || ''
    }
  }
)

const handleSubmit = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 500))
    
    // 更新记录
    props.record.remote_port = form.value.remote_port
    props.record.agent_url = form.value.agent_url
    props.record.remote_access = !!form.value.remote_port
    props.record.agent_config = !!form.value.agent_url
    
    Message.success('配置成功')
    emit('success')
    emit('update:visible', false)
  } catch (error) {
    Message.error('配置失败')
  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  emit('update:visible', false)
}
</script>
