<template>
  <div class="left">
    <div class="block" style="height: 270px;">
      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
        <div class="item">
          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
          <div class="item-title">摄像机</div>
          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
        </div>
        <div class="item">
          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
          <div class="item-title">闸机</div>
          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
        </div>
      </div>
      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
      <cam-bar style="width: 100%;height: 165px"/>
    </div>
    <div class="block" style="height: 250px;">
      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
    </div>
    <div class="block" style="height: 500px;">
      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
          <div class="item">
            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
            <div class="item-title"> 一期主楼、录制楼</div>
            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
          </div>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
          <div class="item">
            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
            <div class="item-title"> 二期主楼 </div>
            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
          </div>
        </el-tooltip>
      </div>
      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
    </div>
  </div>
</template>

<script>
import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
import CamBar from '@/views/popup/components/camBar'
import DoorList from '@/views/popup/components/doorList'
import InoutList from '@/views/popup/components/inoutList'

export default {
  name: 'Left',
  components: { InoutList, DoorList, CamBar },
  data() {
    return {
      timer: null,
      titleImg: require('@/assets/popup/title.png'), // 背景图片
      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
      cam: { on: '', all: '' },
      door: { on: '', all: '' },
      list: {
        '0': '*',
        '1': '*',
        '2': '*'
      },
      tips: {
        '1': 0,
        '2': 0,
        '2进入人数': 0,
        '1进入人数': 0,
        '2离开人数': 0,
        '1离开人数': 0
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.timer = setInterval(() => {
      this.initData()
    }, 60000)
    this.initData()
  },
  methods: {
    initData() {
      deviceStatistics(2).then(response => {
        if (response.code === 200) {
          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
          this.cam.all = response.data.total
        }
      })
      deviceStatistics(1).then(response => {
        if (response.code === 200) {
          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
          this.door.all = response.data.total
        }
      })
      buildPeopleNumber().then(response => {
        if (response.code === 200) {
          this.tips = response.data
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.block{
  width: 100%;
  height: 200px;
  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  margin-bottom: 5px;
  flex-direction: column;
}
.left{
  width: 500px;
  height: 100%;
  overflow: hidden;
  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  //border-color: rgba(0, 0, 0, .05);
  margin: 10px 10px 0 10px;
  border-radius: 5px;
  .title{
    text-shadow: 0 0 5px #d1ffff;
    width: 500px;
    height: 35px;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    color: white;
    font-weight: bold;
    padding-top: 8px;
    padding-left: 30px;
    font-family: 黑体;
    letter-spacing: 1px;
    z-index: 1;
  }
  .base-map-image{
    width: 45px;
    height: 40px;
  }
  .area-map-image{
    margin-right: 10px;
    margin-left: 5px;
    width: 100%;
    height: 80%;
  }
  .item{
    width: 50%;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .item-title{
      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
      line-height: 40px;
      vertical-align: middle;
    }
    .num{
      text-shadow: 0 0 5px #ffb441;
      color: #ffb441;
      font-size: 20px;
      width: 100%;
      margin-top: -0px;
    }
    .unit{
      color: #B3F3F6;
      font-size: 13px;
    }
  }
}
</style>