<template>
  <q-layout view="lHh Lpr lFf">
    <q-header bordered >
      <q-bar>
        <q-icon name="laptop_chromebook" />
        <div style="-webkit-app-region: drag;width: 100%;" class="cursor-pointer">烘烤箱管理 BATE </div>
        <q-space/>
        <q-btn dense @click="handleWindow(1)" flat icon="minimize"/>
        <q-btn dense @click="handleWindow(2)" flat icon="crop_square"/>
        <q-btn @click="handleWindow(3)" dense flat icon="close"/>
      </q-bar>
<!--      <q-toolbar>-->
<!--        <q-btn-->
<!--          icon="menu" flat-->
<!--          aria-label="Menu"-->
<!--          @click="leftDrawerOpen = !leftDrawerOpen"-->
<!--        />-->

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

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

    <q-drawer
      v-model="leftDrawerOpen"
      bordered      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'components/EssentialLink.vue'

const linksData = [
  {
    title: 'Docs',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'https://quasar.dev'
  },
  {
    title: 'Github',
    caption: 'github.com/quasarframework',
    icon: 'code',
    link: 'https://github.com/quasarframework'
  },
  {
    title: 'Discord Chat Channel',
    caption: 'chat.quasar.dev',
    icon: 'chat',
    link: 'https://chat.quasar.dev'
  },
  {
    title: 'Forum',
    caption: 'forum.quasar.dev',
    icon: 'record_voice_over',
    link: 'https://forum.quasar.dev'
  },
  {
    title: 'Twitter',
    caption: '@quasarframework',
    icon: 'rss_feed',
    link: 'https://twitter.quasar.dev'
  },
  {
    title: 'Facebook',
    caption: '@QuasarFramework',
    icon: 'public',
    link: 'https://facebook.quasar.dev'
  },
  {
    title: 'Quasar Awesome',
    caption: 'Community Quasar projects',
    icon: 'favorite',
    link: 'https://awesome.quasar.dev'
  }
]

export default {
  name: 'MainLayout',
  components: {
    EssentialLink
  },
  created () {
  },
  methods: {
    handleWindow (flag) {
      if (flag === 1) {
        this.ipc.send('window-min')
      } else if (flag === 2) {
        this.ipc.send('window-max')
      } else if (flag === 3) {
        this.ipc.send('window-close')
      }
    }
  },
  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: linksData,
      ipc: require('electron').ipcRenderer
    }
  }
}
</script>
