<template>
  <a-config-provider :locale="zhCN">
    <div class="miniprogram-editor">
      <EditorToolbar
        :history-list="historyList"
        :current-config="currentConfig"
        :current-history-id="currentHistoryId"
        :current-show-config-name="currentShowConfigName"
        v-model:is-dev="isDev"
        v-model:save-as-modal-visible="saveAsModalVisible"
        v-model:save-as-version-name="saveAsVersionName"
        :save-as-loading="saveAsLoading"
        @help="helpModalVisible=true"
        @select-default="onSelectDefault"
        @select-history="onSelectHistory"
        @save="saveEditorJson"
        @open-save-as="openSaveAsModal"
        @confirm-save-as="confirmSaveAs"
        @set-active="setActiveHistory"
        @delete-history="deleteHistory"
        @export="exportToJsonFile"
        @sync-to-production="syncToProduction"
      />

      <AddPageModal
        :open="addPageModalVisible"
        :model-key="addPageKey"
        :model-title="addPageTitle"
        :template="addPageTemplate"
        :loading="addPageLoading"
        @update:open="setAddPageModalVisible"
        @update:model-key="setAddPageKey"
        @update:model-title="setAddPageTitle"
        @ok="onConfirmAddPage"
      />

      <a-modal
        v-model:open="helpModalVisible"
        title="编辑器使用帮助"
        width="800px"
      >
        <HelpView />
      </a-modal>

      <div class="editor-body">
        <PageListPanel
          :page-list="pageList"
          :selected-page="selectedPage"
          @update:selected-page="setSelectedPage"
          @move-up="movePageUp"
          @move-down="movePageDown"
          @duplicate="duplicatePage"
          @delete="confirmDeletePage"
          @add-page="onAddPageMenuClick"
        />

        <PropsPanel
          :selected-page="selectedPage"
          v-model:test-detail-id="testDetailId"
          @refresh="previewPanelRef?.refresh()"
        />

        <PreviewPanel
          ref="previewPanelRef"
          :editor-json="currentEditorJson"
          :selected-page="selectedPage"
          :test-detail-id="testDetailId"
        />
      </div>
    </div>
  </a-config-provider>
</template>

<script setup lang="ts">
import { onMounted, provide, ref, watch } from 'vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import EditorToolbar from './subpart/EditorToolbar.vue';
import AddPageModal from './subpart/AddPageModal.vue';
import PageListPanel from './subpart/PageListPanel.vue';
import PropsPanel from './subpart/PropsPanel.vue';
import PreviewPanel from './subpart/PreviewPanel.vue';
import { useEditorConfig } from './composables/useEditorConfig';
import { usePageList } from './composables/usePageList';
import HelpView from './subpart/HelpView.vue';

const {
  currentEditorJson,
  selectedPage,
  historyList,
  helpModalVisible,
  currentConfig,
  currentHistoryId,
  currentShowConfigName,
  isDev,
  saveAsModalVisible,
  saveAsVersionName,
  saveAsLoading,
  onSelectDefault,
  onSelectHistory,
  saveEditorJson,
  syncToProduction,
  openSaveAsModal,
  confirmSaveAs,
  setActiveHistory,
  deleteHistory,
  exportToJsonFile,
  init,
} = useEditorConfig();

const testDetailId = ref(Number(localStorage.getItem('testDetailId') || '0'));
watch(testDetailId, (v) => {
  localStorage.setItem('testDetailId', v.toString());
});

const {
  pageList,
  movePageUp,
  movePageDown,
  duplicatePage,
  confirmDeletePage,
  addPageModalVisible,
  addPageTemplate,
  addPageKey,
  addPageTitle,
  addPageLoading,
  onAddPageMenuClick,
  confirmAddPage,
} = usePageList(currentEditorJson, selectedPage);

const previewPanelRef = ref<InstanceType<typeof PreviewPanel> | null>(null);

function setSelectedPage(page: (typeof selectedPage.value) | null) {
  selectedPage.value = page;
}
function setAddPageModalVisible(v: boolean) {
  addPageModalVisible.value = v;
}
function setAddPageKey(v: string) {
  addPageKey.value = v;
}
function setAddPageTitle(v: string) {
  addPageTitle.value = v;
}

provide('pageList', pageList);
provide('editorPreviewMark', true);

function onConfirmAddPage() {
  return confirmAddPage();
}

onMounted(async () => {
  await init();
  window.addEventListener('beforeunload', (e) => {
    const msg = '你还有未保存的内容，确定要离开吗？';
    e.returnValue = msg;
    return msg;
  });
});
</script>

<style scoped>
.miniprogram-editor {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
.editor-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
.panel {
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #eee;
}
.panel:last-of-type {
  border-right: none;
}
</style>
