<template>
  <div>
    <header-nav :issearch="true" :needgetuser="true">
      <template slot="header-title">寄托天下论坛</template>
    </header-nav>
    <nav>
      <router-link :to="recommendURl" exact>推荐阅读</router-link>
      <router-link :to="collect" exact>收藏的版块</router-link>
      <router-link :to="allSections" exact>全部版块</router-link>
      <!-- <router-link to="/allSections" exact>全部版块</router-link> -->
    </nav>
    <!-- 发帖子 -->
    <div class="publish flexcolumn flexcenter" @click.stop="$skipUrl(invitationPost)">
      <svg-icon icon-class="add" class-name="icon-publish"></svg-icon>
      发帖
    </div>
    <router-view :key="key" />
  </div>
</template>

<script>
import HeaderNav from "@/components/HeaderNav";
import { invitationPost } from '@/utils/bizarreUrl'
export default {
  name: "Index",
  data() {
    return {
      favorite: [],  // 收藏
      recommend: [], // 推荐
      fid: null,
      allSections: "/allSections",
      collect: "/collect",
      recommendURl: "/recommend",
      invitationPost,  // 发布帖子

    };
  },

  computed: {
    key() {
      return this.$route.path + Math.random()
    }
  },

  watch: {
    "$store.state.homeRequestState": {
      handler(newV, oldV) {
        let { favoriteList, recommendList } = this.$store.state
        this.favorite = favoriteList
        this.recommend = recommendList
      },
      immediate: true
    },
    '$route': {
      handler(to, from) {
        let fullPath = to.fullPath
        if (fullPath.indexOf('allSections') != -1) this.allSections = fullPath
        if (fullPath.indexOf('collect') != -1) this.collect = fullPath
        if (fullPath.indexOf('recommend') != -1) this.recommendURl = fullPath
      },
      immediate: true

    }
  },
  mounted() {
  },
  components: {
    HeaderNav,
  },
  methods: {

  }
};
</script>

<style lang="scss">
// 导航
nav {
  display: flex;
  justify-content: center;
  align-self: center;
  border-radius: 2.56rem;
  height: 1.28rem;
  line-height: 1.28rem;
  flex-direction: row;
  background-color: rgba(235, 235, 235, 1);
  margin: 1.5rem 0.35rem 0.2rem;

  a {
    flex: 1;
    font-size: 0.4rem;
    border-radius: 2.56rem;
    text-align: center;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
    color: #555;

    &.router-link-exact-active {
      color: #000;
      font-weight: bolder;
      background-color: rgba(80, 227, 194, 1);
    }
  }
}

// 发帖按钮
.publish {
  background-color: rgba(253, 223, 109, 1);
  width: 1.4667rem;
  height: 1.4667rem;
  border-radius: 2.56rem;
  position: fixed;
  // right: 0.4rem;
  right: calc((100vw - 10rem)/2 + 0.4rem);
  bottom: 10%;
  font-size: 0.32rem;
  z-index: 6;
  color: #000;

  .icon-publish {
    width: 0.4rem;
    height: 0.4rem;
    margin-bottom: 0.1rem;
  }
}
</style>