<template>
  <div class="container">
    <proginn-header v-if="isPC != -1 && isPC"/>
    <wx-header v-if="isWeixin"></wx-header>
    <nuxt class="main"/>
    <proginn-footer v-if="isPC != -1 && isPC"/>
  </div>
</template>

<script>
import ProginnHeader from '@/components/header'
import ProginnFooter from '@/components/footer'
import WxHeader from '@/components/wx_header'
import { mapState, mapMutations } from 'vuex'

export default {
  components: {
    ProginnHeader,
    ProginnFooter,
    WxHeader,
  },
  computed: {
    ...mapState(['isPC', `isWeixin`]),
  },
  mounted() {
    this.checkTerminal()
    window.addEventListener('resize', this.checkInnerWidth)
  },
  methods: {
    ...mapMutations(['updateIsPC', 'updateIsWeixin']),
    checkTerminal() {
      this.updateIsPC({
        isPC: window.innerWidth > 960,
      })
      this.updateIsWeixin({
        isWeixin: window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
      })
    },
  }
}
</script>


<style>
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main {
  min-width: 1000px;
  min-height: calc(100vh - 376px);
  margin: 20px 0 30px;
}
</style>
