<template>
  <div class="ship-info-form">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template #title="{ isActive }">
          <div class="collapse-title">
            安检基本信息
          </div>
        </template>
        <el-form
          ref="ruleFormRef"
          :model="formData"
          label-width="130px"
          size="default"
          class="form-container mt20"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="初查类型">
                <div>{{ formData.chineseName }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船长证书号">
                <div>413906534</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船长联系方式">
                <div>无</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检查岗">
                <div>珠海湾仔</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="检查日期">
                <div>2025-02-13</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检查员">
                <div>吴迪</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船舶是否滞留">
                <div>是</div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实习检查员">
                <div>无</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="是否专项检查">
                <div>无</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <div>无</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="检查行动">
                <div>无</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
  const activeNames = ref(['1']);
  const formData = reactive({
    chineseName: '测试'
  })
</script>

<style scoped>
.ship-info-form {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
:deep .el-collapse-item__header {
  color: #5070ae;
  size: 24px;
  background: linear-gradient(135deg, #d2e8ff, #fcfeff);
	box-shadow: 0 8px 20px #fcfeff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding-left: 20px;
}
</style>