<template>
<div class="tabs-wrapper">
  <Widget classes="iconhome" :class="active(0)" :index="0" desc="首页" @click="onClick"></Widget>
  <Widget classes="iconcategoary" :class="active(1)" :index="1" desc="分类" @click="onClick"></Widget>
  <Widget classes="iconarticle" :class="active(4)" :index="4" desc="社区" @click="onClick"></Widget>
  <Widget classes="iconmessage" :class="active(2)" :index="2" desc="消息" @click="onClick">
    <i v-if="showMsg" class="tipdot"></i>
  </Widget>
  <Widget classes="iconuser" :class="active(3)" :index="3" desc="我的" @click="onClick"></Widget>
</div>
</template>

<script>

import { createNamespacedHelpers, mapState} from 'vuex';

const { mapState: mapChannelState, mapActions } = createNamespacedHelpers('home/channel');
import Widget from './widget';

export default {
  name: 'IndexTab',
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  components: {
    Widget
  },
  computed: {
    active() {
      return (i) => {
        return {
          active: this.value === i
        };
      };
    },
    ...mapChannelState(['showMsg']),
    ...mapState(['yoho'])
  },
  activated() {
    this.$sdk.getUser().then(user => {
      if (user.uid) {
        this.getAllInboxCatInfo();
      }
    });
  },
  watch: {
    'yoho.context.isLogin': function(val) {
      if (val) {
        this.getAllInboxCatInfo();
      }
    }
  },
  methods: {
    ...mapActions(['getAllInboxCatInfo']),
    onClick(index) {
      if (this.value !== index) {
        this.$emit('click', index);
      }
    }
  }
};
</script>

<style lang="scss" scoped>

.tabs-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 46px;
}

.active {
  color: #08304b !important;
}
</style>