<template>
  <PageWrapper title="ACE基础使用"
               contentFullHeight
               fixedHeight
               contentBackground
  >
    <template #extra>
      <a-space size="middle">
        语言<a-select v-model:value="state.lang">
          <a-select-option v-for="(lang, index) of langs" :key="index" :value="lang"> {{ lang }} </a-select-option>
        </a-select>
        主题<a-select v-model:value="state.theme">
          <a-select-option v-for="(theme, index) of themes" :key="index" :value="theme"> {{ theme }} </a-select-option>
        </a-select>
      </a-space>
    </template>
    <AceEditor v-model:value="state.content"
               class="vue-ace-editor"
               :lang="state.lang"
               :theme="state.theme"
               :options="{
                 useWorker: true,
                 enableBasicAutocompletion: true,
                 enableSnippets: true,
                 enableLiveAutocompletion: true,
               }"
    />
  </PageWrapper>
</template>
<script setup lang="ts">
  import { reactive, watch } from 'vue';
  import { AceEditor } from '/@/components/AceEditor';
  import { PageWrapper } from '/@/components/Page';

  const langs = ['json', 'javascript', 'html', 'yaml'];
  const themes = ['chrome', 'github', 'monokai', 'dracula'];
  const state = reactive({
    lang: 'json',
    theme: 'chrome',
    content: '',
  });

  watch(
    () => state.lang,
    async lang => {
      state.content = (
        await {
          json: import('../../../../../package.json?raw'),
          javascript: import('/@/components/AceEditor/src/ace-config.js?raw'),
          html: import('../../../../../index.html?raw'),
          yaml: import('../../../../../pnpm-lock.yaml?raw'),
        }[lang]
      || {}).default!;
    },
    { immediate: true }
  );
</script>
<style lang="less" scoped>

.vue-ace-editor {
  font-size: 12px;
}

</style>

