<template>
    <div class="page-container">
        <div class="title">设备连接登录</div>
        <div class="secondaryTitle">请输入IP和端口连接后进入上位机页面</div>
        <div class="form">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="" prop="ip">
                    <el-input v-model="ruleForm.ip" style="width: 240px" placeholder="请输入IP" >
                        <template #append>
                            <el-button @click="testConnect">➡</el-button>
                        </template>
                    </el-input>
                    <!-- <el-button @click="testConnect">➡</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentMapName } from '@/api/agv.js'
import { useRobotStore } from '@/stores/robot'

const router = useRouter()

const robotStore = useRobotStore()

const ruleFormRef = ref()
const ruleForm = ref({
    ip: '',
    port: 80
})

const rules = ref({
    ip: [
        { required: true, message: '请输入机器人IP和端口', trigger: 'blur' }
    ],
})

const testConnect = async () => {
    const valid = await ruleFormRef.value.validate();
    if (valid) {
        const result = await getCurrentMapName({
            ip: robotStore.ip,
            deviceId: VITE_DEVICE_ID,
        })
        if (result.code === 200) {
            router.push({
                path: '/home',
                query: {
                    mapName: result.data.current_map
                }
            })
        }
    }
}

</script>
<style lang="scss" scoped>
.page-container {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    .title {
        font-size: 40px;
        font-weight: bold;
        color: #000;
    }

    .secondaryTitle {
        font-size: 14px;
        color: #8f8f8f;
    }
}
</style>