<script setup lang="ts">
import { ViewNeuron } from '@ibiz-template/controller';
import { useIndexViewController } from '@ibiz-template/vue-util';
import { computed, getCurrentInstance, onMounted, ref } from 'vue';
import { createUUID } from 'qx-util';
import { useIndexRouteManage } from './index-view';

interface IndexViewProps {
  context: IContext;
  params?: IParams;
  modelPath: string;
}

const props = withDefaults(defineProps<IndexViewProps>(), {
  params: () => ({}),
});

const { proxy } = getCurrentInstance()!;

const c = useIndexViewController(proxy, props.modelPath);

const {
  currentKey,
  keyHistory,
  routeMsgs,
  updateRouteMsg,
  closeView,
  deleteRouteCache,
} = useIndexRouteManage(proxy, c);

const appKeepAliveKey = ref(createUUID());

// 视图初始化，监听事件
const onCreated = (neuron: ViewNeuron) => {
  const key = currentKey.value;
  neuron.evt.on('closeView', () => {
    closeView(key);
  });
  neuron.evt.on('setTitle', (title: string) => {
    updateRouteMsg(key, { caption: title });
  });
};
// dfsdfds

onMounted(() => {
  setTimeout(() => {
    const el = document.querySelector('.app-loading-x') as HTMLDivElement;
    if (el) {
      el.style.display = 'none';
    }
  }, 300);
});

const onViewFound = (opts: IData) => {
  updateRouteMsg(currentKey.value, opts);
};

// 菜单收缩变化
const collapseChange = (collapse: boolean) => {
  c.collapseChange = collapse;
};

const onMenuRouteChange = () => {
  deleteRouteCache(keyHistory.value.slice(0));
  appKeepAliveKey.value = createUUID();
};

// 后退按钮触发事件,删除上一个路由的缓存
window.onpopstate = () => {
  deleteRouteCache([keyHistory.value[1]]);
};

const currentPath = computed(() => {
  const routeMsg = routeMsgs.value.find(item => item.key === currentKey.value);
  return routeMsg?.modelPath || '';
});
</script>

<template>
  <AppLayout
    :is-complete="c.complete"
    :model="c.model"
    @onCollapseChange="collapseChange"
  >
    <template v-if="c.complete">
      <AppMenu
        v-if="c.complete"
        slot="menu"
        :current-path="currentPath"
        :model-data="c.model.appMenu"
        :context="c.context"
        :collapse-change="c.collapseChange"
        @menuRouteChange="onMenuRouteChange"
      ></AppMenu>
      <AppKeepAlive :key="appKeepAliveKey" :key-list="keyHistory">
        <router-view
          :key="currentKey"
          @neuronInit="onCreated"
          @viewFound="onViewFound"
        />
      </AppKeepAlive>
    </template>
  </AppLayout>
</template>
