<template>
    <div>
        <el-drawer 
            model-value="drawer" 
            :with-header="false" 
            direction="ttb" 
            custom-class="top-center-drawer"
            size="auto">
            <div class="drawer-content">
                <el-form 
                ref="userForm"
                :model="addUavInfoForm"
                :rules="rules"
                label-width="100px"
                label-position="left">
                
                <!-- 姓名 -->
                <el-form-item label="无人机编号" prop="name">
                    <el-input 
                    v-model="addUavInfoForm.UavNum" 
                    placeholder="请输入无人机编号"
                    clearable>
                    </el-input>
                </el-form-item>
                
              
                <el-form-item label="无人机记录时间" prop="employeeId">
                    <el-input 
                    :value="dayjs().format('YYYY-MM-DD HH:mm:ss') "
                    disabled>
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机状态" prop="employeeId">
                    <el-input 
                    value="正常" 
                    placeholder="请输入无人机编号"
                    disabled>
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机载弹量" prop="employeeId">
                    <el-input 
                    v-model="addUavInfoForm.uavBullet" 
                    placeholder="请输入无人机载弹量"
                    clearable
                    >
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机上次保养时间" prop="employeeId">
                    <el-input 
                    :value="dayjs().format('YYYY-MM-DD HH:mm:ss') "
                    disabled>
                    </el-input>
                </el-form-item>

                <el-form-item label="无人机上次加水时间" prop="employeeId">name">
                    <el-input 
                    :value="dayjs().format('YYYY-MM-DD HH:mm:ss') "
                    disabled>
                    </el-input>
                </el-form-item>
                <el-form-item label="无人机当前电量" prop="employeeId">name">
                    <el-input 
                    v-model="addUavInfoForm.UavCurBattery" 
                    placeholder="请输入无人机当前电量"
                    clearable>
                    </el-input>
                </el-form-item>

                
               
                
                <!-- 操作按钮（关键修改部分） -->
                <el-form-item class="action-buttons">
                    <el-button 
                    type="primary" 
                    @click="submitForm"
                    style="flex: 1;">
                    确认添加
                    </el-button>
                    <el-button 
                    @click="drawer = false"
                    style="flex: 1; margin-left: 10px;">
                    取消
                    </el-button>
                </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import { dayjs } from 'element-plus'
const props = defineProps({
    drawer: {
        type: Boolean,
        default: false
    },
    addUavInfoForm: {
        type: Object,
        default: () => ({})
    }
})





</script>

<style  scoped>
/* 表单全局样式 */
.top-center-drawer .el-form-item {
  display: flex;
  margin-bottom: 18px;
}

.top-center-drawer .el-form-item__label {
  padding: 0 102px 0 0;
  text-align: right;
  flex: 0 0 100px;
}

.top-center-drawer .el-form-item__content {
  flex: 1;
  min-width: 0;
}

/* 操作按钮专用样式 */
.action-buttons .el-form-item__content {
  display: flex;
  justify-content: space-between;
}

.action-buttons .el-button {
  margin: 0 !important;
  flex: 1;
}

.action-buttons .el-button + .el-button {
  margin-left: 10px !important;
}

/* 抽屉整体样式 */
.top-center-drawer {
  left: 50%;
  transform: translateX(-50%);
  width: auto !important;
  max-width: 600px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

.drawer-content {
  min-width: 40px;
}
</style>