// 主页 只是个包含底部菜单以及模块内容
<template lang="pug">
  .vm-main
    audio(id="myAudio"
          ref="myAudio"
          :src="musicPlayingList && musicPlayingList.id ? 'http://music.163.com/song/media/outer/url?id=' + musicPlayingList.id + '.mp3' : ''")
    router-link.fix-music-btn.icon-menu.easy-click(v-show="isPlayRouter", to="/main/play")
    Nav
    transition(:name="$route.meta.transition")
      keep-alive
        router-view(v-if="$route.meta.keepAlive" class="model-view" :class="{'isFull': $route.meta.isFull}")
    transition(:name="$route.meta.transition")
      router-view(v-if="!$route.meta.keepAlive" class="model-view" :class="{'isFull': $route.meta.isFull}")
</template>
<script>
import Nav from 'components/nav'
import music from 'utils/music.js'
import { mapState } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
    }
  },
  components: {
    Nav
  },
  created () {
    this.$dutils.utils.console(' this is vue-music 2.0 ', {
      isMax: false,
      colors: ['#d299c2', '#fef9d7']
    })
  },
  computed: {
    isPlayRouter () {
      return (!this.$route.meta.hideFixedMenu && !this.$dutils.exp.isEmptyObject(this.musicPlayingList) && this.menuStatus)
    },
    ...mapState({
      musicPlayingList: state => state.Music['MUSIC_PLAYING_DETAIL'],
      menuStatus: state => state.Music['MUSIC_SHOW_FIXED_MENU']
    })
  },
  methods: {
  },
  // watch: {
  //   $route (to, from) {
  //     console.log(to.path.includes('/main/play'))
  //     console.log(from.path.includes('/main/play'))
  //   }
  // },
  mounted () {
    music.initAudioEvent(this.$refs.myAudio)
  }
}
</script>
<style lang="scss" scoped>
.vm-main{
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  .fix-music-btn{
    position: fixed;
    top: 0;
    right: 0;
    height: $auto_h;
    width: p2r(0.7rem);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 p2r(0.1rem);
    font-size: $f_auto_l;
    color: $text_active;
    transition: (all 0.3s);
    z-index: 11;
  }
  .model-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: $NAV_H;
    &.isFull{
      bottom: 0;
    }
  }
  .cp-nav{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: $NAV_H;
  }
  audio{
    display: none;
  }
}
</style>
