<template>
  <div class="layout-container">
    <!-- 左侧DIV -->
    <transition name="slide">
      <div v-show="showLeftPanel" class="left-panel">
        <div class="panel-content">
          <ChatView style="width: 100%" />
        </div>
      </div>
    </transition>

    <!-- 中间控制按钮 - 位于两个DIV之间 -->
    <div class="button-wrapper">
      <button
        class="toggle-btn"
        @click="toggleLeftPanel"
        :title="showLeftPanel ? '隐藏左侧' : '显示左侧'"
      >
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <polyline
            :points="showLeftPanel ? '15 18 9 12 15 6' : '9 18 15 12 9 6'"
          ></polyline>
        </svg>
      </button>
    </div>

    <!-- 右侧DIV -->
    <div class="right-panel">
      <div class="panel-content">
        <div id="ggb-element" style="height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { ChatView } from "@view/chat-view";

import { eventBus } from "@/utils/event-bus";

const showLeftPanel = ref(true);

const toggleLeftPanel = () => {
  showLeftPanel.value = !showLeftPanel.value;
};

let ggbApplet = null;
onMounted(() => {
  // 监听事件
  eventBus.on("call-ggb-command", handleCustomMethod);

  // 初始化GeoGebra小程序
  const ggbApp = new GGBApplet(
    {
      appName: "classic",
      showToolBar: true,
      showResetIcon: true,
      language: "zh_CN",
      // scaleContainerClass: "right-panel",
      // allowUpscale: true,
      // perspective: "G",
    },
    true
  );
  ggbApp.inject("ggb-element");
  // 等待GeoGebra加载完成
  const checkGGB = setInterval(() => {
    if (
      window.ggbApplet &&
      typeof window.ggbApplet.evalCommand === "function"
    ) {
      ggbApplet = window.ggbApplet;
      clearInterval(checkGGB);
      console.log("GeoGebra已加载完成");
    }
  }, 100);  
});

onUnmounted(() => {
  // 移除监听
  eventBus.off("call-ggb-command", handleCustomMethod);
});

// 定义要调用的方法
const handleCustomMethod = (data: any) => {
  if (data.ggb) {
    executeBatchCommands(data.ggb);
  }
};

const executeBatchCommands = (cmds) => {
  if (ggbApplet && cmds) {
    const commands = cmds
      .split("\n")
      .map((cmd) => cmd.trim())
      .filter((cmd) => cmd.length > 0);

    if (commands.length === 0) return;

    commands.forEach((cmd, index) => {
      try {
        ggbApplet.evalCommand(cmd);
      } catch (error) {
        console.error(`命令执行错误 (${index + 1}):`, error);
      }
    });
  }
};

</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  gap: 0;
  align-items: stretch;
}

.left-panel {
  border-radius: 15px;
  backdrop-filter: blur(4px);
  border: 1px solid #ddd;
  min-width: 450px;
  flex: 1;
  transition: all 0.3s ease;
  overflow: hidden;
}

.right-panel {
  border-radius: 15px;
  backdrop-filter: blur(4px);
  border: 1px solid #ddd;
  flex: 2;
  transition: all 0.3s ease;
}

.panel-content {
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.panel-content h3 {
  margin: 0 0 20px 0;
  font-size: 1.5em;
  font-weight: 600;
}

.panel-content p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
}

/* 按钮包装器 - 确保按钮位于两个DIV之间 */
.button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  z-index: 10;
}

.toggle-btn {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  color: #667eea;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.toggle-btn:active {
  transform: scale(0.95);
}

/* 过渡动画 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  min-width: 0 !important;
  flex: 0 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
    gap: 10px;
  }

  .left-panel {
    min-width: unset;
    max-height: 40%;
  }

  .button-wrapper {
    padding: 5px 0;
    order: -1; /* 在移动设备上将按钮移到顶部 */
  }

  .toggle-btn {
    transform: rotate(90deg);
  }

  .slide-enter-from,
  .slide-leave-to {
    transform: translateY(-100%);
  }
}

/* 添加分隔线效果 */
.button-wrapper::before,
.button-wrapper::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 40%;
  background: rgba(255, 255, 255, 0.2);
}

.button-wrapper::before {
  left: 0;
}

.button-wrapper::after {
  right: 0;
}
</style>
