<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container hasTagsView">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view />
      </div>
      <app-main />

      <div class="floatDiv" @click="gotoTicketPage" v-if="count.total_count>0">
        <el-badge :value="count.total_count" class="item ">
          <el-icon class="el-icon-s-management" style="font-size: 30px;color: #409EFF;padding-top: 12px;"></el-icon>
        </el-badge>
        <div class="typeWrap">
          <div class="detailItem" v-for="item in count.details" :key="item.workflow">{{item.workflow__name}}：{{item.count}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain,TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth' // get token from cookie
export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView,
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapGetters([
      'count',
    ]),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  data(){
    return{
      timer:null
    }
  },
  mounted() {
    let hasToken = getToken();
    if (hasToken) {
      this.$store.dispatch("user/getCount", {});
    }
    /*this.timer = window.setInterval(() => {
      setTimeout(() => {
        if (hasToken) {
          this.$store.dispatch("user/getCount", {});
        }
      },0)
    },5000)*/
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },

    gotoTicketPage(){
      let path = this.$route.path;
      if(path==='/workflow/ticket'){
        this.$message.success("已在当前页面");
      }else{
        this.$router.push({name:'ticket',params:{}})
      }
    },
  },

  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/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%;
  }
  .floatDiv{
    position: fixed;
    z-index: 3000;
    bottom: 10vh;
    right: 5vh;
    width: 50px;
    height: 50px;
    cursor: pointer;
    text-align: center;
    line-height: 50px;
    border-radius: 26px;
    background: #ffffff;
    border: 2px solid #409EFF;
    box-shadow: 0 0 8px 3px rgba(0,0,0,0.1);
  }
  .typeWrap{
    display: none;
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 0 7px 2px #d3dce6;
    position: absolute;
    right: 60px;
    bottom: 0;
  }
  .floatDiv:hover>.typeWrap{
    display: block;
  }
  .detailItem{
    height: 30px;
    color: #888888;
    line-height: 30px;
    width: max-content;
  }
</style>
