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

<script setup>
import { useVModel } from "@vueuse/core";
import { ref, watchEffect } from "vue";
import { readTxtDocument } from "@/assets/js/utils.js";

defineOptions({
  name: "LayoutTxt",
});
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  src: {
    type: String,
    required: true,
    default: "",
  },
});
const value = ref("");
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
watchEffect(async () => {
  if (props.src) value.value = await readTxtDocument(props.src);
});
</script>

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