<!--Created by 熊超超 on 2018/4/26.-->
<template>
  <div class="h-100" data-flex="dir:top box:first" v-loading="init">
    <template v-if="!init">
      <nav-view data-flex-box="0"></nav-view>
      <div data-flex="" class="h-100" data-flex-box="1">
        <div data-flex="" data-flex-box="0"><menu-view/></div>
        <div data-flex-box="0" data-flex="cross:center" @click="toggleMenu" class="cp arrow">
          <xt-icon name="arrow" size="12" :rotate="menuExpand ? 180 : 0"></xt-icon>
        </div>
        <div data-flex="dir:top" data-flex-box="1">
          <tabs-view data-flex-box="1"></tabs-view>
          <xt-dialog></xt-dialog>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import MenuView from './fragment/MenuView.vue'
import NavView from './fragment/NavView.vue'
import TabsView from './fragment/TabsView.vue'
import XtDialog from '../components/XtDialog.vue'
import {mapState} from 'vuex'

export default {
  components: { MenuView, NavView, TabsView, XtDialog },
  data() {
    return {
      init: false,
    }
  },
  computed: {
    ...mapState(['menuExpand']),
  },
  watch: {
    $route: {
      handler(val, old = {}) {
        if (val.fullPath !== old.fullPath) {
          this.$tab.add(val.fullPath)
        }
      },
    },
  },
  async created () {
    this.init = true
    await this.initData()
    this.init = false
    // 使用者传入了afterCreated的时候,此时执行
    if (this.$config.afterCreated) {
      this.$config.afterCreated({store: this.$store, router: this.$router})
    }
  },
  methods: {
    initData() {
      // 需要初始化的数据放在promise数组
      const ps = [
        this.$store.dispatch(this.$config?.actions?.userInfo || 'getUserInfo'), // 用户信息
      ]
      // 使用者传入了beforeCreated的时候，加到promise里面一起执行
      if (this.$config.beforeCreated) {
        ps.push(this.$config.beforeCreated({store: this.$store, router: this.$router}))
      }
      return Promise.all(ps).then(res => {
        if (res[0] && res[0].data) {
          this.$store.commit('updateUserInfo', res[0].data)
        }
      })
    },
    toggleMenu() {
      this.$store.commit('update', {menuExpand: !this.menuExpand})
    }
  },
}
</script>
<style lang="scss" scoped>
  .arrow{
    width: 12px;
  }
</style>
