<template>
  <div class="global-home" v-if="isShow">
      <my-head class="my-head" @setAsideMenu="setAsideMenu"></my-head>
      <!-- <my-nav class="aside" :class="{'spread': isSpread}" :isSpread="isSpread"></my-nav> -->

      <div class="fp-content">
        <router-view>
        </router-view>
      </div>
  </div>
</template>

<script>
import MyHead from './Head.vue'
import MyNav from './Nav'
export default {
  components: {
    MyHead,
    MyNav
  },

  mixins: [],

  props: {

  },

  data () {
    return {
      isSpread: false,
      isShow: false
    }
  },

  computed: {

  },

  mounted () {
    const pid = this.$route.query.id || localStorage.getItem('projectId') || this.$store.state.projId
    console.log(pid)
    this.$store.commit('setProId', pid)
    // if (pid) {
    //   this.$store.commit('setSecret', '')
    //   localStorage.setItem('secret', '')
    // }
    localStorage.setItem('projectId', pid)
    this.isShow = true
  },

  methods: {
    setAsideMenu (val) {
      this.isSpread = val
    }
  }

}
</script>

<style scoped lang="less" >
.global-home {
  font-size: 15px;
  font-family: "MicrosoftYaHei";
  .my-head {
    height: 60px;
    position: fixed;
    top: 0;
  }
  .aside {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 81px;
    border-right: 1px solid #ebecf0;
    transition: all 0.3s ease-in-out;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
  }
  .fp-content {
    // margin-left: 80px;
    padding: 80px 20px 20px 20px;
    transition: all 0.3s ease-in-out;
    //background: #eeeff3;
  }
  // & > .aside:hover {
  //   width: 300px;
  //   background: #fff;
  // }
  .spread {
    width: 260px;
    background: #fff;
  }
}
</style>
