<template>
  <div class="box">
    <!-- 选择宿舍区域 -->
    <div class="select">
      6栋502
      <el-dropdown trigger="click">
        <el-icon size="30" color="#fff"><CaretBottom /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item> 选项1 </el-dropdown-item>
            <el-dropdown-item>选项2</el-dropdown-item>
            <el-dropdown-item>选项3</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 定位区域 -->
    <img class="address" src="@/assets/images/address.png" />
    <div class="student">
      <div class="student_icon">
        <div class="icon_bg">
          <img src="@/assets/images/house.png" />
        </div>
      </div>
      {{ tableData[0].name }}{{ tableData[0].type === 1 ? '（在床）' : '（不在床）' }}
    </div>

    <img class="address address2" src="@/assets/images/address.png" />
    <div class="student student2">
      <div class="student_icon">
        <div class="icon_bg">
          <img src="@/assets/images/house.png" />
        </div>
      </div>
      {{ tableData[1].name }}{{ tableData[1].type === 1 ? '（在床）' : '（不在床）' }}
    </div>

    <img class="address address3" src="@/assets/images/address.png" />
    <div class="student student3">
      <div class="student_icon">
        <div class="icon_bg">
          <img src="@/assets/images/house.png" />
        </div>
      </div>
      {{ tableData[2].name }}{{ tableData[2].type === 1 ? '（在床）' : '（不在床）' }}
    </div>

    <img class="address address4" src="@/assets/images/address.png" />
    <div class="student student4">
      <div class="student_icon">
        <div class="icon_bg">
          <img src="@/assets/images/house.png" />
        </div>
      </div>
      {{ tableData[3].name }}{{ tableData[3].type === 1 ? '（在床）' : '（不在床）' }}
    </div>

    <img class="address address5" src="@/assets/images/address.png" />
    <div class="student student5">
      <div class="student_icon">
        <div class="icon_bg">
          <img src="@/assets/images/house.png" />
        </div>
      </div>
      {{ tableData[4].name }}{{ tableData[4].type === 1 ? '（在床）' : '（不在床）' }}
    </div>

    <img class="address address6" src="@/assets/images/address.png" />
    <div class="student student6">
      <div class="student_icon">
        <div class="icon_bg">
          <img src="@/assets/images/house.png" />
        </div>
      </div>
      {{ tableData[5].name }}{{ tableData[5].type === 1 ? '（在床）' : '（不在床）' }}
    </div>

    <!-- 底部数量显示区域 -->
    <div class="info">
      <!-- 传感器数量区域 -->
      <div class="info_box">
        <img class="info_img" src="@/assets/images/device.png" />
        <div class="info_detail">
          <div class="detail_num" ref="deviceNumDom">{{ deviceNum }}</div>
          <div>传感器数量</div>
        </div>
      </div>
      <!-- 在线数量区域 -->
      <div class="info_box">
        <img class="info_img" src="@/assets/images/device.png" />
        <div class="info_detail">
          <div class="detail_num" ref="deviceNumOnDom">{{ deviceNumOn }}</div>
          <div>在线数量</div>
        </div>
      </div>
      <!-- 离线数量区域 -->
      <div class="info_box">
        <img class="info_img" src="@/assets/images/device.png" />
        <div class="info_detail">
          <div class="detail_num" ref="deviceNumOffDom">{{ deviceNumOff }}</div>
          <div>离线数量</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRandomNum } from '@/utils/getRandomNumList.js'
import { countUpNum } from '@/utils/countUpNum.js'
import { isToday } from '@/utils/isToday.js'

// 传感器数量
const deviceNum = ref(6)
const deviceNumDom = ref()

// 在线数量
const deviceNumOn = ref(5)
const deviceNumOnDom = ref()

// 离线数量
const deviceNumOff = ref(1)
const deviceNumOffDom = ref()

// 表格数组
const tableData = ref([
  {
    type: getRandomNum(1, 3),
    date: new Date().toLocaleDateString(),
    name: '何文羽',
    college: '计科-2020'
  },
  {
    type: getRandomNum(1, 3),
    date: new Date().toLocaleDateString(),
    name: '夏叶轩',
    college: '计科-2020'
  },
  {
    type: getRandomNum(1, 3),
    date: new Date().toLocaleDateString(),
    name: '李芮',
    college: '计科-2020'
  },
  {
    type: getRandomNum(1, 3),
    date: new Date().toLocaleDateString(),
    name: '但学文',
    college: '计科-2020'
  },
  {
    type: getRandomNum(1, 3),
    date: new Date().toLocaleDateString(),
    name: '罗凡',
    college: '计科-2020'
  },
  {
    type: getRandomNum(1, 3),
    date: new Date().toLocaleDateString(),
    name: '单承宣',
    college: '计科-2020'
  }
])

onMounted(() => {
  getData()
})

const getData = () => {
  countUpNum(deviceNumDom.value, deviceNum.value)
  countUpNum(deviceNumOnDom.value, deviceNumOn.value)
  countUpNum(deviceNumOffDom.value, deviceNumOff.value)
  isToday(getData)
}
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  width: 1041px;
  height: 928px;

  .select {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-left: 18px;
    width: 181px;
    height: 55px;
    color: #fff;
    font-size: 20px;
    border-radius: 12px;
    background-image: linear-gradient(rgba(8, 31, 55, 0.8), rgba(18, 50, 81, 0.8));
  }

  .address {
    position: absolute;
    top: 230px;
    left: 108px;
    width: 55px;
    height: 95px;
  }

  .address2 {
    left: 838px;
  }

  .address3 {
    top: 166px;
    left: 224px;
    transform: scale(0.8);
  }

  .address4 {
    top: 166px;
    left: 735px;
    transform: scale(0.8);
  }

  .address5 {
    top: 95px;
    left: 285px;
    transform: scale(0.5);
  }

  .address6 {
    top: 95px;
    left: 650px;
    transform: scale(0.5);
  }

  .student {
    position: absolute;
    top: 200px;
    left: 60px;
    box-sizing: border-box;
    padding-left: 45px;
    display: flex;
    align-items: center;
    width: 184px;
    height: 39px;
    color: #fff;
    font-size: 14px;
    border-radius: 9px;
    border: 1px solid #82e0ff;
    background-color: #000000;
    animation: float 3s linear infinite;

    .student_icon {
      position: absolute;
      left: -4px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 3px solid #00fffb;

      .icon_bg {
        box-sizing: border-box;
        padding: 4px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #3edbfa;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .student2 {
    left: 780px;
    box-sizing: border-box;
  }

  .student3 {
    top: 148px;
    left: 162px;
    transform: scale(0.8);
    animation: float2 3s linear infinite;
  }

  .student4 {
    top: 148px;
    left: 670px;
    transform: scale(0.8);
    animation: float2 3s linear infinite;
  }

  .student5 {
    top: 94px;
    left: 220px;
    transform: scale(0.5);
    animation: float3 3s linear infinite;
  }

  .student6 {
    top: 94px;
    left: 588px;
    transform: scale(0.5);
    animation: float3 3s linear infinite;
  }

  .info {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 92px;

    .info_box {
      display: flex;
      align-items: center;
      width: 295px;
      height: 92px;
      border: 1px solid #275079;
      background-image: linear-gradient(rgba(8, 31, 55, 0.8), rgba(18, 50, 81, 0.8));
      animation: float 3s linear infinite;

      .info_img {
        margin-left: 30px;
        width: 64px;
        height: 54px;
      }

      .info_detail {
        margin-left: 29px;
        font-size: 18px;
        color: #90d7fc;

        .detail_num {
          font-weight: bold;
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }
}
</style>
