<template>
  <div class="fit">
    <q-ajax-bar position="top" color="accent" size="5px" skip-hijack />
    <q-menu context-menu />
    <router-view />
  </div>
</template>
<script lang="ts">
import { SessionStorage, Cookies, useQuasar, setCssVar } from "quasar";
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useStore } from "src/store";

import VConsole from "vconsole";

// 根据条件加载 vConsole
{
  if (window.location.href.indexOf("__showDebug__=_1025_") != -1) {
    new VConsole();
  }
}

export default defineComponent({
  name: "App",

  setup() {
    const $t = useI18n();
    const $store = useStore();
    const $q = useQuasar();

    document.title = $t.t("title");

    window.onresize = (evt: any) =>
      EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);

    window.onmousedown = (evt: MouseEvent) => {
      EventBus.getInstance().emit(EventNamesDefine.WindowMouseDown, evt);
    };
    window.onmousemove = (evt: any) => {
      EventBus.getInstance().emit(EventNamesDefine.WindowMouseMove, evt);
    };
    window.onmouseup = (evt: any) => {
      EventBus.getInstance().emit(EventNamesDefine.WindowMouseUp, evt);
    };
    window.onmouseout = (evt: any) => {
      EventBus.getInstance().emit(EventNamesDefine.WindowMouseOut, evt);
    };

    window.document.body.onclick = (evt: any) => {
      if ((<any>window).touchPriority) {
        return;
      }
      EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);
    };

    if ("ontouchstart" in document.documentElement === true) {
      window.document.body.ontouchstart = (evt: any) => {
        if ((<any>window).touchPriority) {
          EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);
        }
      };
    }

    document.body.classList.add("overflow-hidden");

    (window as any).controlLogout = () => {
      Cookies.remove("auto_login");
      SessionStorage.clear();
      window.location.reload();
    };

    (window as any).setPcTheme = () => {
      setCssVar("primary", "#4aa1ce");
      setCssVar("secondary", "#26a69a");
      setCssVar("accent", "#9c27b0");
      setCssVar("dark", "#1d1d1d");
      setCssVar("positive", "#21ba45");
      setCssVar("negative", "#c10015");
      setCssVar("info", "#31ccec");
      setCssVar("warning", "#f2c037");
      setCssVar("dark-page", "#121212");
    };

    (window as any).setPadTheme = () => {
      setCssVar("primary", "#0b3536");
      setCssVar("secondary", "#ffffff");
      setCssVar("accent", "#2fa39b");
      setCssVar("dark", "#000000");
      setCssVar("positive", "#21ba45");
      setCssVar("negative", "#c10015");
      setCssVar("info", "#31ccec");
      setCssVar("warning", "#f2c037");
      setCssVar("dark-page", "#121212");
    };

    const landspace = () => {
      let landspace = false;
      landspace = window.innerWidth > innerHeight;

      if ($q.platform.is.ipad) {
        landspace = window.screen.width > window.screen.height;

        if (Math.abs(window.orientation) == 90) {
          landspace = !landspace;
        }
        if (window.location.href.indexOf("___debug_ipad___") != -1) {
          landspace = !landspace;
        }
      }
      if (window.innerHeight < 600) {
        // TODO fix android
      }
      return landspace;
    };
    (<any>window).landspace = landspace;

    window.onorientationchange = () => {
      $store.commit("updateLandspace", landspace());
    };

    $store.commit("updateLandspace", landspace());

    return {};
  },
});
</script>
