<template>
  <div :class="[classObj, 'app-wrapper', isDarkTheme()?'app-wrapper-dark':'']">
    <div
      v-if="device==='mobile'&&sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <sidebar class="sidebar-container" />
    <div
      :class="{hasTagsView:needTagsView && showTags}"
      class="main-container"
    >
      <div :class="{'fixed-header':fixedHeader}">
        <navbar
          ref="navbar"
          @showRightPanel="showRightPanel"
        />
        <tags-view
          v-if="needTagsView"
          v-show="showTags"
        />
      </div>
      <app-main />
      <el-tooltip
        placement="top"
        :content="$t('ec.route.backToTop')"
      >
        <back-to-top
          :custom-style="myBackToTopStyle"
          :visibility-height="300"
          :back-position="50"
          transition-name="fade"
        />
      </el-tooltip>
      <right-panel
        v-if="showSettings"
        ref="rightPanel"
      >
        <settings />
      </right-panel>
      <theme-picker v-show="false" />
    </div>
  </div>
</template>

<script>
import RightPanel from 'ecip-web/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import BackToTop from 'ecip-web/components/BackToTop'
import ThemePicker from 'ecip-web/components/ThemePicker'

export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView,
    BackToTop,
    ThemePicker
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      sidebar: (state) => state.app.sidebar,
      device: (state) => state.app.device,
      showTags: (state) => state.app.showTags !== false,
      showSidebar: (state) => state.app.showSidebar !== false,
      showSettings: (state) => state.settings.showSettings,
      needTagsView: (state) => state.settings.tagsView,
      fixedHeader: (state) => state.settings.fixedHeader,
      defaultLayoutClass: (state) =>
        'defaultLayout--' + state.settings.defaultLayout,
      navbarLayoutTypeClass: (state) =>
        state.settings.darkTheme
          ? ''
          : 'navbarLayoutType--' + state.settings.navbarLayoutType,
      sidebarLayoutSkinClass: (state) =>
        state.settings.darkTheme
          ? ''
          : 'sidebarLayoutSkin--' + state.settings.sidebarLayoutSkin
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        showSidebar: this.showSidebar,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile',
        [this.defaultLayoutClass]: true,
        [this.navbarLayoutTypeClass]: true,
        [this.sidebarLayoutSkinClass]: true
      }
    },
    documentClientHeight: {
      get() {
        return this.$store.state.app.documentClientHeight
      },
      set(val) {
        this.$store.commit('app/SET_DOCUMENT_CLIENT_HEIGHT', val)
      }
    }
  },
  mounted() {
    // this.getUserInfo()
    // this.getConfig()
    this.resetDocumentClientHeight()
    /* if (!localStorage.getItem('defaultTheme')) {
      this.$store.commit('config/updateDefaultTheme', localStorage.getItem('defaultTheme'))
    }*/
  },
  data() {
    return {
      // customizable button style, show/hide critical point, return position
      myBackToTopStyle: {
        right: '10px',
        bottom: '20px',
        width: '40px',
        height: '40px',
        'z-index': '10001',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1' // 按钮的背景颜色 The background color of the button
      }
    }
  },
  methods: {
    isDarkTheme() {
      const bd = document.getElementsByTagName('body')[0]
      if (this.$store.state.settings.darkTheme) {
        bd.classList.add('theme-dark')
      } else {
        bd.classList.remove('theme-dark')
      }
      return this.$store.state.settings.darkTheme
    },
    showRightPanel(show) {
      this.$refs.rightPanel.changeSettings(show)
    },
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    // 重置窗口可视高度
    resetDocumentClientHeight() {
      this.documentClientHeight = document.documentElement['clientHeight']
      window.onresize = () => {
        if (!this.$refs.navbar) {
          return
        }
        this.documentClientHeight = document.documentElement['clientHeight']
        const _defaultLayout = this.$refs.navbar.defaultLayout
        if (_defaultLayout === 'top' && this.device !== 'mobile') {
          this.$refs.navbar.fixTopMenu()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~ecip-web/styles/mixin.scss';
@import '~ecip-web/styles/variables.scss';

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
</style>
