<template>
  <Card :title="title">
    <DeviceCard
      :leftCount="{
        value: ufaceList.totalDevOnlineNum,
        label: '在线设备',
        img: 'online'
      }"
      :rightCount="{
        value: ufaceList.totalDevNum - ufaceList.totalDevOnlineNum,
        label: '离线设备',
        img: 'warring2'
      }"
    >
      <div class="list">
        <div class="list-head">
          <div class="device">设备名称</div>
          <div class="enter">进场人数</div>
          <div class="outer">出场人数</div>
        </div>
        <div class="listBox">
          <div
            class="list-item"
            :class="item.deviceState == 1 ? 'online' : 'offline'"
            v-for="(item, index) in ufaceList.devList"
            :key="index"
          >
            <div class="status">
              {{ item.deviceState == 1 ? '在线' : '离线' }}
            </div>
            <div class="label">{{ item.devName }}</div>
            <div class="enter">{{ item.inTotalNum }}</div>
            <div class="outer" style="margin-right: 20px">
              {{ item.outTotalNum }}
            </div>
          </div>
        </div>
      </div>
    </DeviceCard>
  </Card>
</template>

<script>
import { getSelectuFaceDevList } from '@/assets/js/api/dataBoard'
import Card from '../components/Card.vue'
import DeviceCard from './components/DeviceCard.vue'
export default {
  components: { Card, DeviceCard },
  props: {
    title: {
      type: String,
      default: ''
    },
    ufaceList: {
      type: Object,
      default: []
    }
  },
  data() {
    return {
      offlineNum: 0,
      onlineNum: 0
    }
  },
  mounted() {
    this.getData()
    // console.log('--------------', this.ufaceList)
  },
  methods: {
    getData() {
      let data = {
        projectSn: this.$store.state.projectSn
      }
      // 获取塔吊数量
      getSelectuFaceDevList(data).then((res) => {
        if (res.code === 200) {
          console.log('获取人脸闸机数量', res)
          // let { result } = res
          this.offlineNum = res.result.offlineNum
          this.onlineNum = res.result.onlineNum
          // console.log(result)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 3px;
  color: #636364;
}
.list {
  height: 100%;
  padding: 0 10px;
  color: #fff;
  .list-head {
    margin-bottom: 6px;
    padding: 0 16px;
    font-size: 12px;
    display: flex;
    .device {
      margin-left: 56px;
      margin-right: auto;
    }
    .enter {
      width: 120px;
    }
    .outer {
      width: 70px;
      text-align: right;
    }
  }
  .listBox {
    height: calc(100% - 15px);
    overflow: auto;
    .list-item {
      margin-bottom: 6px;
      padding: 0 16px;
      height: 22px;
      display: flex;
      align-items: center;
      &.online {
        background-image: linear-gradient(
          90deg,
          rgba(23, 54, 74, 1),
          rgba(23, 54, 74, 0.2)
        );
        .status {
          background-color: #3cabfd;
        }
      }
      &.offline {
        background-image: linear-gradient(
          90deg,
          rgba(67, 42, 63, 1),
          rgba(67, 42, 63, 0.2)
        );
        .status {
          background-color: #ff6c7f;
        }
      }
      .status {
        margin-right: 20px;
        width: 36px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        font-size: 12px;
        border-radius: 9px;
      }
      .label {
        margin-right: auto;
        font-size: 14px;
      }
      .enter {
        width: 80px;
      }
      .outer {
        width: 70px;
        text-align: right;
      }
    }
  }
}
</style>
