<template>
  <div
    class="app-wrapper"
    :class="classObj"
    @mousemove="cmousemoved"
  >
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <navbar ref="nav" />
    <!-- 红色雷锋定制 navbar-->
    <div class="main-container">
      <sidebar
        class="sidebar-container" />
      <tags-view></tags-view>
      <app-main />
    </div>
  </div>
</template>

<script>
/*
import { Navbar, Sidebar, AppMain, TagsView } from './components'
*/
import { Navbar, Sidebar, AppMain, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { getSystemConfigList } from '@/api/systemConfig'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar () {
      return this.$store.state.app.sidebar
    },
    device () {
      return this.$store.state.app.device
    },
    classObj () {
      return {
        hideSidebar: !this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      count: 0,
      auto_logout_time: 0
    }
  },
  methods: {
    handleClickOutside () {
      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
    },
    cmousemoved () {
      this.count = 0
    },
    clearTimer () {
      clearInterval(window.myTimer)
      window.myTimer = null
    },
    setTimer () {
      console.log('start count')
      this.count = 0
      if (!window.myTimer) {
        window.myTimer = window.setInterval(this.cookieTimeout, 1000)
      }
    },
    cookieTimeout () {
    // 判断用户X分钟无操作就自动登出
      this.count++
      console.log(`${this.count}s not used`)
      if (this.count === this.auto_logout_time * 60) {
        this.$message.error(`系统已经${this.auto_logout_time}分钟无操作,自动登出`)
        this.$refs.nav.logout()
      }
    }
  },
  async mounted () {
    const res = await getSystemConfigList()
    /*
    const auto_logout_switch = res.list.find(v => v.configKey === 'auto_logout_switch').configValue // 是否超时自动登出
    const auto_logout_time = res.list.find(v => v.configKey === 'auto_logout_time').configValue // 超时自动登出时间(分钟)
    */
    const auto_logout_switch = (res.data || []).find(v => v.configKey === 'auto_logout_switch')?.configValue // 是否超时自动登出
    const auto_logout_time = (res.data || []).find(v => v.configKey === 'auto_logout_time')?.configValue // 超时自动登出时间(分钟)
    if (auto_logout_switch === '1') { // 一段时间无操作后自动登出
      this.auto_logout_time = auto_logout_time
      this.setTimer()
    }
    const union_invoice_url_item = (res.data || []).find(v => v.configKey === 'union_invoice_url')
    if (union_invoice_url_item && union_invoice_url_item.configValue) {
      this.$localStore.set('union_invoice_url', union_invoice_url_item.configValue)
    } else {
      this.$localStore.set('union_invoice_url', '')
    }
  },
  beforeDestroy () {
    this.clearTimer()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "@/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
</style>
