<template>
  <div class="repair">
    <m-brief
    :class="`card ${data.key == curKey ? 'on' : ''}`"
    @click.native="handleClick(data.key)"
    v-for="(data,i) in $store.state.repairList"
    :key="i"
    :label="data.title"
    :icon="require(`@/assets/images/${data.img}`) "
    :unit="`/ ${data.allNum} 个`"
    :count="+data.num"
    countColor="gold"
    size="1.4rem"
    />
  </div>
</template>

<script>
export default {
  name: 'repair',
  computed: {
    curKey() {
      return this.$store.state.curRepair
    },
  },
  methods: {
    handleClick(key) {
      if (key === this.curKey) {
        this.$store.commit('SET_CURREPAIR', null)
      } else {
        this.$store.commit('SET_CURREPAIR', key)
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.repair
  display flex
  align-items center
  width 100%
  height 100%
  .card
    width 50%
    padding-left 1rem
    cursor pointer
    &:hover,
    &.on
      background rgba(0,0,0,0.3)
    &.on
      outline .1rem solid $color-blue
</style>
