<template>
  <div class="header-actions">
    <!-- 全屏 -->
    <div class="btn-action" @click="handleFullScreen">
      <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
        <el-icon :size="14">
          <full-screen />
        </el-icon>
      </el-tooltip>
    </div>

    <!-- 用户名下拉菜单 -->
    <el-dropdown class="user-name" trigger="hover" tabindex="-1" @command="handleCommand">
      <div class="user-avator">
        <img src="../../Assets/img/newHeadPortrait.png" />
        <span class="a-dropdown-link">{{ user.userName }}</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="theme">主题设置</el-dropdown-item>
          <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <!-- 主题设置抽屉 -->
  <el-drawer v-model="showThemeDrawer" direction="rtl" size="320px" :with-header="false">
    <div class="theme-drawer-header">主题设置</div>

    <div class="theme-section">
      <div class="theme-label">系统主色</div>
      <div class="theme-colors">
        <div
          v-for="item in themeColors"
          :key="item.value"
          class="color-dot"
          :style="{ background: item.value }"
          :class="{ active: currentColor === item.value }"
          @click="changeColor(item.value)"
        >
          <el-icon v-if="currentColor === item.value" color="#fff" :size="14"><check /></el-icon>
        </div>
        <el-color-picker v-model="customColor" size="small" @change="onCustomColor" />
      </div>
    </div>

    <div class="theme-section">
      <div class="theme-label">外观模式</div>
      <el-radio-group v-model="currentMode" @change="changeMode">
        <el-radio-button label="light">浅色</el-radio-button>
        <el-radio-button label="dark">深色</el-radio-button>
        <el-radio-button label="system">跟随系统</el-radio-button>
      </el-radio-group>
    </div>

    <div class="theme-section">
      <div class="theme-label">导航布局</div>
      <div class="theme-layouts">
        <div
          class="layout-option"
          :class="{ active: currentLayout === 'sidebar' }"
          @click="changeLayout('sidebar')"
        >
          <div class="layout-preview layout-preview--sidebar">
            <div class="lp-side"></div>
            <div class="lp-main">
              <div class="lp-header"></div>
              <div class="lp-content"></div>
            </div>
          </div>
          <span class="layout-option-label">左右布局</span>
        </div>
        <div
          class="layout-option"
          :class="{ active: currentLayout === 'topnav' }"
          @click="changeLayout('topnav')"
        >
          <div class="layout-preview layout-preview--topnav">
            <div class="lp-topbar"></div>
            <div class="lp-content"></div>
          </div>
          <span class="layout-option-label">上下布局</span>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { computed, getCurrentInstance, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage as $message } from "element-plus";
import { memberService } from "@/ApiService/memberService";
import { themeColors, applyThemeColor, applyDarkMode, applyLayout, getLayout } from "@/Utils/themeUtils";

const fullscreen = ref(false);
const showThemeDrawer = ref(false);
const currentColor = ref(localStorage.getItem('theme-color') || '#6366f1');
const customColor = ref(null);
const currentMode = ref(localStorage.getItem('theme-mode') || 'light');
const currentLayout = ref(getLayout());

const $router = useRouter();
const $common = getCurrentInstance().appContext.config.globalProperties.$common;

const user = computed(() => {
  return $common.getUser();
});

const changeColor = (hex) => {
  currentColor.value = hex;
  customColor.value = null;
  applyThemeColor(hex);
};

const onCustomColor = (hex) => {
  if (hex) {
    currentColor.value = hex;
    applyThemeColor(hex);
  }
};

const changeMode = (mode) => {
  applyDarkMode(mode);
};

const changeLayout = (layout) => {
  currentLayout.value = layout;
  applyLayout(layout);
  window.dispatchEvent(new Event('layout-change'));
};

const handleFullScreen = () => {
  let element = document.documentElement;
  if (fullscreen.value) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  fullscreen.value = !fullscreen.value;
};

const handleCommand = (command) => {
  if (command === "theme") {
    showThemeDrawer.value = true;
  } else if (command === "loginout") {
    memberService.logOut().then((res) => {
      if (res.code == 0) {
        $message.success("退出成功");
        setTimeout(() => {
          $router.replace("/login");
          sessionStorage.removeItem("loginInfo");
          sessionStorage.removeItem("phone");
        }, 500);
      } else {
        $message.error(res.err);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.header-actions {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-lg);
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.btn-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color 0.2s, background 0.2s;

  &:hover {
    color: var(--color-primary);
    background: var(--color-primary-bg);
  }
}

.user-avator {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avator img {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-right: 6px;
}

.a-dropdown-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* 主题设置 */
.theme-drawer-header {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.theme-section {
  margin-bottom: var(--spacing-xl);
}

.theme-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.theme-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
}

.color-dot:hover {
  transform: scale(1.15);
}

.color-dot.active {
  box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 4px currentColor;
}

/* 布局选项 */
.theme-layouts {
  display: flex;
  gap: var(--spacing-lg);
}

.layout-option {
  cursor: pointer;
  text-align: center;

  &.active .layout-preview {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-bg);
  }

  &.active .layout-option-label {
    color: var(--color-primary);
    font-weight: 600;
  }
}

.layout-option-label {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.layout-preview {
  width: 80px;
  height: 56px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:hover {
    border-color: var(--color-primary-light);
  }
}

.layout-preview--sidebar {
  display: flex;
  .lp-side {
    width: 20px;
    background: var(--sidebar-bg);
  }
  .lp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    .lp-header {
      height: 10px;
      background: var(--color-border-light);
    }
    .lp-content {
      flex: 1;
      background: var(--color-bg-page);
    }
  }
}

.layout-preview--topnav {
  display: flex;
  flex-direction: column;
  .lp-topbar {
    height: 14px;
    background: var(--sidebar-bg);
  }
  .lp-content {
    flex: 1;
    background: var(--color-bg-page);
  }
}
</style>
