<template>
  <div class="bottom-tabs">
    <div class="btns">
      <div v-for="(btn, i) in btns" :key="i">
        <m-count :style="`font-size:1.6rem;color:${colors[i]};`" :value="btn.count" :decimal="0"/>
        <p>{{btn.name}}</p>
      </div>
      <div class="btn" @click="$emit('click')">
        <m-count style="font-size:1.6rem;color:#00f2ff;" :value="24" :decimal="0"/>
        <p>管理要素明细</p>
      </div>
    </div>
    <img class="bar" :src="require(`@/assets/images/tab-bar.png`)">
  </div>
</template>

<script>
export default {
  name: 'BottomTabs',
  data() {
    return {
      btns: [
        {name: '任务总数', count: 7},
        {name: '一级响应', count: 4},
        {name: '二级响应', count: 1},
        {name: '处置完成', count: 2},
      ],
      colors: ['#00f2ff', 'orange', '#D82B2B', '#82DF12'],
    }
  },
}
</script>

<style lang="stylus" scoped>
.bottom-tabs
  width 40%
  position fixed
  bottom 0
  left 50%
  transform translate(-50%)
  font-weight bold
  .btns
    display flex
    justify-content space-around
    padding 0 1rem
    >div
      text-align center
      &.btn
        cursor pointer
        &:hover
          color $edgeColor
  .bar
    width 100%
    height 1.2rem
</style>
