<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-table class="mt20" :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="date" label="缺陷代码" width="180" />
          <el-table-column prop="name" label="缺陷描述" />
          <el-table-column prop="address" label="处理意见代码" width="220" />
          <el-table-column prop="address" label="处理意见说明" width="220" />
          <el-table-column prop="address" label="滞留缺陷是否与检查机构有关" width="220" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
  const activeNames = ref(['1']);
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
</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>