<template>
  <div style="height: 50px;margin: 5px;vertical-align: middle;display: flex;flex-direction: row;gap: 5px;">
    <el-input v-model="fileName" placeholder="请输入文件名" style="width: 300px;height: 30px;" />
    <el-button @click="handleOpenFile" style="height: 30px;">打开文件</el-button>
  </div>
  <WellRecommend :tokenKey="currentTokenKey" ref="wrRef" :showRight="false" style="height: calc(100dvh - 68px);" />
</template>
<script setup>
definePageMeta({
  requiresAuth: false,
  layout: false, // 不使用任何布局
});
import { ref, onMounted } from 'vue';
import { generateGUID } from "~/utils/common";
import { STORAGE_KEYS } from "~/utils/storageKeys"
import { EMIT_COMMAND } from '~/utils/commandTypes';

// 消息提示（自动隐藏）
const { $toastMessage } = useNuxtApp();

// 当前页图件token的 key
const currentTokenKey = STORAGE_KEYS.DRAW_TEST_IMG_TOKEN;

const fileName = ref('断裂分布图0108.kev');

const wrRef = ref(null);

const loadFile = () => {
  try {
    const token = generateGUID();
    localStorage.setItem(currentTokenKey, token);
    // emitter.emit(EMIT_COMMAND.EVT_TYPE, { type: EMIT_COMMAND.OPEN_FILE, cmdID: currentTokenKey, data: JSON.stringify({ fileName: fileName.value, drawerToken:
    // token }) });
    wrRef.value?.doOpenFile(fileName.value);
  } catch (error) {
    console.error("加载文件失败：", error);
    $toastMessage.error(`加载文件失败：${error}`);
  }
};

const handleOpenFile = () => {
  if (!fileName.value) {
    $toastMessage.warning("请输入文件名");
    return;
  }

  loadFile();
}
</script>
<style scoped></style>