<template>
  <div class="condition-monitoring">
    <div class="__header">
      <div class="__switch">
        <div :class="[activeClass('netState')]" @click="displayInfo('netState')" >网络状态</div>
        <div :class="[activeClass('deviceSate')]" @click="displayInfo('deviceSate')" >设备状态</div>
      </div>
      <div class="__unit">
        <div v-if="'deviceSate' === active">单位：个</div>
      </div>
    </div>
    <div class="__content">
      <transition-group enter-active-class="animate__animated animate__fadeIn">  
        <div key="netState" v-show="'netState' === active">
          <NetStatePanel @register="registerModal"/>
        </div>
        <div key="deviceSate" v-show="'deviceSate' === active">
          <DeviceStatePanel :value="deviceSate" :online=".8" :offline=".2"/>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import 'animate.css';
import DeviceStatePanel from './DeviceStatePanel.vue'
import NetStatePanel from './NetStatePanel.vue'
import { useComponent } from '@/hooks/register'

const [registerModal, { setProps }] = useComponent()

export default {
  name: 'ConditionMonitoring',
  components: {DeviceStatePanel, NetStatePanel},
  data() {
    return {
      netState: [],
      deviceSate: [
        {
          type: '正常',
          sales: 3200,
        },
        {
          type: '故障',
          sales: 2200,
        },
        {
          type: '阈值报警',
          sales: 3800,
        },
        {
          type: '停止',
          sales: 4600,
        },
        {
          type: '启动',
          sales: 3800,
        },
        {
          type: '其他',
          sales: 2200,
        }
      ],
      active: 'netState'
    }
  },
  mounted() {
    setProps({
      online: 0.80,
      offline: 0.20
    })
  },
  methods: {
    activeClass(name) {
      return this.active === name ? 'active' : ''
    },
    displayInfo(name) {
      this.active = name
    },
    registerModal
  }
}
</script>

<style lang="less" scoped>
.condition-monitoring {
  width: 300px;
  .__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .__switch {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #85e9ff;
      gap: 20px;
      cursor: pointer;
    }
    .__unit {
      font-size: 12px;
      color: #fff;
      margin-left: 20px;
    }
  }
  

  .active {
    color: #ffd169;
  }

  .__content {
    width: 300px;
    height: 230px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
  }
}
</style>
