// 流程管理 - 流程设计 - 内联脚本-脚本文本框 1.脚本任务节点；2.连接线；3.监听器
<template>
	<a-modal
		v-model:visible="confirmModalVisibleValue"
		:confirm-loading="dataLoading"
		:title="getI18n('system', 'SYSTEM_Process_ScriptValueEdit')"
		:closable="true"
		:maskClosable="false"
		@cancel="onCloseButtonClick()"
		:width="'80%'"
	>
		<!-- <a-textarea
			v-model:value="codeString"
			:placeholder="
				getI18n('common', 'Common_Please_Enter', [
					getI18n('system','SYSTEM_Process_ScriptValue'),
				])
			"
			:rows="3"
			style="width: 100%"
		/> -->
		<codemirror
			class="custom-codemirror"
			ref="editorRef"
			v-model="codeString"
			:placeholder="
				getI18n('common', 'Common_Please_Enter', [
					getI18n('system', 'SYSTEM_Process_ScriptValue'),
				])
			"
			:autofocus="true"
			:indent-with-tab="true"
			:tab-size="4"
			:autoRefresh="true"
		/>
		<!-- :extensions="extensions"
			@ready="handleReady"
			@change="log('change', $event)"
			@focus="log('focus', $event)"
			@blur="log('blur', $event)" -->

		<!-- <div ref="editorRef" class="editor-main"></div> -->

		<template #footer>
			<a-button type="primary" @click="onSubmitButtonClick">
				<save-outlined />
				{{ getI18n('common', 'Common_Certain') }}
			</a-button>
			<a-button @click="onCloseButtonClick">
				<close-outlined />
				{{ getI18n('common', 'Common_Remove') }}
			</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts">
import { SaveOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { getI18n } from '@/utils/i18n'
import { defineComponent, ref, watch, onMounted } from 'vue' //

import { Codemirror } from 'vue-codemirror'
import { basicSetup, EditorView } from 'codemirror'
import { EditorState } from '@codemirror/state'
import { autocompletion } from '@codemirror/autocomplete'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'

// import { json } from '@codemirror/lang-json'
// import { tags } from '@lezer/highlight'
// import { html } from "@codemirror/lang-html"
// import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'

export default defineComponent({
	components: {
		SaveOutlined,
		CloseOutlined,
		Codemirror,
	},
	props: {
		// 操作确认弹出层是否展示
		confirmModalVisible: {
			type: Boolean,
			required: false,
			default: false,
		},
		//
		scriptValueData: {
			type: String,
			required: true,
			default: '',
		},
	},
	emits: ['confirm-add-modal-refresh', 'confirm-add-modal-cancel'],
	setup(props, context) {
		// 弹窗是否展示
		let confirmModalVisibleValue = ref(props.confirmModalVisible)
		const codeString = ref<string>()
		// loading
		const dataLoading = ref<boolean>(false)

		//  取消
		const onCloseButtonClick = () => {
			codeString.value = undefined
			context.emit('confirm-add-modal-cancel')
		}

		// 确认
		const onSubmitButtonClick = () => {
			context.emit('confirm-add-modal-refresh', codeString.value)
		}

		// const myHighlightStyle = HighlightStyle.define([
		// 	{ tag: tags.keyword, color: '#fc6' },
		// 	{ tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
		// ])
		// const compartment = new Compartment()
		const editorRef = ref()
		const editorView = ref()
		const initEditor = () => {
			if (typeof editorView.value !== 'undefined') {
				editorView.value.destroy()
			}
			const startState = EditorState.create({
				doc: codeString.value,
				extensions: [
					basicSetup,
					oneDark,
					autocompletion(),
					javascript(),
					// json(),
					// syntaxHighlighting(oneDarkHighlightStyle),
					// compartment.of(html()),
					// syntaxHighlighting(myHighlightStyle),
				],
			})
			if (editorRef.value) {
				editorView.value = new EditorView({
					state: startState,
					parent: editorRef.value,
				})
				editorView.value.refresh()
			}
		}
		onMounted(() => {
			initEditor()
		})

		watch(
			() => props.confirmModalVisible,
			newValue => {
				confirmModalVisibleValue.value = newValue
				if (newValue) {
					codeString.value = props.scriptValueData
						? JSON.parse(props.scriptValueData)
						: ''
					// initEditor()
				} else {
					codeString.value = undefined
				}
			},
			{ deep: true, immediate: true }
		)

		return {
			codeString,
			confirmModalVisibleValue,
			dataLoading,
			getI18n,
			onSubmitButtonClick,
			onCloseButtonClick,

			editorRef,
			editorView,
		}
	},
})
</script>