<template>
  <am-loading :loading="loading">
    <div class="editor-wrapper editor-wrapper-view">
      <div class="editor-container">
        <div class="editor-content">
          <div ref="container" class="am-engine-view"></div>
          <am-outline v-if="!isMobile && engine" :engine="engine" />
        </div>
      </div>
    </div>
  </am-loading>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { $, View, isMobile } from '@aomao/engine';
import AmLoading from '@/components/editor/loading.vue';
import AmOutline from '@/components/editor/outline.vue';
import { cards, plugins, onLoad } from '@/components/editor/config';
import { getDocValue } from '@/utils';

const viewPlugins = plugins.filter(
	(plugin) =>
		plugin.pluginName.indexOf('uploader') < 0 &&
		['mark-range'].indexOf(plugin.pluginName) < 0,
);

export default defineComponent({
  name: 'engine-view',
  components: {
    AmLoading,
    AmOutline,
  },
  setup() {
    const container = ref<HTMLElement | null>(null);
    const engine = ref<any>(null); // EngineInterface | null
    const members = ref([]);
    const loading = ref(true);
    onMounted(() => {
      if (container.value) {
        const view = new View(container.value, {
          plugins: viewPlugins,
          cards,
          config: {
            table: {
              overflow: {
                maxLeftWidth: () => {
                  return 0;
                },
                maxRightWidth: () => {
                  if (isMobile) return 0;
                  const wrapper = $('.editor-wrapper-view');
                  const view = $('.am-engine-view');
                  const wRect = wrapper.get<HTMLElement>()?.getBoundingClientRect();
                  const vRect = view.get<HTMLElement>()?.getBoundingClientRect();
                  const width = (wRect?.width || 0) - (vRect?.width || 0);
                  return width <= 0 ? 100 : width;
                },
              },
            },
          },
        });
        // 设置显示成功消息UI，默认使用 console.log
        view.messageSuccess = (msg: string) => {
          message.success(msg);
        };
        // 设置显示错误消息UI，默认使用 console.error
        view.messageError = (error: string) => {
          message.error(error);
        };
        // 默认编辑器值，为了演示，这里初始化值写死，正式环境可以请求api加载
        const value = getDocValue() || '<strong>Hello</strong>,This is demo';
        // 非协同编辑，设置编辑器值，异步渲染后回调
        view.render(value);
        loading.value = false;

        engine.value = view;
      }
    });

    onUnmounted(() => {
      if (engine.value) engine.value.destroy();
    });

    return {
      loading,
      isMobile,
      container,
      engine,
    };
  },
});
</script>
<style lang="less" scoped>
.editor-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  min-width: 1580px;
  overflow: auto;
}

.editor-container {
  background: #fafafa;
  background-color: #fafafa;
  padding: 24px 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  position: relative;
}

.editor-content {
  position: relative;
  width: 812px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #f0f0f0;
  // min-height: 400px;
  min-height: calc(100vh - 86px);
}

.editor-content .am-engine-view {
  padding: 40px 60px 60px;
}
</style>
