<!--
 * @Date: 2024-10-18 17:57:33
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-21 18:13:26
 * @FilePath: /hager/src/views/user/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-user-page">
    <div v-if="!is_xs" class="centered-div">
      <el-row style="background-color: #EFF7FB;">
        <el-col :span="13">
          <div class="user-box">
            <div class="user-logo"></div>
            <div class="user-bg"></div>
          </div>
        </el-col>
        <el-col :span="11">
          <router-view id="router-view" style="background-color: #FFF;"></router-view>
        </el-col>
      </el-row>
    </div>
    <div v-else class="centered-div xs">
      <div class="user-logo-xs">
        <img src="https://cdn.ipadbiz.cn/hager/img/user/logo02.png" style="width: auto; height: 2rem;">
      </div>
      <router-view id="router-view"></router-view>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import $ from 'jquery';

export default {
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {
    // 设置用户盒子高度
    // 监听窗口的 resize 事件
    window.addEventListener('resize', this.handleHeight);
    // 判断是否被遮挡，让屏幕能滚动
    if (!this.isElementInViewport('#router-view')) { // #router-view 被屏幕遮挡
      $('.hager-user-page').css('height', 'auto')
    } else {
      $('.hager-user-page').css('height', '100vh')
    }
  },
  methods: {
    handleHeight () {
      //
      if ($('#router-view').outerHeight() > $('.user-box').height()) {
        $('.user-box').height($('#router-view').outerHeight())
      }
      // 判断是否被遮挡，让屏幕能滚动
      if (!this.isElementInViewport('#router-view')) { // #router-view 被屏幕遮挡
        $('.hager-user-page').css('height', 'auto')
      } else {
        $('.hager-user-page').css('height', '100vh')
      }
    },
    isElementInViewport(element) {
      var rect = $(element)[0].getBoundingClientRect();  // 获取元素相对于视口的大小和位置

      // 检查是否完全在视口内
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&  // 窗口高度
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)        // 窗口宽度
      );
    }
  },
  beforeDestroy() {
    // 在组件销毁前移除监听器，防止内存泄漏
    window.removeEventListener('resize', this.handleHeight);
  }
}
</script>

<style lang="less" scoped>
  .hager-user-page {
    background-image: url(https://cdn.ipadbiz.cn/hager/img/user/dd-bg.png);
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .centered-div {
      margin: 15rem 20vw 0;
      background-color: #fff; /* 设置背景颜色，方便看到元素 */
      box-shadow: 0rem 0.25rem 0.5rem 0.08rem rgba(0,0,0,0.16);
      border-radius: 5px;
      &.xs {
        margin: 10rem 1.5rem;
      }
      .user-box {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .user-logo {
        background-image: url(https://cdn.ipadbiz.cn/hager/img/user/logo02.png);
        height: 15vh;
        width: 15vw;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 2rem;
      }
      .user-bg {
        background-image: url(https://cdn.ipadbiz.cn/hager/img/user/l-bg.png);
        height: 36vh;
        width: 45vw;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
      .user-logo-xs {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 6rem;
        justify-content: center;
      }
    }
  }
</style>