<template>
  <Card :title="title">
    <DeviceCard :leftCount="{ value: 22, label: '在线设备' }" :rightCount="{ value: 65, label: '离线设备' }">
      <div class="list">
        <div class="list-head">
          <div class="device">设备名称</div>
          <div class="enter">进场人数</div>
          <div class="outer">出场人数</div>
        </div>
        <div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
          <div class="status">在线</div>
          <div class="label">1号塔吊</div>
          <div class="enter">66</div>
          <div class="outer">99</div>
        </div>
      </div>
    </DeviceCard>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import DeviceCard from './components/DeviceCard.vue'
export default {
  components: { Card, DeviceCard },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.list {
  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: 70px;
    }
    .outer {
      width: 70px;
      text-align: right;
    }
  }
  .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: 70px;
    }
    .outer {
      width: 70px;
      text-align: right;
    }
  }
}
</style>
