<template>
  <!-- 数据统计模块 -->
  <div class="data-analysis"> 
    <div class="__switch">
      <!-- 数据统计切换 -->
      <div :class="[activeClass('iotDevices')]" @click="displayInfo('iotDevices')">物联设备</div>
      <div :class="[activeClass('voideDevices')]" @click="displayInfo('voideDevices')" >视频设备</div>
      <div :class="[activeClass('netBuilds')]" @click="displayInfo('netBuilds')" >联网建筑</div>
      <div :class="[activeClass('netUnits')]" @click="displayInfo('netUnits')" >联网单位</div>
    </div>
    <div class="__content">
      <transition-group enter-active-class="animate__animated animate__fadeIn">  
        <!-- 数据统计显示 -->
        <DataLinePanel key="iotDevices" v-if="active === 'iotDevices'" :data="iotDevices"/>
        <DataLinePanel key="voideDevices" v-if="active === 'voideDevices'" :data="voideDevices"/>
        <DataLinePanel key="netBuilds" v-if="active === 'netBuilds'" :data="netBuilds"/>
        <DataLinePanel key="netUnits" v-if="active === 'netUnits'" :data="netUnits"/>
      </transition-group>
    </div>
  </div>
</template>

<script>
import DataLinePanel from './DataLinePanel.vue'
/**
 * 数据统计模块
 */
export default {
  name: 'DataAnalysis',
  components: {DataLinePanel},
  data() {
    return {
      iotDevices: [
        {
          label: '用户传输装置',
          number: "3000"
        },
        {
          label: '中间数据转换传输装置',
          number: "5000"
        },
        {
          label: '一体式液压设备',
          number: "1000"
        },
        {
          label: '一体式液位设备',
          number: "3000"
        },
        {
          label: '联网式独立探测器',
          number: "4000"
        }
      ],
      voideDevices: [
        {
          label: '消防式摄像头',
          number: "3000"
        },
        {
          label: '消防通道摄像头',
          number: "5000"
        },
        {
          label: '其他视频设备',
          number: "1000"
        }
      ],
      netBuilds: [
        {
          label: '工业厂房',
          number: "3000"
        },
        {
          label: '商业综合体',
          number: "5000"
        },
        {
          label: '一类高层住宅建筑',
          number: "1000"
        },
        {
          label: '二类高层住宅建筑',
          number:"3000"
        },
        {
          label: '一类高层公共建筑',
          number: "3000"
        },
        {
          label: '一类高层公共建筑',
          number: "4000"
        },
        {
          label: '单多层住宅建筑',
          number: "1000"
        },
        {
          label: '单多层公共建筑',
          number: "1000"
        }
      ],
      netUnits: [
        {
          label: '一级消防单位',
          number: "3000"
        },
        {
          label: '耳机消防单位',
          number: "5000"
        },
        {
          label: '三级消防单位',
          number: "1000"
        },
        {
          label: '其他',
          number: "3000"
        },
        {
          label: '重点单位',
          number: "3000"
        }
      ],
      active: '',
      currentData: []
    }
  },
  created() {
    this.initDataanalysis();
  },
  methods: {
    initDataanalysis() {
      this.active = 'iotDevices'
      this.currentData = this.iotDevices
    },
    activeClass(name) {
      return this.active === name ? 'active' : ''
    },
    displayInfo(name) {
      this.active = name
      this.currentData = this[name]
    },
    getData() {
      return this[this.active]
    }
  }
}
</script>

<style lang="less" scoped>
.data-analysis {
  width: 100%;
  .__switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    width: 300px;
    font-weight: 600;
    color: #85e9ff;
    gap: 10px;
    cursor: pointer;
  }

  .active {
    color: #ffd169;
  }

  .__content {
    width: 300px;
    height: 225px;
    font-size: 12px;
    color: #fff;
  }
  
}

</style>
