<template>
  <div class="home-container">
    <div class="side-box" :style="{ width: siderWidth }">
      <Sider :siderData="siderData" :isExpand="isExpand"></Sider>
    </div>

    <div
      class="main-box"
      :style="{ width: `calc(100% - ${siderWidth})`, left: siderWidth }"
    >
      <div class="header-box">
        <Header>
          <template #left>
            <el-button
              title="展开"
              v-if="isExpand"
              :icon="Expand"
              @click="changeSiderStatus"
            ></el-button>
            <el-button
              title="折叠"
              v-if="!isExpand"
              :icon="Fold"
              @click="changeSiderStatus"
            ></el-button>
          </template>
          <template #right>
            <el-button
              v-if="!isFullScreen"
              title="全屏"
              :icon="FullScreen"
              @click="fullScreen"
            ></el-button>
            <el-button
              style="margin-right: -4px"
              v-if="isFullScreen"
              title="取消全屏"
              :icon="Close"
              @click="screenfull.exit()"
            ></el-button>
            <!-- 模式切换弹出框 -->
            <el-popover
              placement="bottom"
              title="模式切换"
              :width="200"
              trigger="click"
            >
              <template #reference>
                <el-button
                  style="margin-right: 14px"
                  :icon="Setting"
                  circle
                ></el-button>
              </template>
              浅色
              <el-switch
                v-model="themeColor"
                @change="themeChange"
                style="--el-switch-off-color: #333333"
                inline-prompt
                :active-icon="Sunny"
                :inactive-icon="Moon"
              />
              暗色
            </el-popover>

            <el-dropdown>
              <div>
                用户
                <el-icon>
                  <arrow-down />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </Header>
      </div>
      <div class="content-box">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import Sider from "../../components/sider.vue";
import Header from "../../components/header.vue";
import {
  Expand,
  Fold,
  FullScreen,
  Close,
  ArrowDown,
  Setting,
  Sunny,
  Moon,
} from "@element-plus/icons-vue";
import screenfull from "screenfull";
import { ElMessage } from "element-plus";
import { ref } from "vue";
// 主题开关
let themeColor = ref(true);
// 主题切换
const themeChange = () => {
  let html = document.documentElement;
  themeColor.value ? (html.className = "") : (html.className = "dark");
};
const siderData = ref([
  {
    title: "Echarts大数据面板",
    path: "/echarts",
    icon: "Operation",
  },
  {
    title: "B站视频",
    path: "/video",
    icon: "VideoCamera",
  },
  {
    title: "其他",
    path: "/other",
    icon: "Edit",
  },
]);
// 左侧菜单宽度
let siderWidth = ref("240px");
// 菜单是否展开
let isExpand = ref(false);
// 是否全屏
let isFullScreen = ref(false);
// 控制左侧菜单是否展开
const changeSiderStatus = () => {
  isExpand.value = !isExpand.value;
  siderWidth.value = isExpand.value ? "64px" : "240px";
};
// 开启全屏
const fullScreen = () => {
  if (!screenfull.isEnabled) {
    ElMessage.warning("暂不不支持全屏");
    return false;
  }
  screenfull.toggle();
  screenfull.on("change", () => {
    if (screenfull.isFullscreen) {
      isFullScreen.value = true;
    } else {
      isFullScreen.value = false;
    }
  });
};
</script>
<style scoped lang="scss">
.home-container {
  position: relative;
  width: 100%;
  height: 100%;
  .side-box {
    position: absolute;
    left: 0;
    width: 240px;
    height: 100%;
  }
  .main-box {
    position: relative;
    background-color: rgb(225, 225, 235);
    height: 100%;
    width: calc(100% - 240px);
    left: 240px;
    overflow: hidden;
    .header-box {
      position: absolute;
      top: 0;
      height: 50px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 8px;
      border-bottom: 1px solid #ccc;
    }
    .content-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: calc(100% - 50px);
      box-sizing: border-box;
      padding: 6px 8px 8px 8px;
      border-radius: 6px;
    }
  }
}
</style>
