<template>
  <a-modal
    v-model:open="visible"
    :width="424"
    style="top: 10vh"
    title="输入考号"
    @ok="confirm"
  >
    <a-form ref="formRef" :label-col="{ style: { width: '50px' } }">
      <a-form-item label="考号">
        <div class="exam-number">
          <a-textarea
            v-model:value="examNumber"
            placeholder="请输入"
            :auto-size="{ minRows: 4, maxRows: 10 }"
          ></a-textarea>
          <div class="number-suffix">{{ examNumberCountCont }}</div>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from "vue";
import { message } from "ant-design-vue";

import useModal from "@/hooks/useModal";

defineOptions({
  name: "MoreExamNumberDialog",
});

/* modal */
const { visible, open, close } = useModal();
defineExpose({ open, close });

const props = defineProps<{
  data: string;
}>();

const emit = defineEmits(["confirm"]);

const examNumber = ref("");

const examNumberCountCont = computed(() => {
  const examNumbers = (examNumber.value || "")
    .split("\n")
    .filter((item) => item);
  return `${examNumbers.length}/100`;
});

async function confirm() {
  emit("confirm", examNumber.value);
  close();
}

watch(
  () => visible.value,
  (val) => {
    if (val) {
      examNumber.value = props.data || "";
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.exam-number {
  position: relative;

  .ant-input {
    padding-bottom: 30px;
    width: 100%;
  }

  .number-suffix {
    position: absolute;
    color: @text-color3;
    height: 22px;
    line-height: 22px;
    bottom: 5px;
    right: 5px;
    z-index: 8;
  }
}
</style>
