<template>
  <div class="robotic-arm-panel">
    <!-- 状态指示灯 -->
    <div class="status-indicator">
      <div class="status-light" :class="statusClass"></div>
      <div class="status-text">{{ statusText }}</div>
    </div>

    <!-- 主内容区：指令区+机械臂 -->
    <div class="main-content">
      <!-- 左侧：待上料指令 -->
      <div class="loading-command">
        <div class="command-title">待上料指令</div>
        <div class="command-list">
          <div v-for="(cmd, index) in loadingCommands" :key="index" class="command-item">
            <div class="cmd-info">
              <div class="cmd-tray">托盘: {{ cmd.tray }}</div>
              <div class="cmd-position">位置: {{ cmd.position }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间：机械臂主体 -->
      <div class="arm-center-wrapper">
        <div class="robotic-arm-container">
          <div class="robotic-arm">
            <!-- 机械臂底座 -->
            <div class="arm-base">
              <div class="base-top"></div>
              <div class="base-bottom"></div>
            </div>

            <!-- 机械臂关节1 -->
            <div class="arm-joint joint-1">
              <div class="joint-body"></div>
            </div>

            <!-- 机械臂臂1 -->
            <div class="arm-segment segment-1">
              <div class="segment-body"></div>
            </div>

            <!-- 机械臂关节2 -->
            <div class="arm-joint joint-2">
              <div class="joint-body"></div>
            </div>

            <!-- 机械臂臂2 -->
            <div class="arm-segment segment-2">
              <div class="segment-body"></div>
            </div>

            <!-- 机械臂夹具 -->
            <div class="arm-gripper">
              <div class="gripper-left"></div>
              <div class="gripper-right"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：待下料指令 -->
      <div class="unloading-command">
        <div class="command-title">待下料指令</div>
        <div class="command-list">
          <div v-for="(cmd, index) in unloadingCommands" :key="index" class="command-item">
            <div class="cmd-info">
              <div class="cmd-tray">托盘: {{ cmd.tray }}</div>
              <div class="cmd-position">位置: {{ cmd.position }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoboticArm',
  data() {
    return {
      status: 'idle', // idle, running, error
      loadingCommands: [
        { tray: 'TP-10023', position: 'A区-3号架' },
        { tray: 'TP-10045', position: 'B区-1号架' },
        { tray: 'TP-10067', position: 'C区-5号架' },
        { tray: 'TP-10023', position: 'A区-3号架' },
        { tray: 'TP-10045', position: 'B区-1号架' },
        { tray: 'TP-10067', position: 'C区-5号架' },
        { tray: 'TP-10023', position: 'A区-3号架' },
        { tray: 'TP-10045', position: 'B区-1号架' },
        { tray: 'TP-10067', position: 'C区-5号架' },
        { tray: 'TP-10023', position: 'A区-3号架' },
        { tray: 'TP-10045', position: 'B区-1号架' },
        { tray: 'TP-10067', position: 'C区-5号架' }
      ],
      unloadingCommands: [
        { tray: 'TP-10089', position: '老化区-1号柜' },
        { tray: 'TP-10101', position: '老化区-3号柜' },
        { tray: 'TP-10089', position: '老化区-1号柜' },
        { tray: 'TP-10101', position: '老化区-3号柜' },
        { tray: 'TP-10089', position: '老化区-1号柜' },
        { tray: 'TP-10101', position: '老化区-3号柜' },
        { tray: 'TP-10089', position: '老化区-1号柜' },
        { tray: 'TP-10101', position: '老化区-3号柜' },
        { tray: 'TP-10101', position: '老化区-3号柜' },
        { tray: 'TP-10089', position: '老化区-1号柜' },
        { tray: 'TP-10101', position: '老化区-3号柜' },
        { tray: 'TP-10089', position: '老化区-1号柜' },
        { tray: 'TP-10101', position: '老化区-3号柜' }
      ]
    };
  },
  computed: {
    statusClass() {
      return {
        'idle': this.status === 'idle',
        'running': this.status === 'running',
        'error': this.status === 'error'
      };
    },
    statusText() {
      return {
        'idle': '空闲中',
        'running': '运行中',
        'error': '故障'
      }[this.status];
    }
  },
  mounted() {
    this.simulateStatus();
  },
  methods: {
    simulateStatus() {
      setInterval(() => {
        const statuses = ['idle', 'running', 'error'];
        const randomIndex = Math.floor(Math.random() * statuses.length);
        this.status = statuses[randomIndex];
      }, 10000);
    }
  }
};
</script>

<style scoped>
/* 外层容器：强制填满父元素高度 */
.robotic-arm-panel {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: rgba(10, 20, 40, 0.85);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(64, 158, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 50, 120, 0.3);
  box-sizing: border-box; /* 关键：包含padding在高度计算内 */
  overflow: hidden;
}

/* 状态指示灯区域 */
.status-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background: rgba(0, 30, 60, 0.4);
  border-radius: 8px;
  width: fit-content;
}

.status-light {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 12px;
  box-shadow: 0 0 10px currentColor;
}

.status-light.idle {
  background-color: #64ffaa;
  color: #64ffaa;
}

.status-light.running {
  background-color: #409EFF;
  color: #409EFF;
  animation: pulse 1.5s infinite;
}

.status-light.error {
  background-color: #ff4d4f;
  color: #ff4d4f;
  animation: blink 1s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.status-text {
  font-size: 18px;
  font-weight: bold;
  color: #64c8ff;
}

/* 主内容区：填充剩余高度 */
.main-content {
  display: flex;
  flex: 1; /* 关键：占据剩余全部高度 */
  gap: 15px;
  min-height: 0; /* 允许flex容器收缩 */
  overflow: hidden;
}

/* 机械臂中心容器：保持固定比例和位置 */
.arm-center-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.robotic-arm-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px; /* 确保机械臂有最小显示空间 */
}

.robotic-arm {
  position: relative;
  width: 200px;
  height: 330px;
  transform: scale(0.9);
}

/* 指令区域：自适应高度，超出滚动 */
.loading-command, .unloading-command {
  width: 160px;
  min-width: 160px;
  background: rgba(0, 30, 60, 0.4);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(64, 158, 255, 0.3);
  display: flex;
  flex-direction: column;
  height: 100%; /* 关键：填满父容器高度 */
  box-sizing: border-box; /* 包含padding在高度内 */
}

.command-title {
  font-size: 15px;
  font-weight: bold;
  color: #64c8ff;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(100, 180, 255, 0.2);
}

/* 指令列表：自动扩展，超出滚动 */
.command-list {
  flex: 1; /* 关键：占据剩余高度 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  min-height: 0; /* 修复flex子元素高度限制 */
}

.command-list::-webkit-scrollbar {
  width: 6px;
}

.command-list::-webkit-scrollbar-thumb {
  background: rgba(64, 158, 255, 0.5);
  border-radius: 3px;
}

.command-item {
  padding: 8px;
  margin-bottom: 8px;
  background: rgba(0, 40, 80, 0.3);
  border-radius: 6px;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.command-item:hover {
  border-color: rgba(100, 200, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cmd-info {
  width: 100%;
  font-size: 13px;
}

.cmd-tray, .cmd-position {
  margin-bottom: 4px;
  color: #a0d2ff;
  display: flex;
  justify-content: space-between;
}

/* 机械臂各部件样式 */
.arm-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 20px;
  z-index: 10;
}

.base-top {
  width: 100%;
  height: 10px;
  background: #3a506b;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.base-bottom {
  width: 120%;
  margin-left: -10%;
  height: 10px;
  background: #2c3e50;
  border-radius: 0 0 8px 8px;
}

.arm-joint {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e2a3a, #2c3e50);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}

.joint-body {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3a506b;
  border: 2px solid #409EFF;
}

.joint-1 {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: rotateJoint1 8s infinite linear;
}

.arm-segment {
  position: absolute;
  background: #3a506b;
  border: 1px solid rgba(64, 158, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transform-origin: top center;
}

.segment-body {
  height: 100%;
  background: linear-gradient(to right, #2c3e50, #3a506b, #2c3e50);
  border-left: 1px solid rgba(100, 200, 255, 0.3);
  border-right: 1px solid rgba(100, 200, 255, 0.3);
}

.segment-1 {
  width: 20px;
  height: 120px;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  animation: moveSegment1 8s infinite ease-in-out;
}

.joint-2 {
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  animation: rotateJoint2 8s infinite linear reverse;
}

.segment-2 {
  width: 15px;
  height: 100px;
  bottom: 220px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  animation: moveSegment2 8s infinite ease-in-out;
}

.arm-gripper {
  position: absolute;
  bottom: 320px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  z-index: 6;
  animation: moveGripper 8s infinite ease-in-out;
}

.gripper-left, .gripper-right {
  width: 10px;
  height: 30px;
  background: #3a506b;
  border: 1px solid rgba(64, 158, 255, 0.5);
  border-radius: 5px;
}

.gripper-left {
  transform: rotate(-15deg);
}

.gripper-right {
  transform: rotate(15deg);
}

/* 机械臂动画 */
@keyframes rotateJoint1 {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(45deg); }
  50% { transform: translateX(-50%) rotate(0deg); }
  75% { transform: translateX(-50%) rotate(-45deg); }
}

@keyframes rotateJoint2 {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(30deg); }
  50% { transform: translateX(-50%) rotate(0deg); }
  75% { transform: translateX(-50%) rotate(-30deg); }
}

@keyframes moveSegment1 {
  0%, 100% { height: 120px; }
  50% { height: 140px; }
}

@keyframes moveSegment2 {
  0%, 100% { height: 100px; }
  50% { height: 80px; }
}

@keyframes moveGripper {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(-60%); }
  75% { transform: translateX(-40%); }
}

/* 响应式调整 */
@media (max-width: 800px) {
  .main-content {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    overflow-y: auto;
  }

  .arm-center-wrapper {
    width: 100%;
    min-height: 350px;
  }

  .loading-command, .unloading-command {
    width: 90%;
    max-width: 300px;
    height: auto;
    min-height: 200px;
  }
}

@media (max-width: 500px) {
  .robotic-arm {
    transform: scale(0.8);
  }

  .command-title {
    font-size: 14px;
  }

  .cmd-info {
    font-size: 12px;
  }
}

@media (max-width: 300px) {
  .robotic-arm {
    transform: scale(0.7);
  }

  .loading-command, .unloading-command {
    width: 100%;
    min-width: auto;
  }
}
</style>
