<script setup lang="ts">
import CpmdHeader from '@/components/CpmdHeader.vue';

import CpmdFooter from '@/components/CpmdFooter.vue';
import { onMounted, onUnmounted, ref } from 'vue'
const homeHeaderOut = ref<any>()
const height = ref<number>()
//心灵探索高度
const xlts = ref<number>()

//计划提醒的高度
const plan_jihua = ref<number>()

//显示标题及文本的标志
const flag_text = ref<number>(1)
//定时器标志
const flag_time = ref<any>()

//刚进入页面就将高度设置为页面需要的
onMounted(() => {
  setHeight()
  window.addEventListener('resize', setHeight);
  forStatus()
  //进到界面开始轮询
})
//界面销毁函数


//轮旋切换页面的方法
const forStatus = () => {
  clearInterval(flag_time.value)
  // flag_text.value == 2
  flag_time.value = setInterval(() => {

    flag_text.value = flag_text.value + 1
    if (flag_text.value > 4) {
      flag_text.value = 1
    }


  }, 3000)
}

const setHeight = () => {
  console.log('----------------------------------------------')
  //-------设置背景图的高度---------//
  const width = homeHeaderOut.value
  console.log(width.offsetWidth)
  height.value = width.offsetWidth * 1000 / 1920
  xlts.value = height.value - 100
  plan_jihua.value = height.value + 100
}
//退出页面销毁 方法
onUnmounted(() => {
  clearInterval(flag_time.value)
  window.removeEventListener('resize', setHeight)
})

//鼠标移入事件--状态进行切换
const brightStatus = (val: number) => {
  console.log(val)
  clearInterval(flag_time.value)
  flag_text.value = val
}

//鼠标移出事件事件--调用轮询器
const brightStatusLevel = () => {
  forStatus()
}


</script>

<template>
  <!-- 最外边宽度100% -->

  <div class="home_header_out" ref="homeHeaderOut" :style="{ height: height + 'px' }">
    <!-- 此处宽度最小 头部包含导航栏为1200 -->
    <div class="home_header_inner">
      <CpmdHeader />
      <div :style="{ height: xlts + 'px' }">
        <img class="xlts_img" style="margin-top:40px" src="../assets/home/home_text.png" />
        <div class="chart_student">
          <div class="student1_group">
            <img class="student1_text" v-show="flag_text == 1" src="../assets/home/student1_text.png" />
            <img class="student1" v-on:mouseenter="brightStatus(1)" v-on:mouseleave="brightStatusLevel"
              v-show="flag_text !== 1" src="../assets/home/student1_default.png" />
            <img class="student1" v-on:mouseenter="brightStatus(1)" v-on:mouseleave="brightStatusLevel"
              v-show="flag_text == 1" src="../assets/home/student1_active.png" />
          </div>
          <div class="student2_group">
            <img class="student2_text" v-show="flag_text == 2" src="../assets/home/student2_text.png" />
            <img class="student2" v-on:mouseenter="brightStatus(2)" v-on:mouseleave="brightStatusLevel"
              v-show="flag_text !== 2" src="../assets/home/student2_default.png" />
            <img class="student2" v-on:mouseenter="brightStatus(2)" v-on:mouseleave="brightStatusLevel"
              v-show="flag_text == 2" src="../assets/home/student2_active.png" />
          </div>

          <img class="student3_text" v-show="flag_text == 3" src="../assets/home/student3_text.png" />
          <img class="student3" v-on:mouseenter="brightStatus(3)" v-on:mouseleave="brightStatusLevel"
            v-show="flag_text !== 3" src="../assets/home/student3_default.png" />
          <img class="student3" v-on:mouseenter="brightStatus(3)" v-on:mouseleave="brightStatusLevel"
            v-show="flag_text == 3" src="../assets/home/student3_active.png" />

          <img class="student4_text" v-show="flag_text == 4" src="../assets/home/student4_text.png" />
          <img class="student4" v-on:mouseenter="brightStatus(4)" v-on:mouseleave="brightStatusLevel"
            v-show="flag_text !== 4" src="../assets/home/student4_default.png" />
          <img class="student4" v-on:mouseenter="brightStatus(4)" v-on:mouseleave="brightStatusLevel"
            v-show="flag_text == 4" src="../assets/home/student4_active.png" />

        </div>



      </div>

    </div>
    <div class="home_mid_plan_des" ref="plan_jihua">
      <div class="home_mid_plan_close">
        <img style="right:0" width="20px" src="../assets/home/close.png" />
      </div>

      <div class="home_mid_plan_title">测试任务</div>
      <div class="home_mid_plan_d">你的<span class="home_mid_plan_font">测试计划</span>中有新的<span
          class="home_mid_plan_font">测试任务</span>，赶紧点击下方按钮去看看吧！
      </div>
      <div class="home_mid_plan_button">
        <div class="see_button">去看看</div>
      </div>
    </div>
  </div>
  <div class="home_mid">

    <div class="home_mid_plan" ref="plan_jihua" :style="{ top: plan_jihua + 'px' }">
      <div class="badge_custom">
        122
      </div>
      <img src="../assets/home/jihua_img.png" />
    </div>
    <div class="kepu_title">科普小课堂</div>
    <div class="kepu_title_sub">心灵成长不迷茫，科普小课堂为你点亮前行的方向</div>
    <div class="man1_group">
      <div class="man1">
        <img class="man1_img" src="../assets/home/people1.png" />
      </div>
      <div class="des">
        <div class="des_inner">
          &nbsp;&nbsp;&nbsp;&nbsp;大学生的焦虑情绪往往源自多重压力的叠加效应，其中学业负担与未来职业的不确定性占据主导地位。
          一方面，大学教育的高标准与快节奏，如繁重的课程任务、竞争激烈的考试、科研项目的压力，以及对学术成就的追求，
          都无形中增加了学生的心理负担，让他们时常处于紧张与不安之中。另一方面，步入社会的临近，使得就业市场的严酷现实成为心头大石，
          学生们担忧自己的能力是否足够，能否在毕业后顺利找到理想工作，这种对未来的不确定感进一步加剧了焦虑情绪。
        </div>

      </div>
    </div>
    <div class="man2_group">

      <div class="des2">
        <div class="des2_inner">
          &nbsp;&nbsp;&nbsp;&nbsp;
          失眠，对于许多大学生而言，已成为一种常见的困扰，它不仅影响睡眠质量，还可能波及到日常的学习效率与生活质量。
          究其原因，多重因素交织其中。首先，学业压力无疑是首当其冲的罪魁祸首。
          大学生活充满了挑战，无论是课程作业的紧迫、考试复习的重负，还是科研项目的压力，都可能让学生陷入焦虑与紧张之中，这种心理状态直接转化为夜晚辗转反侧的失眠。
          其次，快节奏的生活方式与不规律的作息习惯也难辞其咎。深夜赶工、晨早赶课，加上社交媒体与电子产品的诱惑，打乱了生物钟的正常节律，使身体难以在需要的时候自然进入睡眠状态。
          再者，生活环境的噪音与光线污染，或是室友的作息差异，也可能成为影响睡眠质量的外部因素。
        </div>

      </div>
      <div class="man2">
        <img class="man2_img" src="../assets/home/people2.png" />
      </div>
    </div>
    <div class="man1_group">
      <div class="man1">
        <img class="man1_img" src="../assets/home/people3.png" />
      </div>
      <div class="des">
        <div class="des_inner">
          &nbsp;&nbsp;&nbsp;&nbsp;刚刚步入大学校园的萌新们，是不是感觉到有些迷茫？
          刚刚步入大学，周围的一切都充满了未知与惊喜，你可能会觉得有点晕头转向，就像是第一次迷路在了巨大的游乐场里。面对全新的环境、自由的时间管理以及未来的不确定性，感到迷茫是非常正常的情绪反应。
          这是人生旅程中的一个重要转折点，意味着你需要从高中时期的被指导模式过渡到自主学习和自我管理的新阶段。
        </div>

      </div>
    </div>
    <div class="get_more">
      <img src="../assets/home/get_more.png" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.badge_custom {
  position: absolute;
  background-color: #ED2626;
  // left: 90px;
  right: 0;
  top: 0px;

  // line-height: 18px;
  color: 10px;
  padding: 8px;
  font-weight: 300;
  font-size: 16px;
  color: #ffffff;
  border-radius: 50%;
}



.home_header_out {
  // position: relative;
  width: 100%;
  min-width: 1200px;
  // background-color: rgb(151, 163, 202);
  // height: 600px;
  background-image: url('../assets/home/header_bg.png');
  background-repeat: no-repeat;
  background-size: contain;

  // height: 106.667vw;
  // height: 41.667vw;
  // height: calc(100% * 1000px / 1920px);
  // height: calc(100vmax * 1000px / 1920px);
  //估计是需要动态
  //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
  .home_mid_plan_des {
    border-top-left-radius: 30px;
    padding: 10px 5px 20px 10px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 600px;
    background-color: #ffffff;

    .home_mid_plan_close {
      cursor: pointer;
      text-align: right;
    }

    .home_mid_plan_title {
      height: 38px;
      font-weight: normal;
      font-size: 20px;
      font-weight: 700;
      color: #000000;
      // line-height: 95px;
    }

    .home_mid_plan_d {
      height: 38px;
      font-weight: normal;
      font-size: 16px;
      font-weight: 500;
      color: #000000;

      // line-height: 95px;
      .home_mid_plan_font {
        color: #48D68E
      }
    }

    .home_mid_plan_button {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: end;
      // text-align: right;

      .see_button {
        cursor: pointer;
        // width: 100px;
        border-radius: 12px;
        border: 3px solid #48D68E;
        color: #ffffff;
        background-color: #000000;
        margin-right: 20px;
        padding: 8px 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
      }
    }

  }



  .home_header_inner {
    // position: absolute;
    //需要水平居中
    // top: 0;
    // bottom: 0;
    min-height: 1;
    left: 0;
    right: 0;
    margin: auto;
    height: 100px;
    width: 1200px;

    .xlts_img {
      height: 36%;
      //还剩百分之64%
      // width: 100%;
    }

    .chart_student {
      height: 64%;
      position: relative;

      .student1_group {
        position: absolute;
        bottom: 50%;
        left: 22%;
        height: 200px;
        width: 200px;

        .student1 {
          cursor: pointer;
          position: absolute;
          bottom: -62%;
          left: -8%;
          height: 52%;
        }

        .student1_text {
          cursor: pointer;
          position: absolute;
          bottom: -42%;
          left: -86%;
          height: 80%;
        }
      }


      .student2_group {
        position: absolute;
        bottom: 27%;
        left: 34%;
        height: 200px;
        width: 200px;

        .student2 {
          cursor: pointer;
          position: absolute;

          bottom: -1%;
          left: 72%;
          height: 76%;
        }

        .student2_text {
          cursor: pointer;
          position: absolute;
          bottom: 60%;

          left: -8%;
          height: 77%;
        }
      }


      .student3 {
        cursor: pointer;
        position: absolute;
        bottom: 5%;
        left: 62%; // w
        height: 40%;
      }

      .student3_text {
        cursor: pointer;
        position: absolute;
        bottom: 44%;
        left: 61%;
        height: 40%;
      }

      .student4 {
        cursor: pointer;
        position: absolute;
        bottom: 30%;
        left: 89%; // w
        height: 40%;
      }

      .student4_text {
        cursor: pointer;
        position: absolute;
        bottom: 61%;
        left: 89%;
        height: 40%;
      }
    }


  }
}

.home_mid {
  // background-color: blanchedalmond;
  width: 1200px;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 40px;
  // position: relative;

  .home_mid_plan {
    cursor: pointer;
    // top: 1000px;
    position: absolute;
    right: 0px;

    // top: -30px;
    img {
      width: 100px;
    }
  }



  .kepu_title {
    text-align: center;

    font-size: 50px;
    color: #111111;
    line-height: 95px;

    // width: 100%;
    // left: 0;
    // right: 0;
    // margin: auto
  }

  .kepu_title_sub {
    margin-top: 30px;
    text-align: center;
    font-size: 28px;
    color: #48D68E;
    line-height: 26px;
  }

  .man1_group {
    margin-top: 60px;
    height: 100%;
    display: flex;

    .man1 {
      position: relative;
      width: 327px;
      // height: 100%;

      // height: 100%
      .man1_img {
        position: absolute;
        bottom: 0;
        /* bottom: 0px; */
        /* height: auto; */
        width: 100%;
        left: 100px
      }

    }

    .des {
      border: #48D68E solid 5px;
      border-radius: 40px;
      padding: 20px;
      letter-spacing: 6px;
      flex: 1;

      .des_inner {
        border: 1px dashed #48D68E;
        border-radius: 40px;
        padding-bottom: 40px;
        padding-top: 30px;
        padding-left: 100px;
        padding-right: 20px;
        letter-spacing: 6px;
        font-weight: normal;
        font-size: 24px;
        color: #333333;
        line-height: 40px;
      }
    }
  }

  .man2_group {
    margin-top: 60px;
    height: 100%;
    display: flex;

    .man2 {
      position: relative;
      width: 327px;
      // height: 100%;

      // height: 100%
      .man2_img {
        position: absolute;
        bottom: 0;
        /* bottom: 0px; */
        /* height: auto; */
        width: 100%;
        left: -100px
      }

    }

    .des2 {
      border: #48D68E solid 5px;
      border-radius: 40px;
      padding: 20px;
      letter-spacing: 6px;
      flex: 1;

      .des2_inner {
        border: 1px dashed #48D68E;
        border-radius: 40px;
        padding-bottom: 40px;
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 100px;
        letter-spacing: 6px;
        font-weight: normal;
        font-size: 24px;
        color: #333333;
        line-height: 40px;
      }
    }
  }

  .get_more {
    text-align: center;

    img {
      width: 300px;
      margin-top: 60px;
      margin-bottom: 60px;
    }
  }
}

.home_footer_out {
  width: 100%;
  background-color: #000000;
}
</style>
