<template>
  <div class="ship-info-drawer">
    <el-drawer
      v-model="visible"
      title="新增船舶信息"
      :with-header="true"
      :close-on-click-modal="false"
      size="70%"
    >
      <div class="business-desc">
        <h4 class="text-danger">业务说明：</h4>
        <ul class="ml-4 mt-2 text-sm text-gray-700 space-y-1">
          <li>1、通过选择船舶信息查询到船舶信息的，可点击“添加”按钮将该船舶信息带入到涉事主体基本信息中。</li>
          <li>2、通过选择船舶信息未查询到船舶信息的，可点击“新增船舶”按钮维护涉事主体基本信息即可。</li>
        </ul>
      </div>

      <el-form
        ref="searchFormRef"
        :model="searchForm"
        label-width="120px"
        size="small"
        class="mt-4 search-form"
      >
        <el-row :gutter="20">
          <!-- 第一行：船名、船舶识别号、船舶登记号 -->
          <el-col :span="8">
            <el-form-item label="船名：">
              <el-input
                v-model="searchForm.shipName"
                placeholder="请填写船名"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="船舶识别号：">
              <el-input
                v-model="searchForm.shipId"
                placeholder="请填船舶识别号"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="船舶登记号：">
              <el-input
                v-model="searchForm.registrationNo"
                placeholder="请填船舶登记号"
                maxlength="20"
              />
            </el-form-item>
          </el-col>

          <!-- 第二行：初次登记号、船检登记号、IMO -->
          <el-col :span="8">
            <el-form-item label="初次登记号：">
              <el-input
                v-model="searchForm.firstRegNo"
                placeholder="请填初次登记号"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="船检登记号：">
              <el-input
                v-model="searchForm.surveyRegNo"
                placeholder="请填船检登记号"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="IMO：">
              <el-input
                v-model="searchForm.imo"
                placeholder="请填IMO"
                maxlength="10"
              />
            </el-form-item>
          </el-col>

          <!-- 第三行：牌薄号 + 查询/重置按钮 -->
          <el-col :span="8">
            <el-form-item label="牌薄号：">
              <el-input
                v-model="searchForm.licenseNo"
                placeholder="请填写牌薄号"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="demo-drawer__footer">
          <el-button type="primary" class="search-btn" @click="emit('selectShip', searchForm)">
            新增
          </el-button>
          <el-button type="default" @click="handleReset">
            重置
          </el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits } from 'vue';
import type { FormInstance } from 'element-plus';

const props = defineProps<{
  visible: boolean;
}>();

// 向父组件发送事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
  (e: 'selectShip', shipData: any): void; // 选择船舶时通知父组件（预留）
}>();

// 抽屉显示状态（双向绑定）
const visible = ref(props.visible);

// 查询表单数据
const searchForm = reactive({
  shipName: '',
  shipId: '',
  registrationNo: '',
  firstRegNo: '',
  surveyRegNo: '',
  imo: '',
  licenseNo: ''
});

// 表单实例
const searchFormRef = ref<FormInstance>();

// 重置按钮事件
const handleReset = () => {
  if (searchFormRef.value) {
    searchFormRef.value.resetFields(); // 重置表单
  }
};

// 监听抽屉显示状态变化，通知父组件
watch(
  () => visible.value,
  (newVal) => {
    emit('update:visible', newVal);
  }
);

// 监听父组件传入的visible变化（同步抽屉状态）
watch(
  () => props.visible,
  (newVal) => {
    visible.value = newVal;
  }
);
</script>

<style scoped lang="scss">
.ship-info-drawer {
  :deep(.el-drawer__header) {
    background-color: #163a8a !important; 
    margin: 0 !important;
    padding: 20px !important;
    color: white !important;
  }
}

.business-desc {
  padding-bottom: 15px;
  border-bottom: 1px dashed #e0e0e0;

  h4 {
    font-weight: 500;
    margin-bottom: 5px;
  }
}

.search-form {
  .el-form-item {
    margin-bottom: 15px;
  }
}

.demo-drawer__footer {
  display: flex;        /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  gap: 12px;            /* 按钮间距（可选，根据需要调整） */
  margin-top: 20px;     /* 与上方表单的间距（可选） */
}

</style>