<template>
  <div class="disease-summary">
    <div class="btn-wrapper">
      <div v-for="btn in btns" :key="btn" @click="handleSelect(btn)" :class="`${btn === curBtn ? 'on' : ''}`">{{btn}}</div>
    </div>
    <div class="card-box">
      <BorderBox v-for="data in $store.state.diseaseSummary" :key="data.title">
        <h3>{{data.title}}</h3>
        <div class="wrapper">
          <div v-for="item in data.data" :key="item.title">
            <p>{{item.title}}</p>
            <m-count class="count" :value="item.count" :decimal="0" color="#00f2ff"/>
          </div>
        </div>
      </BorderBox>
    </div>
  </div>
</template>

<script>
import BorderBox from '../border-box'
export default {
  name: 'DiseaseSum',
  components: {
    BorderBox,
  },
  data() {
    return {
      curBtn: '测报点',
      btns: ['测报点', '鱼病医院'],
    }
  },
  methods: {
    handleSelect(name) {
      this.curBtn = name
      if (name === '鱼病医院') {
        this.$store.dispatch('getAquafarmPoints', 'hospital')
      } else {
        this.$store.dispatch('getAquafarmPoints')
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
$color = #25e7f6
.disease-summary
  width 100%
  height 100%
  z-index 999
  .btn-wrapper
    width 50%
    margin 0 auto
    display flex
    align-items center
    justify-content center
    color #fff
    >div
      cursor pointer
      padding .3rem 1rem
      border .1rem solid $color
      width 7rem
      text-align center
      &:first-child
        border-radius 1.5rem 0 0 0
        border-right none
      &:last-child
        border-radius 0 1.5rem 0 0
      &:hover,
      &.on
        color #fff
        background $color-map()
      &.on
        color $color
        font-weight bold
  .card-box
    display flex
    flex-wrap wrap
    text-align center
    h3
      margin-bottom .5rem
    .count
      font-family $font-pang
      font-size 1.4rem !important
    >div
      flex 0 0 45%
      margin 1rem
  .wrapper
    display flex
    justify-content space-between
</style>
