<template>
	<div class="editor-container" :class="{ 'fullscreen-editor': fullscreen }">
    <div class="editor-controls">
      <el-button circle @click="toggleFullscreen" class="fullscreen-btn">
        <img v-if="!fullscreen" src="@/assets/images/qvan.png" alt="全屏">
        <img v-else src="@/assets/images/tuiqvan.png" alt="退出全屏">
      </el-button>
    </div>
    <div class="editor" id="zfile-monaco-editor"/>
  </div>
</template>

<script setup>
import {onMounted, ref, onUnmounted} from 'vue';

// import * as monaco from 'monaco-editor';
// 按需加载核心 api
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// 按需加载语法高亮
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
import 'monaco-editor/esm/vs/basic-languages/scss/scss.contribution'
import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution'
import 'monaco-editor/esm/vs/basic-languages/go/go.contribution'
import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution'
import 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution'
import 'monaco-editor/esm/vs/basic-languages/java/java.contribution'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/kotlin/kotlin.contribution'
import 'monaco-editor/esm/vs/basic-languages/less/less.contribution'
import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution'
import 'monaco-editor/esm/vs/basic-languages/mysql/mysql.contribution'
import 'monaco-editor/esm/vs/basic-languages/php/php.contribution'
import 'monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution'
import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'
import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'

import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js'
// import 'monaco-editor/esm/vs/editor/contrib/codeAction/browser/codeAction.js'

// 组件接收的属性：
//  fileUrl:    文件下载路径
//  fileName:   文件名
const props = defineProps({
	fileUrl: String,
	fileName: String
});

// 文件内容
const fileContent = ref('');

// 定义 worker 加载
// import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
// import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
// import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
// import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
//
// self.MonacoEnvironment = {
// 	getWorker(workerId, label) {
// 		if (label === 'json') {
// 			return new JsonWorker()
// 		}
// 		if (label === 'css' || label === 'scss' || label === 'less') {
// 			return new CssWorker()
// 		}
// 		if (label === 'html' || label === 'handlebars' || label === 'razor') {
// 			return new HtmlWorker()
// 		}
// 		return new EditorWorker();
// 	},
// };


import { getFileTextReq, getFileTextFromServerReq } from "@/api/common";

// 挂载时，加载文件内容，并初始化播放器
onMounted(() => {
	// window.addEventListener('keydown', handleKeydown)
	let fileUrl = props.fileUrl;
	getFileTextReq(fileUrl).then((res) => {
		fileContent.value = res.data;
		initMonaco();
	}).catch((e) => {
		console.log(`默认加载文本文件: [${props.fileName}] - [${props.fileUrl}] 失败, 尝试从服务端加载.`, e);
		getFileTextFromServerReq({url: fileUrl}).then((res) => {
			fileContent.value = res.data;
			initMonaco();
		}).catch((e) => {
			console.log(`从服务器端加载文本文件: [${props.fileName}] - [${props.fileUrl}] 失败.`, e);
			alert('加载文件预览器失败，请检测文件下载链接是否正常');
		})
	});
});

// 关闭时销毁所有组件
onUnmounted(() => {
	monaco.editor.getModels().forEach((item) => {
		item.dispose();
	})
	// window.removeEventListener('keydown', handleKeydown)
})

import useCommon from "@/components/file/useCommon";
const { isNotMobile } = useCommon();

// 初始化编辑器
let initMonaco = () => {
	let model = monaco.editor.createModel(
		fileContent.value,
		undefined,
		monaco.Uri.parse(props.fileName)
	);

	monaco.editor.create(document.getElementById("zfile-monaco-editor"), {
		model: model,
		// table 个数
		tabSize: 4,
		// 自动布局
		automaticLayout: true,
		// 底部滚动超出
		scrollBeyondLastLine: false,
		// 自动换行
		wordWrap: true,
		// 只读
		readOnly: true,
		minimap: {
			enabled: isNotMobile.value
		},
		lineNumbers: isNotMobile.value ? 'on' : 'off'
	});
};
// 新增全屏状态
const fullscreen = ref(false)

// 全屏切换方法
const toggleFullscreen = () => {
  fullscreen.value = !fullscreen.value
  // 通知编辑器更新布局
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'))
  }, 100)
}

// 键盘事件处理
// const handleKeydown = (e) => {
//   if (fullscreen.value && e.key === 'Escape') {
//     toggleFullscreen()
//   }
// }

</script>

<style lang="scss" scoped>

#zfile-monaco-editor {
	height: 80vh;
	//:deep() {
	//
	//}
}
.editor-container {
  position: relative;
  height: 80vh;

  &.fullscreen-editor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw !important;
    height: 100vh !important;
    background: white;
    
    #zfile-monaco-editor {
      height: calc(100vh - 40px);
    }
  }
}

.editor-controls {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1000;
  
  .fullscreen-btn {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    &:hover {
      background: rgba(255, 255, 255, 0.9);
    }
    
    img {
      width: 16px !important;
      height: 16px;
    }
  }
}

#zfile-monaco-editor {
  transition: all 0.3s ease;
}
</style>