<template>
  <div>    
    <div class="wrap">
      <div class="theme-container container"
        :class="pageClasses"
        @touchstart="onTouchStart"
        @touchend="onTouchEnd">
        <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
        <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
        <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar"/>
        <div class="page-container" :style="pageContainerClasses">
          <!-- custom layout -->
          <div class="custom-layout" v-if="$page.frontmatter.layout">
            <component :is="$page.frontmatter.layout"/>
          </div>
          <!-- Activity layout -->
          <Activity v-else-if="$page.frontmatter.activity"/>
          <!-- article list -->
          <ArticleGroup v-else-if="isRoot" :page-items="pageItems" />
          <!-- nav with layout list -->
          <ArticleGroup v-else-if="isNavLayout" :page-items="pageItems" />
          <!-- tags -->
          <Tags v-else-if="isTag" />
          <!-- article page -->
          <Page v-else :sidebar-items="sidebarItems" :ismini="ismini" v-on:changhemini="changhemini"/>
          <!-- pagation selector -->
          <Pagation 
            v-if="isRoot || isNavLayout" 
            :page-items="pages" 
            @change="page => currentPage = page" />
        </div>
        <ToolGroup v-if="!isNoToolGroup" />
        <div class="aplay-fix" v-bind:class="{ articleActive: isActive }">
          <div v-bind:class="{ AplayerContent: isActive }">
            <aplayer 
              :autoplay ="isautoplay"
              :float = "isfloat"
              :music = "currentMusic"
              :list = "musicList"
              :showLrc = "isShowLrc"
              :mini = 'ismini'
              :listMaxHeight = 'listMaxHeight'
              repeat = "repeat-all"
              v-if = "ismusic"
            /> 
          </div>           
        </div>
      </div>
      <SWUpdatePopup :updateEvent="swUpdateEvent" />
      <BackTop></BackTop>
    </div>
    <div class="background-mask" :style="wrapClasses"></div>
    <footer class="footertext">
      <span>{{hitokoto}}</span>
    </footer>    
  </div>
</template>

<script>
import Vue from "vue";
import nprogress from "nprogress";
import Activity from "./layout/Activity.vue";
import Navbar from "./components/Navbar.vue";
import Page from "./Page.vue";
import Sidebar from "./components/Sidebar.vue";
import ToolGroup from "./components/ToolGroup.vue";
import ArticleGroup from './components/ArticleGroup.vue'
import LeetCodeGroup from './components/LeetCodeGroup.vue'
import Pagation from './components/Pagation.vue'
import SWUpdatePopup from './components/SWUpdatePopup.vue'
import Tags from './components/Tags.vue'
import BackTop from './components/BackTop.vue'
import navLayoutMixin from './lib/navLayout.mixin'
import { resolveSidebarItems, getTitle } from "./lib/util";
import axios from 'axios';
import Aplayer from 'vue-aplayer';

export default {
  mixins: [navLayoutMixin],
  components: { 
    Activity, 
    Page, 
    Sidebar,
    Navbar, 
    ToolGroup, 
    ArticleGroup, 
    LeetCodeGroup, 
    Pagation,
    Tags,
    SWUpdatePopup,
    BackTop,
    Aplayer
  },
  data() {
    return {
      isSidebarOpen: false,
      currentPage: 1,
      swUpdateEvent: null,
      hitokoto:'',
      isfloat:true,
      isautoplay:false,
      currentMusic:{},
      musicList:[],
      ismusic:false,
      isShowLrc:true,
      ismini:true,
      isActive:false,
      listMaxHeight:'270px'
    };
  },
  watch: {
    $route(to,from){
      if(to.path === '/'){
        this.ismini = true
        this.isActive = false
        this.isautoplay = false
      }
    }
  },
  computed: {
    isRoot() {
      return this.$route.meta.root || this.$route.path === this.$rootOptions.path;
    },
    isTag() {
      return this.$route.meta.tag;
    },
    isNoToolGroup() {
      return this.$page.frontmatter.layout || this.$page.frontmatter.activity
    },
    pageItems() {          
      const start = (this.currentPage - 1) * this.perPage
      const end = this.currentPage * this.perPage
      return this.pages.filter((page, i) => (i >= start && i < end))
    },
    shouldShowNavbar() {
      const { themeConfig } = this.$site;
      return (
        this.$site.title ||
        themeConfig.logo ||
        themeConfig.repo ||
        themeConfig.nav
      );
    },
    shouldShowSidebar() {
      const { themeConfig } = this.$site;
      const { frontmatter } = this.$page;
      return (
        !frontmatter.layout &&
        !frontmatter.activity &&
        frontmatter.sidebar !== false &&
        this.sidebarItems.length
      );
    },
    sidebarItems() {
      return resolveSidebarItems(
        this.$page,
        this.$route,
        this.$site,
        this.$localePath
      );
    },
    // when Activity Component, dont show tool group and expand the page container's width to 100%
    pageContainerClasses() {
      return !this.isNoToolGroup ? {} : { width: '100%' }
    },
    pageClasses() {
      const userPageClass = this.$page.frontmatter.pageClass;
      return [
        {
          "no-navbar": !this.shouldShowNavbar,
          "sidebar-open": this.isSidebarOpen,
          "no-sidebar": !this.shouldShowSidebar,
        },
        userPageClass
      ];
    },
    wrapClasses() {
      const { themeConfig } = this.$site;
      return themeConfig.background
        ? {
            background:
              'url("' +
              `${this.$withBase(themeConfig.background)}` +
              '") no-repeat fixed'
          }
        : { background: "#f6f6f6" };
    },
    footerText(){
      return this.hitokoto
    }
  },
  created() {    
    if (this.$ssrContext) {
      this.$ssrContext.title = getTitle(this.$title, this.$page);
      this.$ssrContext.lang = this.$lang;
      this.$ssrContext.description =
        this.$page.description || this.$description;
    }
    //获取音乐列表
    this.getMusic();
    
  },
  mounted() {
    // when swtich tab, change the current page
    const updateCurPage = () => {
      this.currentPage = 1
    }
    this.$watch('pages', updateCurPage)
    
    // configure progress bar
    nprogress.configure({ showSpinner: false });

    this.$router.beforeEach((to, from, next) => {
      if (to.path !== from.path && !Vue.component(to.name)) {
        nprogress.start();
      }
      next();
    });

    this.$router.afterEach(() => {
      nprogress.done();
      this.isSidebarOpen = false;
    });

    this.$on('sw-updated', this.onSWUpdated);

    axios.get('https://api.imjad.cn/hitokoto/').then(data=>{
      this.hitokoto = data.data
    });    
  },
  methods: {
    toggleSidebar(to) {
      this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen;
    },
    // side swipe
    onTouchStart(e) {
      this.touchStart = {
        x: e.changedTouches[0].clientX,
        y: e.changedTouches[0].clientY
      };
    },
    onTouchEnd(e) {
      const dx = e.changedTouches[0].clientX - this.touchStart.x;
      const dy = e.changedTouches[0].clientY - this.touchStart.y;
      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
        if (dx > 0 && this.touchStart.x <= 80) {
          this.toggleSidebar(true);
        } else {
          this.toggleSidebar(false);
        }
      }
    },
    onSWUpdated(e) {
      console.log('pwa update: ', e);
      this.swUpdateEvent = e;
    },
    async getMusic(){
      const {data} = await axios.get('https://api.imjad.cn/cloudmusic/?type=playlist&id=466159559')
      let musicId = [];
      let musicList = [];
      if(data.code === 200){
        for(let item in data.playlist.trackIds){
          musicId.push(data.playlist.trackIds[item].id)          
        }
        let num = 0;
        musicId.forEach(async (item,index,array)=>{
          num ++;
          let {data} = await axios.get(`https://api.imjad.cn/cloudmusic/?type=detail&&id=${item}`)
          let arr = await axios.get(`https://api.imjad.cn/cloudmusic/?type=song&id=${data.songs[0].id}&br=320000`)          
          let lrc = await axios.get(`https://api.imjad.cn/cloudmusic/?type=lyric&id=${data.songs[0].id}`)
          musicList.push({
            'title':data.songs[0].name,
            'artist':data.songs[0].ar[0].name,
            'src':arr.data.data[0].url,
            'pic':data.songs[0].al.picUrl,
            'lrc':lrc.data.lrc.lyric
          })
          if(num === array.length){
            this.musicList = musicList;
            this.currentMusic = musicList[0];
            this.ismusic = true;
          }
        })
      }   
    },
    changhemini(){
      this.ismini = false
      this.isActive = true
      this.isautoplay = true
    },
    changheminiMobile(){
      this.isActive = true
      this.isautoplay = true
    }
  }
};
</script>

<style src="prismjs/themes/prism-tomorrow.css"></style>
<style src="./styles/theme.styl" lang="stylus"></style>