<template>
  <header>
    <div class="left">
      <div>
        <el-select style="width: 321px" class="header-select" v-model="place" :teleported="false" placeholder="场景选择" @change="placeChange">
          <el-option v-for="item in placeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
        <el-select
          v-if="place == 1"
          style="width: 186px; margin-left: 14px"
          class="header-select"
          v-model="classValue"
          :teleported="false"
          placeholder="班级选择"
          @change="classChange"
        >
          <el-option v-for="item in classoptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
        <el-select
          v-if="place == 2"
          style="width: 186px; margin-left: 14px"
          class="header-select"
          v-model="buildId"
          :teleported="false"
          placeholder="宿舍楼选择"
          @change="buildIdChange"
        >
          <el-option v-for="item in dormitoryOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="middle">
      <img style="width: 79px; height: 2px; position: relative; top: 98px; left: 46px" src="/static/screen/img/title-bg_aside.png" alt="" />
      <img src="/static/screen/img/title-bg.png" alt="" />
      <img style="width: 79px; height: 2px; position: relative; top: 98px; right: 42px" src="/static/screen/img/title-bg_aside.png" alt="" />
      <h2>AI智能预警分析平台</h2>
    </div>
    <div class="right">
      <div class="time">{{ currentDate }}</div>
      <!-- <img src="/static/screen/img/greenLight.png" alt="" /> -->
    </div>
  </header>
</template>
<script setup>
import router from "@/routers";
import { screenApi } from "@/api";
const emit = defineEmits(["getStuReturnInfo", "getClassRoomInfo"]);
const props = defineProps({
  place: "1"
});
// 场景选择
const placeOptions = ref([
  { value: "0", label: "场景选择", url: "/screen" },
  { value: "1", label: "智慧课堂", url: "/screen/classroom" },
  { value: "2", label: "学生归寝", url: "/screen/stureturn" }
]);
const place = ref("");
if (props.place) place.value = props.place;
const placeChange = value => {
  let obj = placeOptions.value.find(e => e.value == value);
  router.push(obj.url);
};
// 班级选择
const classValue = ref("");
const classoptions = ref([]);
screenApi.getPersonSetNoPageList().then(res => {
  if (res.code == 200) {
    classoptions.value = res.data.map(e => {
      e.label = e.personSetName;
      e.value = e.personSetId;
      return e;
    });
    classValue.value = classoptions.value[0].value;
    emit("getClassRoomInfo", classoptions.value[0]);
  }
});
const classChange = () => {
  let obj = classoptions.value.find(e => e.value == classValue.value);
  emit("getClassRoomInfo", obj);
};
// 宿舍楼选择
const buildId = ref("");
const dormitoryOptions = ref([]);
screenApi.getNoPageList().then(res => {
  if (res.code == 200) {
    dormitoryOptions.value = res.data.map(e => {
      e.label = e.name;
      e.value = e.id;
      return e;
    });
    buildId.value = dormitoryOptions.value[0].value;
    emit("getStuReturnInfo", dormitoryOptions.value[0]);
  }
});
const buildIdChange = () => {
  let obj = dormitoryOptions.value.find(e => e.value == buildId.value);
  emit("getStuReturnInfo", obj);
};
// 当前时间
const currentDate = ref("");
onMounted(() => {
  // 时间
  setInterval(() => {
    const now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();

    // 添加零以确保时、分、秒是两位数
    let hour = hours < 10 ? "0" + hours : hours;
    let minute = minutes < 10 ? "0" + minutes : minutes;
    let second = seconds < 10 ? "0" + seconds : seconds;

    currentDate.value = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${hour}:${minute}:${second}`;
  }, 1000);
  // 边框
  setBoder();
  setBoder1();
});
onBeforeMount(() => {
  handleResize();
  window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
// 边框添加
const setBoder = () => {
  let borderEle = document.querySelectorAll(".myborder");
  borderEle.forEach(e => {
    e.style.cssText = "position:relative;border: 1px solid #2e84e5;background: linear-gradient(179deg, #081340 -54.28%, #111e55 124.4%);";
    let borderImgs = document.createElement("div");
    borderImgs.style.cssText = `position: absolute;top: -3px;left: -3px;width: calc(100% + 6px);;height: calc(100% + 6px);;display: flex;justify-content: space-between;flex-flow: column;pointer-events:none`;
    borderImgs.innerHTML = `<div style="width: 100%;display: flex;justify-content: space-between;">
            <img src="/static/screen/img/topleft.png" alt="" />
            <img src="/static/screen/img/topright.png" alt="" /></div>
            <div style="width: 100%;display: flex;justify-content: space-between;"><img src="/static/screen/img/bottomleft.png" alt="" />
            <img src="/static/screen/img/bottomright.png" alt="" /></div>`;
    e.append(borderImgs);
  });
};
// 边框添加1
const setBoder1 = () => {
  let borderEle = document.querySelectorAll(".myborder1");
  borderEle.forEach(e => {
    if (e.classList.contains("hasSetBoder")) return;
    e.classList.add("hasSetBoder");
    e.style.cssText = "position:relative;border: 1px solid #2e84e5;background: linear-gradient(179deg, #081340 -54.28%, #111e55 124.4%);";
    let borderImgs = document.createElement("div");
    borderImgs.style.cssText = `position: absolute;top: -2px;left: -2px;width: calc(100% + 4px);;height: calc(100% + 4px);;display: flex;justify-content: space-between;flex-flow: column;pointer-events:none`;
    borderImgs.innerHTML = `<div style="width: 100%;display: flex;justify-content: space-between;">
            <img src="/static/screen/img/topleft1.png" alt="" style="width:12.7px;height:12.7px"/>
            <img src="/static/screen/img/topright1.png" alt="" style="width:12.7px;height:12.7px"/></div>
            <div style="width: 100%;display: flex;justify-content: space-between;"><img src="/static/screen/img/bottomleft1.png" alt="" style="width:12.7px;height:12.7px"/>
            <img src="/static/screen/img/bottomright1.png" alt="" style="width:12.7px;height:12.7px"/></div>`;
    e.append(borderImgs);
  });
};
// 屏幕宽度响应
const handleResize = () => {
  // 设计稿:  1920 * 1080
  // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)

  // 1.设计稿的尺寸
  let targetX = 2560;
  let targetY = 1440;
  //   let targetX = 1920;
  //   let targetY = 1080;
  let targetRatio = 16 / 9; // 宽高比率

  // 2.拿到当前设备(浏览器)的宽度
  let currentX = document.documentElement.clientWidth || document.body.clientWidth;
  let currentY = document.documentElement.clientHeight || document.body.clientHeight;
  //  1920 * 1080  -> 3840 * 2160

  // 3.计算缩放比例
  let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
  let currentRatio = currentX / currentY; // 宽高比率

  // 超宽屏
  if (currentRatio > targetRatio) {
    // 如果当前设备的宽高比率大于设计稿的宽高比率,那么就以高度为参照进行缩放，并且居中显示
    scaleRatio = currentY / targetY;
    document.body.style = `width:${targetX}px; height:${targetY}px;position:fixed;transform: scale(${scaleRatio}) translateX(-50%);left:50%;transform-origin: left top;`;
  } else {
    // 4.开始缩放网页
    document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio});transform-origin: left top;`;
  }
};
defineExpose({
  setBoder,
  setBoder1,
  classValue,
  buildId
});
</script>
<style lang="scss" scoped>
.header-select {
  :deep(.el-select__wrapper) {
    border: 1px solid #35c9f0;
    background: #0c4dcf;
    width: 100%;
    height: 55px;
    outline: none;
  }
  :deep(.el-popper) {
    position: absolute !important;
    top: 58px !important;
    left: 0px !important;
  }
  :deep(.el-select-dropdown__item) {
    color: #0c4dcf;
    font-size: 20px;
    height: 55px;
    line-height: 55px;
  }
  :deep(.el-select__placeholder) {
    background: linear-gradient(9deg, #10cefe 7.44%, #fff 79.62%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
  }
}
header {
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding-left: 58px;
  padding-right: 53px;
  > * {
    flex: 1;
  }
  .left {
    padding-top: 25px;
  }
  .middle {
    display: flex;
    justify-content: center;
    position: relative;
    img {
      width: 997.5px;
      height: 108px;
    }
    h2 {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: 0 auto;
      text-align: center;
      line-height: 108px;
      background: linear-gradient(90deg, #10cefe 0.82%, #10cefe 13.05%, #81e1ff 50.75%, #10cefe 98.64%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "Microsoft YaHei UI";
      font-size: 48px;
      font-style: normal;
      font-weight: 700;
      width: 444px;
      border-bottom: 3px solid #10cefe;
    }
  }
  .right {
    display: flex;
    justify-content: right;
    img {
      width: 38px;
      height: 48.384px;
      margin-top: 29px;
      margin-right: 30px;
    }
    .time {
      color: #cce3fe;
      margin-top: 44px;
      margin-right: 80px;
    }
  }
}
</style>
<style  lang="scss">
ul:not(.el-scrollbar__view) {
  list-style-type: none;
  margin: 0;
  padding: 0;
  li {
    margin: 0;
    padding: 0;
  }
}
.circle {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  top: 8px;
}
.commontitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  > .left {
    display: flex;
    padding-top: 6px;
    font-weight: 700;
    img {
      width: 171.859px;
      height: 27.139px;
    }
    span {
      height: 35px;
      color: #78dfff;
      font-family: "Microsoft YaHei UI";
      font-size: 24px;
      line-height: 1;
      margin-right: 16px;
    }
  }
}
.commonTitle1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }
  .right {
    position: relative;
    bottom: 3px;
    color: #78dfff;
    font-size: 14px;
    span {
      display: inline-block;
      color: #78dfff;
      width: 40px;
      font-size: 20px;
      position: relative;
      top: 2px;
      text-align: right;
    }
  }
}
.fullscreen-container {
  font-size: 20px;
  height: 100%;
  background: #08123e;
}
:deep(.el-select) {
  border: none;
}
.borderImgs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: column;
  > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
::-webkit-scrollbar-thumb {
  background-color: #3877f2; /* 滑块的背景色 */
  border-radius: 10px; /* 滑块的圆角 */
  // border: 2px solid #ffffff; /* 滑块边框 */
}
</style>