<template >
  <div class="fireLog">
    <div class="__switch">
      <div :class="[activeClass('doFireInspection')]" @click="displayInfo('doFireInspection')" >防火巡检</div>
      <div :class="[activeClass('doEquipmentMaintenance')]" @click="displayInfo('doEquipmentMaintenance')" >设备维护</div>
    </div>
    <div class="__content">
      <transition-group enter-active-class="animate__animated animate__fadeIn">  
        <FireInspection key="fireInspection"  v-show="active === 'doFireInspection'"/>
        <FireInspection key="doEquipmentMaintenance"  v-show="active === 'doEquipmentMaintenance'"/>
      </transition-group>
    </div>
  </div>
</template>

<script>
import 'animate.css';
import FireInspection from './FireInspection.vue'


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

<style scoped lang='less'>
.fireLog {
  .__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>
