<template>
  <div class="index" id="page" bubble="true">
    <div class="btns" @click="change">
      <div class="button" id="btn1" :class="[Activebtn === 1? "active" : ""]">
        <text class="text"></text>
      </div>
      <div class="button" id="btn2" :class="[Activebtn === 2? "active" : ""]" >
        <text class="text"></text>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex"

export default {
  name: "App",
  data () {
    return {
      Activebtn: 1
    }
  },
  computed: mapState(["items"]),
  methods: {
    change (e) {
      if (e.target.parentNode.id === "btn1" && this.Activebtn === 2) {
        
        this.Activebtn = 1
        this.$router.push("/recommed")
      } else if (e.target.parentNode.id === "btn2" && this.Activebtn === 1) {
        
        this.Activebtn = 2
        this.$router.push("/hot")
      }
    }
  },
  created () {
    const obj = {url: "/api/feeds", pageNumber: 1, pageSize: 10}
    this.$store.dispatch("update", obj)
  }
}
</script>

<style scoped>
.btns{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 87.5px;
}
.button{
  width: 375px;
  flex: auto;
  justify-content: center;
  background-color: white;
}
.text{
  flex: auto;
  text-align: center;
  font-size: 50px;
}
.index{
  background-color: rgb(240, 234, 234);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.active{
  border-bottom-width: 5px;
  border-bottom-color: rgb(2, 191, 224);
}
</style>