<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>
    <div class="content">
      <div class="fullscreen-btn">
        <span @click="toggleFullscreen" class="fullscreen-text">
          <el-icon :size="18">
            <full-screen />
          </el-icon>
          {{ isFullscreen ? "退出全屏" : "全屏" }}
        </span>
      </div>
      <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>
      <ProjectApproval
        :currentName="selectedContentName"
        v-if="
          selectedContentBtn === 1 ||
          selectedContentBtn === 4 ||
          selectedContentBtn === 5
        "
      />
      <Construct v-else-if="selectedContentBtn === 2" />
      <Operation v-else />
    </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 { reactive, ref } 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: "退出",
  },
]);

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

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

const selectContentBtn = (item) => {
  selectedContentBtn.value = item.index;
  selectedContentName.value = item.name;
};

const showProjectPopup = (event) => {
  currentProject.value = {
    name: "项目001",
    data: [
      { label: "数据01", value: "3654.89", unit: "单位" },
      { label: "数据02", value: "3654.89", unit: "单位" },
      { label: "数据03", value: "3654.89", unit: "单位" },
    ],
  };
  popupStyle.value = {
    left: `${event.clientX}px`,
    top: `${event.clientY - 100}px`,
  };
  showPopup.value = true;
};

// 全屏切换功能
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%";
  } else {
    // 进入全屏
    if (homeContainer.requestFullscreen) {
      homeContainer.requestFullscreen();
    } else if (homeContainer.webkitRequestFullscreen) {
      homeContainer.webkitRequestFullscreen();
    } else if (homeContainer.msRequestFullscreen) {
      homeContainer.msRequestFullscreen();
    }

    homeContainer.style.height = "100vh";
  }

  isFullscreen.value = !isFullscreen.value;
};

// 监听全屏变化事件
window.addEventListener("fullscreenchange", () => {
  if (!document.fullscreenElement) {
    isFullscreen.value = false;
    const homeContainer = document.querySelector(".home-container");
    if (homeContainer) homeContainer.style.height = "100%";
  } else {
    isFullscreen.value = true;
    const homeContainer = document.querySelector(".home-container");
    if (homeContainer) homeContainer.style.height = "100vh";
  }
});
</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-color: #04427e;
  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;
    .header-middile {
      background-image: url("@/assets/images/header.png");
      background-repeat: no-repeat;
      background-position: center;
      // background-size: 170% 100%;
      background-size: cover;
      letter-spacing: 1px;
      font-weight: 400;
      font-family: "YouSheBiaoTiHei";
      // .vw(width,950);
      .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;
      }

      // @media screen and (max-width: 1280px) {
      //   flex: 0.4;
      //   .font(20);
      // }
    }
    .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 {
    flex: 1;
    .vw(padding-left, 20);
    .vw(padding-right, 20);
    .content-btn {
      .vh(margin-top,-10);
      .vh(margin-bottom,20);
      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(5) {
        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) {
        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(5) {
        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, 80);
  }
  .fullscreen-btn {
    display: flex;
    cursor: pointer;
    span {
      margin-left: auto;
      color: white;
      font-weight: 700;
      .font(16);
      display: flex;
      align-items: center;
      gap: 6px;
    }
  }
}
</style>
