<template>
  <div class="main-box">
    <ClauseLabel :detail-api="getAnnoHomeDetail" @load-detail="loadDetail" />
    <AuditToolBar :detail="detail" class="mt10" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { DataAnno } from "@/api/interface/index";
import { usePageLeave } from "@/hooks/usePageLeave";
import ClauseLabel from "@/components/ClauseLabel/index.vue";
import { getAnnoHomeDetail } from "@/api/modules/annotation/home";
import AuditToolBar from "./components/AuditToolBar.vue";

// hooks
usePageLeave("AnnoAudit");

const detail = ref({} as DataAnno.Detail);
function loadDetail(data: DataAnno.Detail) {
  detail.value = data;
}
</script>
<style lang="scss" scoped>
.main-box {
  flex-direction: column;
  .clause-label {
    height: calc(100% - 82px);
  }
}
</style>
