<template>
  <div class="home-container">
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="5" 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>
        </el-col>
        <el-col :span="14" class="title-section">
          <p class="system-title">葛洲坝集团交通投资有限公司投资决策分析系统</p>
        </el-col>
        <el-col :span="5" 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>
        </el-col>
      </el-row>
    </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";
import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs";

const selectedLeftBtn = ref("equity");
const selectedRightBtn = ref("");
const selectedContentBtn = ref(3);
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%;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .header {
    width: 100%;
    .vh(height, 80);
    text-align: center;
    .title-section {
      background-image: url("../../assets/images/header.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      font-weight: 700;
      letter-spacing: 3px;
      .vh(margin-top, -15);
      .font(24);
    }
    .header-left {
      display: flex;
      // justify-content: center;
      align-items: center;
      padding-left: 75px;
      .nav-btn {
        width: 100%;
        .vh(line-height, 40);
        cursor: pointer;
        color: #fff;
        .font(14);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        &: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 {
        width: 100%;
        .vh(line-height, 40);
        cursor: pointer;
        color: #fff;
        .font(14);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        &: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);
      text-align: center;
      span {
        .font(14);
        .vw(width,110);
        .vh(height,35);
        display: inline-block;
        cursor: pointer;
      }
      :nth-child(1) {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        .vw(width,105);
        .vh(height,35);
        .vh(line-height,35);
        text-align: center;
        .vw(margin-right,-7);
        background-image: url("../../assets/images/立项.png");
        &.active {
          background-image: url("../../assets/images/nav-hight-btn.png");
        }
      }
      :nth-child(5) {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        .vw(width,105);
        .vh(height,35);
        .vh(line-height,35);
        text-align: center;
        background-image: url("../../assets/images/退出.png");
        &.active {
          background-image: url("../../assets/images/退出-active.png");
        }
      }
      :nth-child(2),
      :nth-child(3),
      :nth-child(4) {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        .vw(width,108);
        .vh(height,35);
        .vh(line-height,35);
        .vw(margin-right,-7);
        text-align: center;
        background-image: url("../../assets/images/default-btn.png");
        &.active {
          background-image: url("../../assets/images/nav-hight-btn.png");
        }
      }
    }
  }
  .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>
