<template>
  <div class="main-box">
    <ClauseLabel ref="labelRef" :readonly="false" :detail-api="getAnnoLabelDetail" />
    <FooterToolBar class="mt10" @refresh-anno="refreshAnno" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getAnnoLabelDetail } from "@/api/modules/annotation/labeling";
import { usePageLeave } from "@/hooks/usePageLeave";
import ClauseLabel from "@/components/ClauseLabel/index.vue";
import FooterToolBar from "./components/FooterToolBar.vue";

// hooks
usePageLeave("AnnoLabeling");

const labelRef = ref<typeof ClauseLabel>();

// 刷新标注数据
function refreshAnno() {
  labelRef.value?.refreshAll();
}
</script>
<style lang="scss" scoped>
.main-box {
  height: 100%;
  .clause-label {
    flex: 1;
    height: 0;
  }
}
</style>
