<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="150px"
          size="default"
          class="form-container mt20"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="船舶识别号"><div>CS20250719</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="中文船名"><div>{{ formData.chineseName }}</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="英文船名"><div>YUE SAN SH HUO</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="初次登记号"><div>YUE SAN SH HUO</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船舶种类"><div>无</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船籍港"><div>广州</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船舶所有人"><div>无</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船舶所有人联系方式"><div>15817883344</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="船舶状态"><div>已注销</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注销内容"><div>所有权 国籍</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="英文注销内容"><div>OWNERSHIP NATION</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="不注销内容"><div>-</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注销原因"><div>交易至国内</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注销原因详情内容"><div>郭患平卖船给徐铭</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注销原因详情内容"><div>船东申报船舶的值为人民币580万</div></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="受理人"><div>李玉成</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="初审人"><div>李玉成</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="复审人"><div>李玉成</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批人"><div>李玉成</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="受理日期"><div>2025-08-14</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="初审日期"><div>2025-08-14</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="复审日期"><div>2025-08-14</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作人员"><div>李雪花</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作时间"><div>2025.10.1</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证书编号"><div>2424132</div></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证书号码"><div>2049395385</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>