<template>
  <q-layout view="hHh lpR fFf">
    <div v-show="$store.state.initialized">
      <!-- header -->
      <q-header
        elevated
        class="header text-black"
        @click="(evt) => evt.stopPropagation()"
      >
        <top-tool-bar />
      </q-header>

      <!-- page -->
      <div
        v-if="!$store.state.power_state"
        class="fit text-h5 text-center"
        style="position: fixed; top: 49.5vh"
      >
        {{ $t("device standby mode") }}
      </div>
      <q-page-container class="col">
        <div class="row">
          <!-- left -->
          <div
            v-if="landspace"
            class="col-auto overflow-auto"
            style="border: 1px solid #bdbdbd; max-width: 45vw"
            @click="(evt) => evt.stopPropagation()"
          >
            <left-tool-bar />
          </div>

          <!-- cener content -->
          <div class="col q-ma-sm">
            <router-view />
          </div>

          <!-- right -->
          <div
            v-if="landspace"
            class="col-auto overflow-auto"
            style="border: 1px solid #bdbdbd; max-width: 45vw"
          >
            <right-tool-bar />
          </div>
        </div>
      </q-page-container>

      <!-- fotter -->
      <div v-show="false">
        <q-footer
          elevated
          v-if="landspace"
          class="bg-white text-black"
          style="height: 25px"
        >
          <div class="text-center fit">
            Copyright © 2020 - 2021 广东创显技术有限公司
          </div>
        </q-footer>
        <q-footer
          v-else
          elevated
          class="bg-white text-black"
          style="height: 35vh"
        >
          <footer-portrait class="fit" />
        </q-footer>
      </div>
    </div>
    <div v-show="!$store.state.initialized">
      <q-page-container class="col">
        <q-page class="row items-center justify-evenly">
          <q-list>
            <q-item>
              <q-item-section>
                <q-spinner color="primary" size="8em" :thickness="2" />
              </q-item-section>
            </q-item>
            <q-item />
            <q-item>
              <q-item-section>
                <div class="text-h5">loading...</div>
              </q-item-section>
            </q-item>
            <q-item v-show="show_back">
              <q-item-section>
                <a href="javascript:void(0);" OnClick="window.controlLogout()">
                  {{ $t("back to login page") }}
                </a>
              </q-item-section>
            </q-item>
          </q-list>
        </q-page>
      </q-page-container>
    </div>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

import LeftToolBar from "src/pages/LeftToolBar.vue";
import RightToolBar from "src/pages/RightToolBar.vue";
import TopToolBar from "src/pages/TopToolBar.vue";
import FooterPortrait from "src/pages/FooterPortrait.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useStore } from "src/store";
import FileSuffixHelper from "src/common/FileSuffixHelper";

export default defineComponent({
  name: "MainLayout",

  components: { LeftToolBar, RightToolBar, TopToolBar, FooterPortrait },

  setup() {
    const $store = useStore();

    try {
      (window as any).setPcTheme();
    } catch {}

    if ($store.state.advanced_debug) {
      FileSuffixHelper.debug_mode = true;
    }

    const landspace = $store.state.landspace;

    const show_back = ref(true);

    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
      const new_landspace = window.innerHeight < window.innerWidth;
      if (landspace != new_landspace) {
        window.location.reload();
      }
    });

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
      show_back.value = false;
    });

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectConnected, () => {
      show_back.value = true;
    });

    return {
      landspace,
      show_back,
      loga(a: any) {
        console.log(a);
      },
    };
  },
});
</script>
