<template>
  <div class="audit-toolbar">
    <div class="opration mr20">
      <el-button type="primary" @click="backAction" link>返回</el-button>
      <el-button class="ml30" type="primary" @click="returnAction" plain>退回</el-button>
      <el-button class="ml20" type="primary" @click="auditAction">通过</el-button>
    </div>
    <AuditReturnDialog ref="dialogRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
import { DataAnno } from "@/api/interface/index";
import { useHandleData } from "@/hooks/useHandleData";
import { auditProcess } from "@/api/modules/annotation/audit";
import { AnnoStatusEnum } from "@/enums";
import AuditReturnDialog from "./AuditReturnDialog.vue";

// props
interface Props {
  detail: DataAnno.Detail;
}
const props = withDefaults(defineProps<Props>(), {
  detail: () => ({}) as DataAnno.Detail
});

// hooks
const route = useRoute();
const router = useRouter();
const dialogRef = ref<typeof AuditReturnDialog | null>(null);

// 返回
function backAction() {
  router.back();
}

// 审核退回
function returnAction() {
  dialogRef.value?.open({ annotationName: props.detail.annotationName, articleIds: [Number(route.query.id)] }).then(() => {
    router.back();
  });
}

// 审核通过
async function auditAction() {
  await useHandleData(
    auditProcess,
    { articleIds: [Number(route.query.id)], auditStatus: AnnoStatusEnum.PASSED, refuseReason: "" },
    `是否确认当前条文标注结果合格！`
  );
  router.back();
}
</script>

<style lang="scss" scoped>
.audit-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  background: #ffffff;
  .opration {
    display: flex;
    align-items: center;
  }
}
</style>
