<template>
  <Panel :title="null" class="vtj-code-factory__css">
    <CodeEditor
      ref="codeEditor"
      height="100%"
      lang="css"
      :model-value="cssCode"></CodeEditor>
    <template #footer>
      <ElButton size="default" type="primary" @click="onSubmit">保存</ElButton>
    </template>
  </Panel>
</template>
<script lang="ts" setup>
import { IFile, CodeEditor, Panel } from '@vtj/engine';
import { ElButton, ElMessage } from 'element-plus';
import { ref } from 'vue';

export interface Props {
  file: IFile;
}
const props = defineProps<Props>();

const cssCode = ref(props.file.css);
const codeEditor = ref();

const onSubmit = () => {
  const editor = codeEditor.value?.getEditor();
  const value = editor?.getValue();
  props.file.setCss(value);
  ElMessage.success({
    message: '保存成功！'
  });
};
</script>
