<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="iconmessage" :class="active(2)" :index="2" desc="消息" @click="onClick"></Widget>
  <Widget classes="iconuser" :class="active(3)" :index="3" desc="我的" @click="onClick"></Widget>
</div>
</template>

<script>

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
        };
      };
    }
  },
  methods: {
    onClick(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>