<template>
  <el-dialog v-model="visible" title="文本文档" :append-to-body="appendToBody">
    <el-input autosize :model-value="value" readonly type="textarea" />
  </el-dialog>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { ElDialog, ElInput } from "element-plus";
import "element-plus/es/components/dialog/style/css";
import "element-plus/es/components/input/style/css";
import { readTxtDocument } from "../../utils/index.js";

defineOptions({
  name: "AppTxt",
});
const props = defineProps({
  src: { type: String, required: true, default: "" },
  appendToBody: { type: Boolean, default: false },
});
const value = ref("");
const visible = defineModel("visible", { type: Boolean, required: true });
watchEffect(async () => {
  if (props.src) value.value = await readTxtDocument(props.src);
});
</script>

<style lang="scss" scoped></style>
