<template>
  <div class="manual-view">
    <am-loading :loading="loading">
      <div class="editor-wrapper editor-wrapper-view">
        <am-outline v-if="!isMobile && engine" :engine="engine" />
        <div ref="container" class="editor-container" />
        <am-outline v-if="!isMobile && engine" :engine="engine" />
      </div>
    </am-loading>
  </div>
</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: 'manual-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>
.manual-view {
  padding: 20px;
  background: #fafafa;
  overflow: auto;
  .editor-wrapper {
    width: 100%;
    min-width: 1460px;
    display: flex;
    align-items: flex-start;
    .editor-container {
      flex: 1;
      border: 1px solid #f0f0f0;
      background: #fff;
      min-width: 800px;
      min-height: calc(100vh - 40px);
      margin: 0 10px;
      position: relative;
      padding: 40px 60px 60px;
    }
  }
}
</style>
