<template>
  <div class="container">
    <div class="title">任务需求信息录入</div>
    <el-divider />
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="任务信息" name="任务信息">
        <FormData :rescueId="rescueId" />
      </el-tab-pane>
      <el-tab-pane label="关联航次" name="关联航次" v-if="rescueId">
        <RelatedVoyage :rescueId="rescueId" />
      </el-tab-pane>
      <el-tab-pane label="附件信息" name="附件信息" v-if="rescueId">
        <FileList :rescueId="rescueId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FormData from "@/views/common/FormData.vue"
import RelatedVoyage from "@/views/common/RelatedVoyage.vue"
import FileList from "@/views/common/FileList.vue"
import {useRoute} from 'vue-router'

const route = useRoute();
const rescueId = route.params.id; // 获取路由参数
const activeName = ref('任务信息')
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  color: #242424;

  .title {
    font-weight: bold;
    color: #333;
  }

}

</style>
