<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav :navTitle="route.query.zt==0?'报备':'报备信息'" />
    <div class="nav_tab">
        <span @click="active='a'" :class="active==='a'?'tab active':'tab'">正常报备</span>
        <span @click="active='b'" :class="active==='b'?'tab active':'tab'">特殊勤务报备</span>
    </div>
    <normalReport v-if="active==='a'" />
    <specialReport v-else/>
  </div>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import normalReport from "./components/normalReport";
import specialReport from "./components/specialReport";
import { computed, ref, reactive, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from "vant";

const router = useRouter();
const route = useRoute();

const active = ref('a')

</script>

<style lang="scss" scoped>
.container {
  margin-top: 2vw;
}
.nav_tab{
    padding: 2vw;
    display: flex;
    justify-content: space-around;
    .tab{
        background: #a4aec8;
        color: #fff;
        height: 32px;
        line-height: 32px;
        width: 40vw;
        text-align: center;
        border-radius: 16px 16px 16px 0;
    }
    .tab.active{
        background: #517cea;
    }
}
</style>
