<template>
  <div id="app" :style="{background:$store.state.typeFire === 0 ? '#002976' :''}">
    <header-view class="headerView" v-if="$store.state.typeFire === 0"></header-view>
    <header-view-af class="headerView-af" v-else></header-view-af>
    <router-view :class="$store.state.typeFire === 0 ? 'content' : 'content-AF'" />
    <footer-view-af v-if="$store.state.typeFire === 1" class="footerViewAf"></footer-view-af>
  </div>
</template>

<script>
import headerView from './components/SD-school/header-view'
import headerViewAf from './components/AF-exhibition/header-view'
import footerViewAf from './components/AF-exhibition/footer'
export default {
  components:{headerView,headerViewAf,footerViewAf},
  data() {
    return {
      resizeTime: true,
    };
  },
  mounted() {
    this.getWeater()
    window.addEventListener("resize", () => this.resizeTimeActions(), true);
  },
  methods: {
    resizeTimeActions() {
      if (!this.resizeTime) return;
      this.resizeTime = false;
      setTimeout(() => {
        this.resizeTime = true;
        this.$store.commit("changClient",  document.documentElement.clientWidth + document.documentElement.clientHeight);
      }, 300);
    },
    async getWeater(){
        let res = await this.$axios.get('/top/listWeather?'+this.$qs.stringify({
        area: '上海市'
      }))
      if(res.success){
        this.$store.commit("changWeater", res.data.showapi_res_body.now);
      }
    }
  },
};
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  background: url('./assets/image/bg.jpg');
  color: #fff;
  display: flex;
  flex-direction: column;
  .content{
    width: 100%;
    height: calc(100% - 60px);
  }
  .content-AF{
    width: 100%;
    height: calc(100% - 245px);
    padding-bottom: 0px;
  }
  .headerView{
    width: 100%;
    height: 60px;
  }
  .headerView-af{
    width: 100%;
    height: 85px;
  }
  .footerViewAf{
    width: 100%;
    height: 160px;
    padding: 10px 30px 20px;
  }
}
</style>
