<template>
  <div class="container">
    <div class="leftBox">
      <div class="leftTop">
        <leftTop
          title="塔吊设备"
          :towerList="towerList"
          :totalTowerDev="totalTowerDev"
          :totalDangerTowerDev="totalDangerTowerDev"
        />
      </div>
      <div class="leftCenter">
        <!-- <leftCenter title="AI分析"></leftCenter> -->
        <leftCenter
          title="升降机设备"
          :lifterList="lifterList"
          :totalLifterDev="totalLifterDev"
          :totalDangerLifterDev="totalDangerLifterDev"
        ></leftCenter>
      </div>
      <div class="leftBottom">
        <leftBottom
          title="视频设备"
          :videoCountList="videoCountList"
        ></leftBottom>
      </div>
    </div>
    <div class="centerBox">
      <div class="centerTop">
        <centerTop title="建筑总览"></centerTop>
      </div>
      <div class="centerBottom">
        <CenterBottom title="视频监控"></CenterBottom>
      </div>
    </div>
    <div class="rightBox">
      <div class="rightTop">
        <rightTop title="人脸闸机" :ufaceList="ufaceList"></rightTop>
      </div>
      <div class="rightCenter">
        <rightCenter title="AI分析"></rightCenter>
      </div>
      <div class="rightBottom">
        <rightBottom
          title="环境监测"
          :onlineNum="environment.online"
          :devOnline="environment.devOnline"
          :offlineNum="environment.offline"
          :list="environment.list"
        ></rightBottom>
      </div>
    </div>
  </div>
</template>

<script>
import leftTop from './leftTop'
import leftCenter from './leftCenter'
import leftBottom from './leftBottom'
import centerTop from './centerTop'
import CenterBottom from './CenterBottom'
import rightTop from './rightTop'
import rightCenter from './rightCenter'
import rightBottom from './rightBottom'
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
import {
  selectTowerDevAlarmCountList,
  selectLifterDevAlarmCountList,
  selectVideoCountList,
  selectUfaceDevStatisticsList,
  selectEnvironmentDevAlaramCountList,
  getAllTowerDangerInfo,
  getAllLifterDangerInfo,
  getEnvironmentInfo
} from '@/assets/js/api/dataBoard'
export default {
  components: {
    leftTop,
    leftCenter,
    leftBottom,
    centerTop,
    CenterBottom,
    rightTop,
    rightCenter,
    rightBottom
  },
  data() {
    return {
      towerList: [], // 塔吊设备列表
      lifterList: [], // 升降机设备列表
      videoCountList: {}, // 视频设备列表
      ufaceList: {}, // 人脸闸机列表
      uface: [],
      ufaceInCount: 0, //人脸闸机今日进场人数
      totalTowerDev: 0, //塔吊数量
      totalDangerTowerDev: 0, // 塔吊报警数量
      totalLifterDev: 0, //升降机数量
      totalDangerLifterDev: 0, //升降机报警数量

      // 环境监测
      environment: {
        online: 0,
        offline: 0,
        devOnline: 0,
        devNum: 0,
        list: []
      }
    }
  },
  mounted() {
    this.getAlarmInfor()
    this.getAllDev()
  },
  methods: {
    // 获取设备数量
    getAlarmInfor() {
      let data = {
        sn: this.$store.state.projectSn
      }
      // 获取塔吊数量
      getAllTowerDangerInfo(data).then((res) => {
        if (res.code === 200) {
          // console.log('获取塔吊数量',res)
          let { result } = res
          this.totalTowerDev = result.devCount.devNum
          this.totalDangerTowerDev = result.towerAlarmCount
          console.log(result)
        }
      })
      // getAiVideoInfo
      // 获取升降机数量
      getAllLifterDangerInfo(data).then((res) => {
        if (res.code === 200) {
          let { result } = res
          this.totalLifterDev = result.devCount.devNum
          this.totalDangerLifterDev = result.lifterAlarmCount
        }
      })
      // 获取环境监测数量
      getEnvironmentInfo(data).then((res) => {
        console.log('获取环境监测数量', res)
        if (res.code === 200) {
          let { result } = res
          this.$set(this.environment, 'offline', result.devTotal.devNum)
          this.$set(this.environment, 'devOnline', result.devTotal.devOnline)
          this.$set(this.environment, 'online', result.alarmTotal.totalAlarm)
        }
      })
      // // 获取报警列表数据
      // getAIDangerList(data).then((res) => {
      //   if (res.code === 200) {
      //     let { result } = res;
      //     console.log(result);
      //     let type = [
      //       "烟感",
      //       "明火",
      //       "人员倒地",
      //       "未戴安全帽",
      //       "区域入侵",
      //       "越界入侵",
      //       "人员聚集衣",
      //       "反光衣",
      //       "裸土覆盖",
      //     ];
      //     this.AIDangerAlarmList = result.slice(0, 6).map((x) => {
      //       return {
      //         createTime: x.createTime,
      //         hardwareName: x.hardwareName,
      //         id: x.id,
      //         imageUrl: x.imageUrl,
      //         location: x.location,
      //         projectName: x.projectName,
      //         alarmType: type[x.alarmType - 1],
      //       };
      //     });
      //   }
      //   this.pieAnalyse()
      // });
    },
    // 获取所有设备信息
    getAllDev() {
      let data = {
        projectSn: this.$store.state.projectSn
      }
      //获取塔吊设备信息
      selectTowerDevAlarmCountList(data).then((res) => {
        if (res.code === 200) {
          this.towerList = res.result.devList
          // console.log('获取塔吊设备信息',this.towerList)
        }
      })
      // 获取升降机设备信息
      selectLifterDevAlarmCountList(data).then((res) => {
        console.log('获取升降机设备信息: ', res)
        if (res.code === 200) {
          this.lifterList = res.result.devList
          console.log(res)
        }
      })
      // 视频设备数量
      selectVideoCountList(data).then((res) => {
        if (res.code === 200) {
          console.log('获取视频设备信息: ', res)

          this.videoCountList = res.result
        }
      })
      // 获取人脸闸机设备信息
      selectUfaceDevStatisticsList(data).then((res) => {
        if (res.code === 200) {
          console.log('获取人脸闸机设备信息', res)
          this.ufaceList = res.result
          this.uface = res.result.devList
          this.uface.forEach((item) => {
            this.ufaceInCount += item.inTotalNum
          })
        }
      })
      // 获取环境监测信息
      selectEnvironmentDevAlaramCountList(data).then((res) => {
        if (res.code === 200) {
          console.log('获取环境监测信息', res)

          this.$set(this.environment, 'list', res.result.devList)
        }
      })
      let data2 = {
        sn: this.$store.state.projectSn
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #07162b;
}
.topBox {
  height: 20%;
}
.leftBox {
  width: 25%;
  height: 100%;
  margin-right: 15px;
  .leftTop {
    height: 35%;
    margin-bottom: 15px;
  }
  .leftCenter {
    height: 30%;
    margin-bottom: 15px;
  }
  .leftBottom {
    height: 30%;
  }
}
.centerBox {
  display: flex;
  flex-direction: column;
  width: 60%;
  height: 100%;
  margin-right: 15px;
  .centerTop {
    height: 66.6%;
    margin-bottom: 15px;
  }

  .centerBottom {
    height: 30%;
    background-color: green;
  }
}

.rightBox {
  width: 25%;
  height: 100%;
  .rightTop {
    height: 35%;
    margin-bottom: 15px;
  }
  .rightCenter {
    height: 30%;
    margin-bottom: 15px;
  }
  .rightBottom {
    height: 30%;
  }
}
</style>
