<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="MMSI">
                <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>5257</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>2021.10.21</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>广州市建工船务有限公司</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>