<template>
	<div class="app-container">
		<el-form ref="basicInfoForm" :model="info">
			<el-card style="margin: 20px 0">
				<div style="margin: 10px 0">前置hook</div>
				<codemirror
					v-model="info.beforeHook"
					placeholder="Code goes here..."
					:style="{ height: '100%' }"
					:autofocus="true"
					:spellcheck="true"
					:smartIndent="true"
					:indentWithTab="true"
					:styleActiveLine="true"
					:autoCloseBrackets="true"
					:highlightDifferences="true"
					:showCursorWhenSelecting="true"
					:autorefresh="true"
					:foldGutter="true"
					:tab-size="2"
					:extensions="extensions"
					@ready="handleReady"
					@blur="handleChange('beforeHook')"
				/>
				<div style="margin: 20px 0">后置hook</div>
				<codemirror
					v-model="info.afterHook"
					placeholder="Code goes here..."
					:style="{ height: '100%' }"
					:autofocus="true"
					:spellcheck="true"
					:smartIndent="true"
					:indentWithTab="true"
					:styleActiveLine="true"
					:autoCloseBrackets="true"
					:highlightDifferences="true"
					:showCursorWhenSelecting="true"
					:autorefresh="true"
					:foldGutter="true"
					:tab-size="2"
					:extensions="extensions"
					@ready="handleReady"
					@blur="handleChange('afterHook')"
				/>
			</el-card>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { updateBasicTable } from '@/api/gen/table';
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';

const extensions = [javascript(), oneDark];
// Codemirror EditorView instance ref
const view = shallowRef();
const handleReady = (payload) => {
	view.value = payload.view;
};

const ruleFormRef = ref<HTMLElement | null>(null);
const props = defineProps({
	curApiId: {
		type: String,
		default: '',
	},
	info: {
		type: Object,
		default: () => ({}),
	},
});

const state = reactive({});

// 监听表单字段
const handleChange = (name: any) => {
	console.log(name);
	updateBasicTable(props.info).then((res) => {});
};

// 页面加载时调用
onMounted(() => {});

// 页面卸载时
onUnmounted(() => {});
</script>
