<template>

  <dv-full-screen-container class="screen-container">
    <!-- 管理系统入口按钮 -->
    <div @click="goToAdmin" class="management-entry" style="width:100px;height:30px;">进入管理系统</div>
    <!-- 顶部导航栏 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="system-title-wrapper">
        <div class="system-title">泽宏老化监控平台</div>
        <div class="title-line"></div> <!-- 标题下的横线 -->
      </div>

      <!-- 右侧菜单组 -->
      <div class="menu-group">
        <div
          v-for="(item, index) in menuItems"
          :key="index"
          class="diamond-box"
          @click="selectMenu(index)"
          :class="{ active: selectedMenu === index }"
        >
          <span class="icon">{{ item.icon }}</span>
          <span class="text">{{ item.text }}</span>
          <!-- 选中时显示的底部线条 -->
          <div v-if="(selectedMenu === 3 ? 0 : selectedMenu) === index" class="active-line"></div>
        </div>
      </div>

      <!-- 外部装饰线 -->
      <div class="decoration-line top-line"></div>
      <div class="decoration-line right-line"></div>
      <div class="decoration-line bottom-line"></div>
    </div>

    <!-- 内容展示区域 -->
    <div class="content-area">
      <!-- 左侧机械臂面板 -->
      <div class="robotic-scroll-container">
        <RoboticArm class="robotic-arm-panel" />
      </div>

      <div class="scroll-container">
        <transition name="fade" mode="out-in">
<!--          <component :is="currentComponent" />-->
          <!-- 在动态组件中传递参数 -->
          <!-- 添加返回事件处理 -->
          <component
            :is="currentComponent"
            :modbusDeviceData="modbusDeviceData"
            @cabinet-click="handleCabinetClick"
            @go-back="handleGoBack"
          />
        </transition>
      </div>
    </div>

  </dv-full-screen-container>
</template>

<script>
import AgingCabinetBoard from './components/AgingCabinetBoard.vue'
import AgingLayer from './components/AgingLayer'
import RealTimeData from './components/RealTimeData'
import TrayBinding from "@/views/screen/components/TrayBinding";
import TrayInformation from "@/views/screen/components/TrayInformation";

import RoboticArm from './components/RoboticArm.vue';
export default {
  components: {
    AgingCabinetBoard,
    AgingLayer,
    RealTimeData,
    TrayBinding,
    TrayInformation,
    RoboticArm
  },
  data() {
    return {
      selectedMenu: 0, // 默认选中第一个
      menuItems: [
        { icon: '📷', text: '老化柜看板', component: 'AgingCabinetBoard' },
        { icon: '📊', text: '托盘信息', component: 'TrayInformation' },
        { icon: '📦', text: '实时数据', component: 'RealTimeData' },
      ],
      selectMenuItems: [
        { icon: '📷', text: '老化柜看板', component: 'AgingCabinetBoard' },
        { icon: '📊', text: '托盘信息', component: 'TrayInformation' },
        { icon: '📦', text: '实时数据', component: 'RealTimeData' },
        { icon: '🔍', text: '老化层详情', component: 'AgingLayer' }, // 新增菜单项,
        { icon: '🔍', text: '托盘与设备绑定', component: 'TrayBinding' } // 新增菜单项
      ],
      modbusDeviceData: null // 存储传递的柜子ID
    }
  },

  computed: {
    currentComponent() {
      return this.selectMenuItems[this.selectedMenu].component;
    },
  },
  methods: {
    // 处理返回事件
    handleGoBack(selectedMenu) {
      // 返回老化柜看板（菜单索引 0）
      // 返回托盘信息列表 菜单索引 3
      this.selectedMenu = selectedMenu;
      this.modbusDeviceData = null;
    },
    // 接收从 AgingCabinetBoard 传递的柜子ID
    handleCabinetClick(modbusDeviceData,selectedMenu) {
      this.modbusDeviceData = modbusDeviceData;
      // 切换到 AgingLayer 组件（对应菜单索引 3）
      this.selectedMenu = selectedMenu;
    },
    selectMenu(index) {
      // if(index === 3) {
      //   this.goToAdmin();
      // } else if( index === 2) {
      //   this.msgSuccess("你选中了第三个");
      // } else if( index === 1) {
      //   this.msgSuccess("你选中了第二个");
      // } else if( index === 0) {
      //   this.msgSuccess("你选中了第一个");
      // }
      this.selectedMenu = index;
    },
    goToAdmin() {
      this.$router.push('/index') // 或者 '/dashboard' 如果已经登录
    },
  }
}
</script>

<style scoped>
/* “进入管理系统”正方形按钮 */
.management-entry {
  position: fixed;
  top: 20px;
  right: 60px; /* 根据图例的位置调整，避免重叠 */
  width: 130px;
  height: 40px;
  background-color: #409EFF;
  color: #fff; /* Element UI 主色调 */
  border: 1px solid #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transition: all 0.2s ease-in-out;
}
.screen-container {
  background-color: #030b2a;
  color: white;
  font-family: Arial, sans-serif;
}
.management-entry:hover {
  background-color: #ecf5ff;
  color: #1a73e8;
}

.header {
  display: flex;
  align-items: center;
  padding: 30px 40px;
  position: relative;
}

/* 标题 */
.system-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.system-title {
  margin-right: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}
.title-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #1a73e8, transparent);
  margin-top: 10px;
}


/* 选中时的底部线条 */
.active-line {
  position: absolute;
  bottom: -6px; /* 略微低于盒子 */
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #409EFF, transparent);
  animation: lineGrow 0.3s forwards;
}

/* 菜单组 */
.menu-group {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* 菱形盒子 */
.diamond-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  position: relative;
  /* 整体倾斜一点，模拟菱形外观 */
  transform: rotate(0deg);
  font-family: Arial, sans-serif;
  color: white;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.diamond-box:hover {
  transform: rotate(0deg) scale(1.05);
}

.diamond-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #409EFF;
  transform: rotate(0deg);
  box-sizing: border-box;
  z-index: -1;
  background-color: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

/* 装饰线样式 */
.decoration-line {
  position: absolute;
  background: linear-gradient(to right, transparent, #409EFF, transparent);
  height: 2px;
  opacity: 0.8;
  animation: lineMove 4s infinite alternate ease-in-out;
}

.top-line {
  top: 0;
  left: -30%;
  width: 160%;
}

.right-line {
  right: -20%;
  width: 140%;
  top: 0;
  bottom: 0;
  transform: rotate(90deg);
  transform-origin: right top;
}

.bottom-line {
  bottom: 0;
  left: -30%;
  width: 160%;
}

/* 动画效果 */
@keyframes lineMove {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}


/* 动画：从中间向两边展开 */
@keyframes lineGrow {
  0% {
    width: 0%;
    margin: 0 auto;
  }
  100% {
    width: 100%;
    margin: 0 auto;
  }
}
.content-area {
  padding: 20px 20px;
  flex: 1;
  min-height: calc(100vh - 150px);
  overflow-y: auto;
  display: flex; /* 添加flex布局 */
  gap: 20px; /* 添加间距 */
}

/* 机械臂面板样式 */
.robotic-arm-panel {
  overflow-y: auto;
  flex: 0 0 500px; /* 固定宽度 */
  min-height: calc(100vh - 150px);
}

.robotic-scroll-container {
  max-height: calc(100vh - 150px);
  width: 500px;
  overflow-y: auto;
  padding: 0 10px;
}


.robotic-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.robotic-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}


.scroll-container {
  flex: 1;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 0 0px;
}

.scroll-container::-webkit-scrollbar {
  width: 6px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
