<template>
  <div :class="{'app-wrapper openSidebar':showSidebar,'empty-home-wrapper':!showSidebar}">
    <sidebar v-show="showSidebar" class="sidebar-container" :class="{ hoverold: hoverSidebar }" @selfClose="hoverSidebar = false"
             @selfEnter="hoverSidebar = true" :isMenu.sync="isMenu"/>
    <div :class="{'main-container':showSidebar,telescopMenu:!isMenu}">
      <div class="fixed-header" v-show="showSidebar">
        <tags-view v-if="needTagsView" :isMenu.sync="isMenu"/>
      </div>
      <app-main v-if="showAppMain" ref="appMain"/>
    </div>
    <modifyPasswordDialog ref="modifyPasswordDialog"></modifyPasswordDialog>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import modifyPasswordDialog from "@base/views/user/user/modifyPasswordDialog";

export default {
  components: {
    AppMain: () => import('./components/AppMain'),
    Sidebar: () => import('./components/Sidebar'),
    TagsView: () => import('./components/TagsView'),
    modifyPasswordDialog
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      };
    },
    showSidebar() {
      let result = true
      return result;
    }
  },
  data() {
    return {
      hoverSidebar: false,
      showAppMain: false,
      showModifyPasswordDialog: true,
      passwordStatus: 2,
      isMenu:true
    };
  },
  created() {
    this.$http({
      url: USER_PREFIX + `/auth/resetPrincipal`,
      method: `post`,
      data: {},
      isLoading: true,
      success: res => {
      }
    });
    this.$baseEventBus.$on("triggerMenu",(value)=>{
      this.isMenu = !this.isMenu;
    });
  },
  async mounted() {
    if (sessionStorage.getItem('toHome') == '1') {
      sessionStorage.removeItem('toHome');
      await this.closeAllTags();
      this.$nextTick(() => {
        this.showAppMain = true;
      });
    } else {
      this.showAppMain = true;
    }
    this.$refs.modifyPasswordDialog.init();//校验是否需要修改密码
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', {withoutAnimation: false});
    },
    async closeAllTags() {
      return this.$store.dispatch('tagsView/delAllViews').then(({visitedViews}) => {
        this.$router.replace({path: '/redirect/home'});
      });
    }
  }
};
</script>

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

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  &.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: 10px;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth} - 20px);
  transition: width 0.28s;
  height: 33px;
  padding-top: 2px;
  //box-shadow:0 2px 6px rgba(0,0,0,0.04);
  //background:#FFF;
  // border-bottom: solid 2px $baseColor;
  display: -moz-box;
  display: -webkit-box;
  display: box;
}

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

.mobile .fixed-header {
  width: 100%;
}

.info-box {
  text-align: right;
  padding-right: 16px;
  line-height: 50px;
  margin-left: 18px;
  cursor: pointer;
  font-size: 12px;
}
</style>
<style>
.vxe-custom--body > li[title='　'] {
  display: none;
}
</style>
