<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <router-view v-if="isRouterAlive"/>
      <audio ref="mmPlayer"></audio>
    </div>
  </a-locale-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from '@/utils/device'
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  provide(){
    return {
      reload:this.reload
    }
  },
  data() {
    return {
      locale: zhCN,
      isRouterAlive:true
    }
  },
  created() {
    let that = this
    enquireScreen((deviceType) => {
      // tablet
      if (deviceType === 0) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', true)
      }
      // mobile
      else if (deviceType === 1) {
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      } else {
        that.$store.commit('TOGGLE_DEVICE', 'desktop')
        that.$store.dispatch('setSidebar', true)
      }
    })

    this.$nextTick(() => {
      this.setAudioele(this.$refs.mmPlayer)

    })
  },
  methods: {
    ...mapMutations({
      setPlaying: 'SET_PLAYING',
      setPlay: 'SET_PLAYLIST',
      setCurrentIndex: 'SET_CURRENTINDEX',
      setAudioele: 'SET_AUDIOELE',
    }),
    ...mapGetters(['userInfo']),
    reload(){
      this.isRouterAlive = false
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  },
}
</script>
<style>
#app {
  height: 100%;
  min-width: 1280px;
}

body {
  -webkit-user-select: text !important;
}

* {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  height: 39px !important;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  height: 39px !important;
  border-bottom: 1px solid #1890ff !important;
}
.layout .header {
  background-color: #0b2040 !important;
  background: #0b2040 !important;
}
</style>