<template>
  <div class="home-container">
    <div class="header">
      <div class="header-left">
        <div
          class="nav-btn"
          :class="{ active: selectedLeftBtn === 'equity' }"
          @click="selectLeftBtn('equity')"
        >
          股权投资
        </div>
        <div
          class="nav-btn"
          :class="{ active: selectedLeftBtn === 'risk' }"
          @click="selectLeftBtn('risk')"
        >
          固定资产投资
        </div>
      </div>
      <div class="header-middile"></div>
      <div class="header-right">
        <div
          class="nav-btn"
          :class="{ active: selectedRightBtn === 'realestate' }"
          @click="selectRightBtn('realestate')"
        >
          房地产投资
        </div>
        <div
          class="nav-btn"
          :class="{ active: selectedRightBtn === 'finance' }"
          @click="selectRightBtn('finance')"
        >
          融资建设投资
        </div>
      </div>
      <div class="header-fullscreen">
        <span @click="toggleFullscreen" class="fullscreen-text">
          <el-icon :size="18">
            <full-screen />
          </el-icon>
          {{ isFullscreen ? "退出全屏" : "全屏" }}
        </span>
      </div>
    </div>
    <div class="content">
      <div class="content-btn">
        <span
          v-for="item in navList"
          :key="item.index"
          :class="{ active: selectedContentBtn === item.index }"
          @click="selectContentBtn(item)"
          >{{ item.name }}
        </span>
      </div>
      <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations">
        <ProjectApproval
          :currentName="selectedContentName"
          :isFullscreen="isFullscreen"
          v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
        />
        <Construct
          :isFullscreen="isFullscreen"
          v-else-if="selectedContentBtn === 2"
        />
        <Operation
          :isFullscreen="isFullscreen"
          v-else-if="selectedContentBtn === 4"
        />
        <TrialOperations
          :isFullscreen="isFullscreen"
          v-else-if="selectedContentBtn === 3"
        />
      </keep-alive>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script setup>
import Construct from "./components/Construct.vue";
import ProjectApproval from "./components/ProjectApproval.vue";
import Operation from "./components/Operation.vue";
import TrialOperations from "./components/trialOperations.vue";
import { reactive, ref, nextTick, watch, onMounted } from "vue";

const selectedLeftBtn = ref("equity");
const selectedRightBtn = ref("");
const selectedContentBtn = ref(1);
const selectedContentName = ref("立项");
const isFullscreen = ref(false);
const showPopup = ref(false);
const currentProject = ref({});
const popupStyle = ref({});

const navList = reactive([
  {
    index: 1,
    name: "立项",
  },
  {
    index: 2,
    name: "建设",
  },
  {
    index: 3,
    name: "试运营",
  },
  {
    index: 4,
    name: "运营",
  },
  // {
  //   index: 5,
  //   name: "转让",
  // },
  {
    index: 6,
    name: "退出",
  },
]);

const selectLeftBtn = (btn) => {
  selectedLeftBtn.value = btn;
  selectedRightBtn.value = "";
};

const selectRightBtn = (btn) => {
  selectedRightBtn.value = btn;
  selectedLeftBtn.value = "";
};

// 添加防抖功能，避免频繁切换造成的性能问题
let debounceTimer = null;
const selectContentBtn = (item) => {
  if (debounceTimer) {
    clearTimeout(debounceTimer);
  }
  debounceTimer = setTimeout(() => {
    selectedContentBtn.value = item.index;
    selectedContentName.value = item.name;
    sessionStorage.setItem("selectedContentBtn", selectedContentName.value);
  }, 100);
};

// 全屏切换功能
const toggleFullscreen = () => {
  const homeContainer = document.querySelector(".home-container");

  if (isFullscreen.value) {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }

    homeContainer.style.height = "100%";
    // 移除全屏类
    homeContainer.classList.remove("fullscreen");
  } else {
    // 进入全屏
    if (homeContainer.requestFullscreen) {
      homeContainer.requestFullscreen();
    } else if (homeContainer.webkitRequestFullscreen) {
      homeContainer.webkitRequestFullscreen();
    } else if (homeContainer.msRequestFullscreen) {
      homeContainer.msRequestFullscreen();
    }

    homeContainer.style.height = "100vh";
    // 添加全屏类
    homeContainer.classList.add("fullscreen");
  }

  isFullscreen.value = !isFullscreen.value;
};

// 页面初始化时设置sessionStorage
onMounted(() => {
  sessionStorage.setItem("selectedContentBtn", selectedContentName.value);
});

// 监听全屏变化事件
window.addEventListener("fullscreenchange", () => {
  const homeContainer = document.querySelector(".home-container");

  if (!document.fullscreenElement) {
    isFullscreen.value = false;
    if (homeContainer) {
      homeContainer.style.height = "100%";
      // 移除全屏类
      homeContainer.classList.remove("fullscreen");
    }
  } else {
    isFullscreen.value = true;
    if (homeContainer) {
      homeContainer.style.height = "100vh";
      // 添加全屏类
      homeContainer.classList.add("fullscreen");
    }
  }
});
</script>

<style scoped lang="less">
.home-container {
  // background-image: url("@/assets/images/bg.png");
  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #04427e, #095dcc);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .header {
    width: 100%;
    .vh(height, 80);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative; // 为绝对定位提供参考

    .header-fullscreen {
      position: absolute;
      right: 20px;
      bottom: 0; // 与导航按钮底部对齐
      cursor: pointer;
      span {
        color: white;
        font-weight: 700;
        .font(14);
        display: flex;
        align-items: center;
        gap: 6px;
      }
    }

    .header-middile {
      background-image: url("@/assets/images/头部bg.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      letter-spacing: 1px;
      font-weight: 400;
      font-family: "YouSheBiaoTiHei";
      .vh(height,75);
      display: flex;
      justify-content: center;
      align-items: center;
      @media screen and (max-width: 2560px) {
        flex: 1;
        .font(28);
      }
      @media screen and (max-width: 1920px) {
        flex: 0.7;
        .font(28);
      }

      @media screen and (max-width: 1440px) {
        .font(24);
        flex: 0.8;
      }
    }
    .header-left {
      display: flex;
      align-items: center;
      justify-content: center;
      .nav-btn {
        .font(16);
        cursor: pointer;
        color: #fff;
        font-family: YouSheBiaoTiYuan;
        display: flex;
        align-items: center;
        justify-content: center;
        .vh(height,36);
        .vw(width,155);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        &:not(.active) {
          background-image: url("@/assets/images/left-btn.png");
        }

        &.active {
          background-image: url("@/assets/images/left-hlightBtn.png");
        }
      }
    }
    .header-right {
      display: flex;
      justify-content: center;
      align-items: center;
      .nav-btn {
        .font(16);
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: YouSheBiaoTiYuan;
        .vh(height,36);
        .vw(width,155);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        &:not(.active) {
          background-image: url("@/assets/images/right-btn.png");
        }

        &.active {
          background-image: url("@/assets/images/right-hight-btn.png");
        }
      }
    }
  }
  .content {
    width: 100%;
    .vw(padding-left, 20);
    .vw(padding-right, 20);
    .vh(margin-top,-16px);
    height: calc(100vh - 190px);

    // 根据屏幕宽度调整高度，确保在不同尺寸下都能显示底部图标
    @media screen and (max-width: 1450px) {
      height: calc(100vh - 180px);
    }

    @media screen and (max-width: 1280px) {
      height: calc(100vh - 170px);
    }

    // 全屏模式下的高度调整
    .fullscreen & {
      height: calc(100vh - 120px);

      @media screen and (max-width: 1450px) {
        height: calc(100vh - 110px);
      }

      @media screen and (max-width: 1280px) {
        height: calc(100vh - 100px);
      }
      @media screen and (max-width: 1920px) {
        height: calc(100vh - 80px);
      }
    }
    .content-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        .font(14);
        width: 110px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        color: #fff;
      }

      // 立项按钮
      :nth-child(1) {
        background-repeat: no-repeat;
        background-size: 80% 80%;
        background-position: center;
        width: 115px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        &.active {
          background-image: url("@/assets/images/立项.png");
        }
        &:not(.active) {
          background-image: url("@/assets/images/initiation-default.png");
        }
      }

      // 退出按钮
      :nth-child(6) {
        background-repeat: no-repeat;
        background-size: 80% 80%;
        background-position: center;
        width: 111px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        &.active {
          background-image: url("@/assets/images/退出-active.png");
        }
        &:not(.active) {
          background-image: url("@/assets/images/退出.png");
        }
      }

      // 中间按钮（建设、运营、转止）
      :nth-child(2),
      :nth-child(3),
      :nth-child(4),
      :nth-child(5) {
        background-repeat: no-repeat;
        background-size: 80% 80%;
        background-position: center;
        width: 115px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin-left: -32px;
        background-image: url("@/assets/images/default-btn.png");
        &.active {
          background-image: url("@/assets/images/nav-hight-btn.png");
        }
      }
      :nth-child(6) {
        margin-left: -31px;
      }
    }
  }
  .bottom {
    background-image: url("@/assets/images/bottom.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    .vh(height, 110);
  }
}
</style>
