<template>
  <q-layout view="lHh lpr lFf" key="1">
    <!-- lHh lpr lFf -->
    <q-header
      v-if="!props.hideHeader"
      :bordered="false"
      class="topBar-header text-black bg-white"
      :class="props.headerClass"
    >
    <slot name="header" :backState="backState" :back="back">
      <q-toolbar class="justify-between overflow-hidden">
        <q-toolbar-title class="toolbar-btns col-auto q-pr-none">
          <q-btn
            flat
            round
            dense
            icon="arrow_back_ios_new"
            v-if="!backState"
            @click="back"
          >
          <q-badge v-if="store.orders?.pending_num || store.orders?.draft_num|| store.orders?.win_num|| store.orders?.withdraw_num"
          color="red" rounded class="absolute-top-left" style="width:8px;min-height:8px; padding:0px;" />
          </q-btn>
          <slot name="header-left"></slot>
        </q-toolbar-title>
        <q-toolbar-title class="text-left row col-grow items-center">
          <slot name="header-title">
            {{ title }}
          </slot>
        </q-toolbar-title>
        <q-toolbar-title class="toolbar-btns col q-pl-none text-right">
          <slot name="header-right"></slot>
        </q-toolbar-title>
      </q-toolbar>
      <slot name="header-append"></slot>
    </slot>
    </q-header>

    <q-page-container class="page-container" :class="attrs.class">
      <q-page>
        <div class="row justify-center q-my-md" v-if="props.loading">
          <q-spinner-dots color="grey" size="24px" />
        </div>
        <slot v-else></slot>
      </q-page>
    </q-page-container>
    <slot name="footer"></slot>
  </q-layout>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { computed, useSlots, defineProps, useAttrs, getCurrentInstance } from "vue";
import { useSelfStore } from 'src/stores/self'
const attrs = useAttrs()
const props = defineProps({
  hideHeader: Boolean,
  headerClass: String,
  loading: Boolean,
});
const store = useSelfStore()
const route = useRoute();
const router = useRouter();
const title = computed(() => {
  return route.query.title || route.meta.title;
});
const backState = computed(() => {
  return route.path.split("/").length <= 2;
});
// const {ctx} =getCurrentInstance()
function back() {
  router.back();
  // ctx.unmount()
}
</script>
<style lang="scss" scoped></style>
