<template>
  <q-layout view="lhh lpR lFf" class="layout">
    <!-- <q-header elevated>
			<q-toolbar>
				<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />

				<q-toolbar-title>Quasar App</q-toolbar-title>

				<div>Quasar v{{ $q.version }}</div>
			</q-toolbar>
    </q-header>-->

    <q-drawer v-model="leftDrawerOpen" show-if-above :mini="miniState" :width="260">
      <div class="full-height column">
        <div class="flex q-px-md q-py-lg items-center header-logo">
          <img src="../assets/images/md-logo.png" style="width: 40%" />
          <i class="iconfont icon-toggle-left" style="font-size:24px" v-if="!miniState"></i>
          <i class="iconfont icon-toggle-right" style="font-size:24px" v-if="miniState"></i>
        </div>
        <q-scroll-area
          :thumb-style="scrollStyle.thumbStyle"
          :bar-style="scrollStyle.barStyle"
          class="full-height col"
        >
          <div class="q-px-md navs-list">
            <Navs :menus="menuList"></Navs>
          </div>
        </q-scroll-area>
        <!-- <div class="q-pa-md row items-center">
          <q-avatar rounded size="40px">
            <img :src="user.userAvatar" alt />
          </q-avatar>
          <div class="q-ml-md pfb col" style="font-size:20px">{{ user.nickName }}</div>
          <svg-icon
            :size="24"
            color="hover-g-p svg-icon"
            icon="Navigation/Sign-out.svg"
            tips="退出账户"
            @click="loginOut"
          ></svg-icon>
        </div>-->
      </div>
    </q-drawer>

    <q-page-container style="background: #f3f6f9" class="window-height">
      <q-scroll-area
          :thumb-style="scrollStyle.thumbStyle"
          :bar-style="scrollStyle.barStyle"
          class="full-height full-width"
          style="max-width: 100%;"
        >
        <div class="window-height full-width absolute">
          <router-view />
        </div>
      </q-scroll-area>
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
const linksList = [
  {
    MenuId: 1,
    MenuName: '渠道管理',
    MenuIcon: 'target-full',
    SubList: [
      {
        MenuId: 8,
        MenuName: '我的渠道',
        MenuIcon: 'target-full',
        MenuUrl: '/index'
      },
      {
        MenuId: 9,
        MenuName: '渠道市场',
        MenuIcon: 'left',
        MenuUrl: 'https://quasar.dev'
      },
       {
        MenuId: 9,
        MenuName: '渠道市场1',
        MenuIcon: 'right',
        MenuUrl: 'https://quasar.dev'
      }
    ]
  },
  {
    MenuId: 10,
    MenuName: '引流',
    MenuIcon: 'school',
    SubList: [
      {
        MenuId: 10 - 1,
        MenuName: '素材分组',
        MenuIcon: 'school',
        MenuUrl: '/groupingManage'
      },

    ]
  },
  {
    MenuId: 11,
    MenuName: '客户管理',
    MenuIcon: 'school',
    SubList: [
      {
        MenuId: 11 - 1,
        MenuName: '客户设置',
        MenuIcon: 'school',
        MenuUrl: '/customerSetup'
      },
      {
        MenuId: 11-2,
        MenuName: '客户',
        MenuIcon: 'school',
        MenuUrl: '/customer'
      },
       {
        MenuId: 11-3,
        MenuName: '线索',
        MenuIcon: 'school',
        MenuUrl: '/clue'
      }
    ]
  },
]

import { defineComponent, ref, reactive, provide, watch } from 'vue'
import Navs from '@/components/layout/navs.vue'
import { useRouter } from 'vue-router'
import useScrollModule from '@/module/scrollbar/scrollModule'
import { dispatchAction, getStoreGetter } from '@/store/utils'
import { UserGetter } from '@/store/modules/user/getters'
import { UserActionsType } from '@/store/modules/user/actions'
import router from '@/router'
export default defineComponent({
  name: 'MainLayout',

  components: {
    Navs
  },

  setup() {
    const leftDrawerOpen = ref(true)
    const useRouterCurrent = reactive(useRouter())
    let currentRouterPath = ref(useRouterCurrent.currentRoute.path)
    let { scrollStyle } = useScrollModule()
    provide('currentPath', currentRouterPath)
    watch(useRouterCurrent, o => {
      currentRouterPath.value = o.currentRoute.path
    })
    const user = getStoreGetter<UserGetter>('user', 'getUser')
    const loginOut = () => {
      dispatchAction<UserActionsType>('user', 'setUserSignout', null)
      router.push({
        path: '/login'
      })
    }
    let miniState = ref(false)
    return {
      miniState,
      menuList: linksList,
      leftDrawerOpen,
      scrollStyle,
      user,
      loginOut
    }
  }
})
</script>
<style>
.layout{
  min-height: 100vh !important;
  overflow: hidden;
}
.layout .q-drawer {
  background: linear-gradient(180deg, #1c2658, #0f152e);
}
.navs-list .q-item {
  border-radius: 8px;
  font-size: 16px !important;
  color: #788292 !important;
}
</style>
<style lang="scss" scoped>
.header-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 20px 0 20px;
  color:#fff;
}
</style>
