<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>