<template>
  <div class="app-wrapper">
    <el-row :gutter="20">
      <el-col id="today-visitor" class="sub-data-block" style="margin-left: 20px;">
        <div class="sub-title">今日访客</div>
        <div class="statis-block">
          <span class="big-size" v-text="statistics.todayVisitorPerson"/><span>人</span>
        </div>
      </el-col>

      <el-col id="total-visitor" class="sub-data-block">
        <div class="sub-title">累计访客</div>
        <div class="statis-block">
          <span class="big-size" v-text="statistics.totalVisitorPerson"/><span>人</span>
        </div>
      </el-col>

      <el-col id="current-alarm" class="sub-data-block">
        <div class="sub-title">当前报警</div>
        <div class="statis-block">
          <span class="big-size" v-text="statistics.currentAlarm"/><span>台</span>
        </div>
      </el-col>

      <el-col id="total-alarm" class="sub-data-block">
        <div class="sub-title">累计报警</div>
        <div class="statis-block">
          <span class="big-size" v-text="statistics.totalAlarm"/><span>次</span>
        </div>
      </el-col>

      <el-col id="online-device" class="sub-data-block">
        <div class="sub-title">在线设备</div>
        <div class="statis-block">
          <span class="big-size" v-text="statistics.onlineDevice"/><span>台</span>
        </div>
      </el-col>

      <el-col id="total-device" class="sub-data-block">
        <div class="sub-title">设备总量</div>
        <div class="statis-block">
          <span class="big-size" v-text="statistics.totalDevice"/><span>台</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="7" class="chart-block">
        <div class="chart-title">今日进出营情况</div>
        <in-out-today />
      </el-col>

      <el-col id="dev-count"  :span="10" class="chart-block">
        <div class="chart-title">各类型设备安装数量</div>
        <dev-count />
      </el-col>

      <!--<el-col id="pass-count" class="chart-block">-->
      <el-col :span="7" class="chart-block">
        <div class="chart-title">进出营数量统计</div>
        <in-out-count />
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-bottom: 40px;">
      <el-col :span="7" class="chart-block">
        <div class="chart-title">各重点区域出入情况</div>
        <in-out-key-count />
      </el-col>

      <el-col id="dev-alarm-count" :span="10" class="chart-block">
        <div class="chart-title">设备报警数量统计</div>
        <dev-alarm-count />
      </el-col>

      <el-col :span="7" class="chart-block">
        <div class="chart-title">各营门出入营量统计</div>
        <in-out-door-count />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getStatisticsData } from '@/api/statistics'
import InOutToday from '@/views/ctrl/statCharts/inOutToday'
import InOutCount from '@/views/ctrl/statCharts/inOutCount'
import DevCount from '@/views/ctrl/statCharts/devCount'
import InOutKeyCount from '@/views/ctrl/statCharts/inOutKeyCount'
import DevAlarmCount from '@/views/ctrl/statCharts/devAlarmCount'
import InOutDoorCount from '@/views/ctrl/statCharts/inOutDoorCount'
export default {
  name: 'CtrlIndex',
  components: { InOutToday, DevCount, InOutCount, InOutKeyCount, DevAlarmCount, InOutDoorCount },
  data() {
    return {
      statistics: {
        todayVisitorPerson: 0,
        totalVisitorPerson: 0,
        currentAlarm: 0,
        totalAlarm: 0,
        onlineDevice: 0,
        totalDevice: 0
      }
    }
  },
  created() {
    this.fetchStatisticsData()
  },
  methods: {
    fetchStatisticsData() {
      getStatisticsData().then(response => {
        if (response.code === 200) {
          this.statistics = response.data
        }
      })
    }
  }
}
</script>

<style scoped>
  .app-wrapper {
    background-color: #e9e9e9;
    padding-bottom: 10px;
  }

  .sub-data-block {
    width: calc((100vw - 120px) / 6);
    border-radius: 16px;
    float: left;
    margin: 10px;
    margin-bottom: 0px;
    box-shadow: 1px 1px 5px #999;
  }
  .sub-title {
    font-weight: bold;
    text-align: center;
    font-family: 'Microsoft YaHei';
    color: #fff;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 0px;
  }
  .statis-block {
    text-align: center;
    margin: 0px 10px 0px 10px;
    padding: 0px 10px 5px 10px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 20px;
  }
  .big-size {
    font-size: 35px;
  }

  .chart-title {
    font-family: 'Microsoft YaHei';
    color: #000000;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 10px;
  }
  .chart-block {
    margin-left: 20px;
    margin-top: 10px;
    border-radius: 16px;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px #999;
    height: 37vh;
  }

  #today-visitor {
    background-image: linear-gradient(to right, #ff8fdf, #ff01b4);
  }
  #total-visitor {
    background-image: linear-gradient(to right, #9280ff, #2400ff);
  }
  #current-alarm {
    background-image: linear-gradient(to right, #ff696a, #ff0101);
  }
  #total-alarm {
    background-image: linear-gradient(to right, #7fbbff, #0078ff);
  }
  #online-device {
    background-image: linear-gradient(to right, #72ff7e, #01a411);
  }
  #total-device {
    background-image: linear-gradient(to right, #ffa800, #ce7e00);
  }

  #dev-count, #dev-alarm-count {
    width: calc(250vw / 6 - 70px);
  }
</style>