<script setup lang="ts">
const { content = "" } = defineProps<{ content: string }>();

const emit = defineEmits<{ (e: "on-commit-result", v: boolean): void }>();

let show = $ref(true);

function onOk() {
  show = false;
  emit("on-commit-result", true);
  logger({ cnl: ["local"], pgn: "考生承诺书", dtl: "承诺同意" });
}
function onDecline() {
  show = false;
  emit("on-commit-result", false);
  logger({ cnl: ["server"], pgn: "考生承诺书", dtl: "拒绝承诺" });
}
</script>

<template>
  <n-modal
    title="考生承诺书"
    :closable="false"
    :show="show"
    preset="card"
    style="width: 600px"
  >
    <div style="font-size: 16px">
      <div class="privacy-content" v-html="content"></div>

      <div style="tw-flex tw-justify-center tw-mt-2">
        <div class="tw-flex tw-justify-center tw-mt-2">
          <n-button
            type="success"
            style="margin-right: 5px; min-width: 120px"
            @click="onOk"
          >
            同意
          </n-button>
          <n-button
            type="success"
            style="margin-right: 5px; min-width: 120px"
            @click="onDecline"
          >
            拒绝
          </n-button>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<style scoped>
.home {
  margin: 20px;
}
.privacy-content {
  font-size: 14px;
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  text-align: left;
}
.privacy-content p {
  margin-bottom: 5px;
}
</style>
