<template>
  <el-dialog
    v-model="visible"
    title="请输入注释内容"
    width="500px"
    :before-close="handleClose"
  >
    <div v-loading="loading">
      <el-input
        v-model="inputContent"
        type="textarea"
        :rows="4"
        placeholder="请输入批注内容..."
      />
      <span class="dialog-footer flex justify-end">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  modelValue: Boolean,
  defaultContent: String,
});

const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);

const visible = ref(false);
const inputContent = ref(props.defaultContent || "");
const pdfAnnoInstance = ref(null);
let currentSavedRange = null; // 新增：存储传入的选区

const commonPhrasesList = ref([]);
const loading = ref(false);

const confirm = async () => {
  if (!pdfAnnoInstance.value) return;
  const annots = await pdfAnnoInstance.value.note(
    {
      subtype: "Highlight",
      color: "yellow",
      contents: inputContent.value,
      userId: "123",
      nickName: "123123",
      createTime: new Date().getTime(),
      noteType: 1,
    },
    currentSavedRange
  ); // 修改：传递存储的选区
  visible.value = false;
  emit("confirm", annots); // 保持原有事件发射
  inputContent.value = "";
};

const cancel = () => {
  emit("cancel");
  visible.value = false;
  inputContent.value = "";
};

const handleClose = (done) => {
  emit("cancel");
  done();
  inputContent.value = "";
};

// 修改show方法（新增选区存储）
const show = ({ pdfAnno, savedRange }) => {
  visible.value = true;
  pdfAnnoInstance.value = pdfAnno;
  currentSavedRange = savedRange; // 存储选区
  getList();
};

const hanldleClickWord = (item) => {
  inputContent.value = item.content;
};

defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.word {
  &:hover {
    opacity: 0.8;
  }
}
</style>
