<template>
  <div class="operation">
    <div
      v-for="(data, i) in $store.state.operateList"
      :key="data.title"
      :style="getStyle(i)">
      <p>{{data.title}}</p>
      <p><m-count autoUpdate style="color:#00f2ff" :value="+data.num" :decimal="0"/></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Operation',
  methods: {
    getStyle(i) {
      if ((i + 1) % 3 != 0) {
        return {
          'border-right': '0.1rem solid rgba(71, 179, 255, 0.3)'
        }
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
.operation
  display flex
  flex-wrap wrap
  height 100%
  width 100%
  >div
    display flex
    align-items center
    padding 0 0.5rem
    justify-content space-between
    width 33%
</style>

