<template>
  <div class="fullscreen-container">
    <myHeader place="2" @getStuReturnInfo="getStuReturnInfo"></myHeader>
    <div v-if="ready" style="position: absolute; width: 100%; display: flex; justify-content: space-between; top: 102px">
      <img style="width: 846px" src="/static/screen/img/header-aside-left.png" alt="" />
      <img style="width: 845px" src="/static/screen/img/header-aside-right.png" alt="" />
    </div>
    <main>
      <div class="numsBox">
        <ul>
          <li>
            <div class="title">寝室总人数</div>
            <div class="numList">
              <div v-for="(item, index) in studentPersonNum.totalNum" :key="index">{{ item }}</div>
            </div>
          </li>
          <li>
            <div class="title">在寝人数</div>
            <div class="numList">
              <div v-for="(item, index) in studentPersonNum.inNum" :key="index">{{ item }}</div>
            </div>
          </li>
          <li>
            <div class="title">不在寝人数</div>
            <div class="numList">
              <div v-for="(item, index) in studentPersonNum.noInNum" :key="index">{{ item }}</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="main">
        <div class="left myborder1">
          <div class="timeslot">
            当前考勤时段：{{ screenData.returnTime }}
            （入寝）
          </div>
          <div style="height: 880px; overflow: auto; margin-top: 39px">
            <ul>
              <li v-for="(item, index) in chamberList" :key="index" :data-status="item.status">
                <div class="title">{{ item.name }}</div>
                <div class="des">
                  <template v-if="item.personCount == 0"> 未安排入住 </template>
                  <template v-else> {{ item.dormitoryCount }}/{{ item.personCount }} </template>
                </div>
                <div class="sex">{{ item.gender ? "男生" : "女生" }}宿舍</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="right myborder1">
          <div class="imgBox">
            <!-- <img src="/static/screen/testimg/8.png" alt="" /> -->
            <iframe :src="rtsUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="
              () => {
                return 'tableRowClassName';
              }
            "
            height="590px"
          >
            <el-table-column type="index" width="50" />
            <el-table-column prop="personName" label="姓名" align="center"> </el-table-column>
            <el-table-column prop="dormitName" label="所在宿舍" align="center"> </el-table-column>
            <el-table-column prop="gender" label="宿舍性别" align="center" :formatter="genderFormatter"> </el-table-column>
            <el-table-column prop="$status" label="归寝状态" align="center"> </el-table-column>
          </el-table>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
import myHeader from "./component/header.vue";
import { screenApi } from "@/api";
const screenData = ref({});
const ready = ref(false);
const chamberList = ref([]);
const tableData = ref([]);
const buildInfo = ref({});
const getStuReturnInfo = async obj => {
  if (obj) buildInfo.value = obj;
  // 监控
  showRts(buildInfo.value.insCameraId);
  screenApi.getStudentReturnBed({ buildId: buildInfo.value.value }).then(res => {
    if (res.code == 200) {
      res.data.attendList = res.data.attendList.map(e => {
        e.$status = e.cameraId == buildInfo.value.outCameraId ? "未归寝" : e.cameraId == buildInfo.value.insCameraId ? "归寝" : "";
        return e;
      });
      screenData.value = res.data;
      tableData.value = screenData.value.attendList;
      console.log(res.data);
      ready.value = true;
      getstudentPersonNum();
    }
  });
  if (!timer) refresh(getStuReturnInfo, 60000);
};
// 定时刷新
var timer = "";
const refresh = (fn = () => {}, time = 5000) => {
  timer = setInterval(fn, time);
};
// 性别
const genderOptions = ref([
  {
    label: "未知",
    value: "GENDER_UNKNOWN"
  },
  {
    label: "男",
    value: "GENDER_MALE"
  },
  {
    label: "女",
    value: "GENDER_FEMALE"
  }
]);
const genderFormatter = row => {
  let obj = genderOptions.value.find(e => e.value == row.gender);
  return obj ? obj.label : "";
};
// 监控
const streamId = ref("");
const videoToken = ref("");
const rtsUrl = ref("");
const sensorId = ref("");
const showRts = sensorId_ => {
  if (sensorId_) {
    if (sensorId.value == sensorId_) return;
    if (streamId.value) stopUrl();
    let rtsUrl_ = "/static/rtsPlayer.html?height=446px&rtsUrl=";
    sensorId.value = sensorId_;
    screenApi.detail({ sensorId: sensorId_ }).then(res => {
      if (res.code == 200) {
        if (res.data.rtsPullStreamUrls[0]) {
          rtsUrl.value = rtsUrl_ + res.data.rtsPullStreamUrls[0].url;
        }
        streamId.value = res.data.streamId;
        videoToken.value = res.data.videoToken;
      }
    });
  }
};
const stopUrl = () => {
  if (!streamId.value) return;
  screenApi.stopUrl({
    sensorId: sensorId.value,
    streamId: streamId.value,
    videoToken: videoToken.value
  });
};
onUnmounted(() => {
  stopUrl();
  timer && clearInterval(timer);
});
// 归寝信息
const studentPersonNum_ = reactive({
  inNum: 0,
  noInNum: 0,
  totalNum: 0
});
const studentPersonNum = reactive({
  inNum: [],
  noInNum: [],
  totalNum: []
});
// 0全部归寝 1部分归寝 2全未归寝 3未安排入住
const getstudentPersonNum = () => {
  studentPersonNum_.value = screenData.value.building;
  chamberList.value = screenData.value.dormitoryList.map((e, index) => {
    e.status = e.personCount == 0 ? 3 : e.dormitoryCount == 0 ? 2 : e.dormitoryCount < e.personCount ? 1 : 0;
    return e;
  });
  for (const key in studentPersonNum_.value) {
    let item = studentPersonNum_.value[key];
    let arr = item.toString().split("");
    function initArr(arr) {
      if (arr.length < 4) {
        arr.unshift("0");
      }
      if (arr.length < 4) {
        return initArr(arr);
      }
      return arr;
    }
    arr = initArr(arr);
    studentPersonNum[key] = arr;
  }
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
main {
  padding: 50px 67px 0px 63px;
  .numsBox {
    ul {
      display: flex;
      justify-content: space-around;
      padding: 0px 400px 57px 400px;
      li {
        .title {
          color: #08edf3;
          text-align: center;
          font-size: 22px;
          margin-bottom: 21px;
        }
        .numList {
          display: flex;
          height: 82px;
          div {
            background: url("/static/screen/img/numbg.png") no-repeat;
            background-size: cover;
            width: 55px;
            height: 82px;
            color: #09fbff;
            text-shadow: 0px 0px 4px rgba(168, 233, 255, 0.64);
            font-size: 48px;
            text-align: center;
            line-height: 82px;
            margin-right: 9px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .main {
    display: flex;
    .left {
      width: 1630px;
      height: 1036.977px;
      margin-right: 24px;
      padding: 48px 42px;
      box-sizing: border-box;
      .timeslot {
        color: #fff;
        font-size: 20px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 152.372px;
          height: 153.691px;
          border-radius: 18px;
          margin-right: 18.6px;
          margin-bottom: 24px;
          &:nth-child(9n) {
            margin-right: 0px;
          }
          .title {
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            width: 152.372px;
            height: 65.401px;
            box-sizing: border-box;
            padding-top: 20px;
          }
          .des {
            color: #fff;
            text-align: center;
            font-size: 20px;
            margin-top: 13px;
          }
          .sex {
            color: #040404;
            text-align: center;
            font-size: 14px;
            margin-top: 13px;
          }
        }
        li[data-status="0"] {
          box-shadow: 0 0 0 0px rgb(255, 255, 255, 0.7), inset 0 0 36px rgb(255, 255, 255, 0.4);
          background: #0c4dcf;
          .title {
            color: #59edfd;
          }
          .des {
            color: #fff;
          }
          .sex {
            color: #09fbff;
          }
        }
        li[data-status="1"] {
          background: #fff8e5;
          .title {
            background: url("/static/screen/img/yellowbg.png");
            background-size: cover;
          }
          .des {
            color: #ee8f00;
          }
        }
        li[data-status="2"] {
          background: #ffe7e5;
          .title {
            background: url("/static/screen/img/redbg.png");
            background-size: cover;
          }
          .des {
            color: #de3d32;
          }
        }
        li[data-status="3"] {
          background: #c6f2e1;
          .title {
            background: url("/static/screen/img/greenbg.png");
            background-size: cover;
          }
          .des {
            color: #26ab43;
          }
        }
      }
    }
    .right {
      flex: 1;
      .imgBox {
        width: 776px;
        height: 446px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
:deep(.el-table) {
  --el-table-border-color: #2e84e5;
  --el-table-header-bg-color: #0037a4;
  --el-table-text-color: #fff;
  --el-table-header-text-color: #fff;
}
:deep(.el-table .tableRowClassName:nth-child(2n)) {
  --el-table-tr-bg-color: #021940;
  --el-table-row-hover-bg-color: #021940;
}
:deep(.el-table .tableRowClassName:nth-child(2n-1)) {
  --el-table-tr-bg-color: #082253;
  --el-table-row-hover-bg-color: #082253;
}
:deep(.el-table__empty-block) {
  background: linear-gradient(179deg, rgb(8, 19, 64) -54.28%, rgb(17, 30, 85) 124.4%);
}
:deep(.el-table__body-wrapper) {
  background: linear-gradient(179deg, rgb(8, 19, 64) -54.28%, rgb(17, 30, 85) 124.4%);
}
</style>
    