<template >
  <div class="policeStatistics">
    <div class="__switch">
      <div :class="[activeClass('doCurrent')]" @click="displayInfo('doCurrent')" >当日出警</div>
      <div :class="[activeClass('doWeek')]" @click="displayInfo('doWeek')" >近一周出警</div>
      <div :class="[activeClass('doMouth')]" @click="displayInfo('doMouth')" >近一月出警</div>
    </div>
    <div>
      <PoliceCount />
      <CallPoliceCount />
    </div>
  </div>
</template>

<script>
import CallPoliceCount from './CallPoliceCount.vue'
import PoliceCount from './PoliceCount.vue'

export default {
  name: 'PoliceStatistics',
  components: {
    CallPoliceCount,
    PoliceCount
  },
  data() {
    return {
      active: 'doCurrent'
    }
  },
  methods: {
    activeClass(name) {
      return this.active === name ? 'active' : ''
    },
    displayInfo(name) {
      this.active = name
      this[name] && this[name]()
    },
  }
}
</script>

<style scoped lang='less'>
.policeStatistics {
  .__switch {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #85e9ff;
      gap: 20px;
      cursor: pointer;
      
    .active {
      color: #ffd169;
    }
    }
}
</style>
