<template>
  <div class="control-panel">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="back-button" @click="handleBack">
        ←
      </div>
      <div class="placeholder-div"></div>
      <div class="title-container">
        <div class="title-box">
          <!-- 根据方向状态显示不同文本 -->
          {{ getDirectionText }}
          <img src="../assets/img/shout.png" alt="voice" class="voice-icon-img"
            :class="{ 'show-voice': isControlPressed }" style="width: 20px; height: 20px; margin-left: 20px;">
        </div>
      </div>
      <div class="top-right-icons">
        <img :src="connectionImage" alt="link" class="top-icon">
        <img src="../assets/img/bat_full.png" class="top-icon" alt="">
        <!-- 注释掉电池图标 -->
        <!-- <img :src="batteryImage" alt="battery" class="top-icon"> -->
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧控制开关 -->
      <div class="left-controls">
        <div class="switch-item">
          <span>屏幕</span>
          <el-switch v-model="screenStatus" @change="handleScreenChange" />
        </div>
        <div class="switch-item">
          <span>警灯</span>
          <el-switch v-model="warningLightStatus" @change="handleWarningLightChange" />
        </div>
        <div class="switch-item">
          <span>跟随</span>
          <el-switch v-model="followStatus" @change="handleFollowChange" />
        </div>
        <div class="switch-item">
          <span>避障</span>
          <el-switch v-model="obstacleAvoidEnabled" @change="handleObstacleAvoidChange" />
        </div>
      </div>

      <!-- 中间车辆状态显示区域 -->
      <div class="center-display">
        <div class="status-text">{{ getptz }}</div>
        <div class="car-display">
          <div class="boom-container">
            <img src="../assets/img/boom.png" alt="boom" class="boom-image top-boom" v-show="obstacleStatus.top">
            <img src="../assets/img/car.png" alt="car" class="car-image" />
            <img src="../assets/img/boom.png" alt="boom" class="boom-image bottom-boom" v-show="obstacleStatus.bottom">
          </div>
        </div>
      </div>

      <!-- 右侧状态图标 -->
      <div class="right-status">
        <div class="status-icons">
          <div class="icons-row">
            <div class="icon-item">
              <img src="../assets/img/refresh.png" alt="refresh" @mousedown="handleRefresh"
                style="width: 40px; height: 40px;margin-right: 20px;">
            </div>
            <div class="icon-item">
              <img src="../assets/img/mp3.png" alt="play" @click="goto('voiceset')"
                style="width: 40px; height: 40px;margin-left: 20px;">
            </div>
          </div>
        </div>
        <div class="control-button">
          <div class="circle-border" :class="{ 'pressed': isControlPressed }" @mousedown="handleControlPress"
            @mouseup="handleControlRelease" @mouseleave="handleControlRelease" @touchstart.prevent="handleControlPress"
            @touchend.prevent="handleControlRelease" @touchcancel.prevent="handleControlRelease" @contextmenu.prevent
            @copy.prevent @selectstart.prevent style="user-select: none;">
            <img src="../assets/img/stop.png" alt="control" class="control-button-img"
              style="width: 80px; height: 80px; pointer-events: none;" draggable="false">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import GamepadController from '../assets/js/GamepadController';
import audioTransmitter from '../assets/js/audio-transmitter';

export default {
  name: 'CarControl',
  data() {
    return {
      screenStatus: false,
      warningLightStatus: false,
      followStatus: false,
      obstacleStatus: {
        top: false,
        bottom: false
      },
      obstacleAvoidEnabled: false,
      gamepadController: null,
      directionAxis0_1: "",
      directionAxis9: "",
      isGamepadConnected: false,
      isControlPressed: false,
      ws: null,
      wsConnected: false,
      // batteryLevel: 0,  // 注释掉电池电量
      lastResponseTime: 0,
      connectionCheckInterval: null,
      sendInterval: null,
      lastDirection: 0,
      lastSpeed: 0,
      platform_fun: 0,
      button: "",
      audioConfig: audioTransmitter.data(),
      isRecording: false,
      audioHandler: null,
      reconnectTimer: null,  // 添加重连定时器引用
      isComponentUnmounted: false,  // 添加组件卸载标志
      isInitialized: false,  // 添加初始化标志
      contenttext: "",
      _mousePressed: false, // 添加鼠标/触摸按下标志
      contentptz: "",
    }
  },
  created() {
    // 初始化 GamepadController，启用调试模式
    this.gamepadController = new GamepadController({
      debug: false,  // 启用调试
      deadZone: 0.1,
      updateInterval: 50
    });

    // 添加全局事件监听
    window.addEventListener("gamepadconnected", this.handleGamepadConnected);
    window.addEventListener("gamepaddisconnected", this.handleGamepadDisconnected);

    this.isComponentUnmounted = false;
    this.initWebSocket();

    // 启动连接状态检查
    this.connectionCheckInterval = setInterval(() => {
      this.checkConnectionStatus();
    }, 3000);

    // 启动定时发送数据
    this.sendInterval = setInterval(() => {
      this.sendControlData();
    }, 400);

    // 初始化音频处理器
    this.audioHandler = {
      ...audioTransmitter.data(),
      ...audioTransmitter.methods
    };

    // 初始化音频 WebSocket 连接
    this.audioHandler.audioWs = new WebSocket('ws://192.168.4.103/ws');

    this.audioHandler.audioWs.onopen = () => {
      console.log('音频 WebSocket 已连接');
    };

    this.audioHandler.audioWs.onerror = (error) => {
      console.error('音频 WebSocket 错误:', error);
    };

    this.audioHandler.audioWs.onclose = () => {
      console.log('音频 WebSocket 已关闭');
    };
  },
  beforeDestroy() {
    this.isComponentUnmounted = true;  // 标记组件已卸载

    // 清除重连定时器
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer);
      this.reconnectTimer = null;
    }

    // 清除定时器
    if (this.connectionCheckInterval) {
      clearInterval(this.connectionCheckInterval);
    }

    if (this.sendInterval) {
      clearInterval(this.sendInterval);
    }

    // 移除全局事件监听
    window.removeEventListener("gamepadconnected", this.handleGamepadConnected);
    window.removeEventListener("gamepaddisconnected", this.handleGamepadDisconnected);

    // 销毁手柄控制器
    if (this.gamepadController) {
      this.gamepadController.destroy();
    }

    // 确保停止音频传输
    if (this.audioHandler && this.audioHandler.isRecording) {
      this.audioHandler.stopRecording();
    }

    // 关闭音频 WebSocket 连接
    if (this.audioHandler && this.audioHandler.audioWs) {
      console.log('关闭音频 WebSocket 连接');
      this.audioHandler.audioWs.close();
      this.audioHandler.audioWs = null;
    }

    // 关闭控制 WebSocket 连接
    if (this.ws) {
      console.log('关闭控制 WebSocket 连接');
      this.ws.close();
      this.ws = null;
      this.wsConnected = false;
    }
  },
  methods: {
    goto(path) {
      this.$router.push({ name: path });
    },
    handleGamepadConnected(e) {
      console.log('Gamepad connected:', e.gamepad);
      this.isGamepadConnected = true;
    },
    handleGamepadDisconnected() {
      console.log('Gamepad disconnected');
      this.isGamepadConnected = false;
      // 可以在这里添加断开连接的处理逻辑
    },
    // 获取手柄数据的方法
    getGamepadData() {
      if (this.gamepadController) {
        this.directionAxis0_1 = this.gamepadController.directionAxis0_1;
        this.directionAxis9 = this.gamepadController.directionAxis9;
        // 可以在这里添加其他数据的获取和处理
      }
    },
    handleControlPress() {
      console.log('按钮被按下，设置 isControlPressed = true');
      this._mousePressed = true;
      this.isControlPressed = true;
      // 开始音频传输
      if (this.audioHandler) {
        this.audioHandler.startRecording();
      }
    },
    handleControlRelease() {
      console.log('按钮被释放，设置 isControlPressed = false');
      this._mousePressed = false;
      this.isControlPressed = false;
      // 停止音频传输
      if (this.audioHandler) {
        this.audioHandler.stopRecording();
      }
    },
    initWebSocket() {
      try {
        console.log('正在连接 WebSocket...');
        this.ws = new WebSocket('ws://192.168.4.120/ws');
        // this.ws = new WebSocket('ws://192.168.1.120/ws');
        // this.ws = new WebSocket('ws://192.168.1.60:81');


        this.ws.onopen = () => {
          console.log('WebSocket 已连接');
          this.wsConnected = true;
          this.lastResponseTime = Date.now();
          this.sendCarInfo();
        };

        this.ws.onmessage = (event) => {
          this.lastResponseTime = Date.now();
          try {
            const response = JSON.parse(event.data);
            console.log('收到数据:', JSON.stringify(response));
            if (response.JSON_id === 1 && response.rc_car_card) {
              this.updateCarStatus(response.rc_car_card);
            }
          } catch (error) {
            console.error('解析响应数据失败:', error);
          }
        };

        this.ws.onclose = () => {
          console.log('WebSocket连接关闭');
          // 只有在组件没有被卸载的情况下才重连
          if (!this.isComponentUnmounted) {
            this.reconnectTimer = setTimeout(() => {
              this.initWebSocket();
            }, 3000);
          }
        };

        this.ws.onerror = (error) => {
          console.error('WebSocket 错误:', error);
          this.wsConnected = false;
          // 打印更详细的错误信息
          if (error.message) {
            console.error('错误信息:', error.message);
          }
        };

      } catch (error) {
        console.error('WebSocket 初始化失败:', error);
        // 尝试重新连接
        setTimeout(() => {
          console.log('尝试重新连接...');
          this.initWebSocket();
        }, 3000);
      }
    },

    // 修改 updateGamepadData 方法
    updateGamepadData() {
      if (this.gamepadController) {
        // 获取手柄数据
        const angle = this.gamepadController.angle;
        const directionAxis9 = this.gamepadController.directionAxis9;
        const speed = this.gamepadController.speed;

        // 根据角度计算方向值（0-4）
        let direction = 0; // 默认停止
        if (speed > 10) {
          if (angle >= 315 || angle < 45) {
            direction = 4; // 右转
          } else if (angle >= 45 && angle < 135) {
            direction = 2; // 后退
          } else if (angle >= 135 && angle < 225) {
            direction = 3; // 左转
          } else if (angle >= 225 && angle < 315) {
            direction = 1; // 前进
          }
        }

        // 检测手柄右摇杆按钮状态，但不覆盖鼠标/触摸按下的状态
        const gamepadButtonPressed = this.gamepadController.rightJoystickPressed;

        // 如果手柄按钮被按下且当前状态为未按下，则开始录音
        if (gamepadButtonPressed && !this.isControlPressed) {
          console.log('手柄按钮被按下，开始录音');
          this.isControlPressed = true;
          if (this.audioHandler) {
            this.audioHandler.startRecording();
          }
        }
        // 如果手柄按钮被释放且当前状态为按下，则停止录音
        else if (!gamepadButtonPressed && this.isControlPressed && !this._mousePressed) {
          console.log('手柄按钮被释放，停止录音');
          this.isControlPressed = false;
          if (this.audioHandler) {
            this.audioHandler.stopRecording();
          }
        }

        // 更新状态
        this.contenttext = direction;
        this.lastDirection = angle;
        if (directionAxis9 !== undefined) this.platform_fun = directionAxis9;
        if (speed !== undefined) this.lastSpeed = speed;
      }
    },
    sendCarInfo() {
      const carData = {
        "JSON_id": 1,
        "rc_car_card": {
          "get_info": 1,
          "get_attribute": 1,
        }
      };

      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify(carData));
        // 在控制台打印发送的数据
        console.log('发送的数据:', JSON.stringify(carData));
      } else {
        console.error('WebSocket 未连接');
      }
    },

    // 修改 refresh 图标的点击事件
    handleRefresh() {
      this.sendCarInfo();
    },

    // 修改状态更新函数
    updateCarStatus(data) {
      if (data.attribute) {
        // 更新障碍物显示状态
        this.obstacleStatus = {
          top: data.attribute.obstacle_sta === 1,
          bottom: data.attribute.obstacle_sta === 2
        };

        // 只在初始化时更新开关状态
        // if (!this.isInitialized) {
        this.screenStatus = data.attribute.screen_en === 1;
        this.warningLightStatus = data.attribute.warn_light_en === 1;
        this.followStatus = data.attribute.follow_en === 1;
        this.obstacleAvoidEnabled = data.attribute.obstacle_avoid_en === 1;
        this.contentptz = data.attribute.platform;
        // this.isInitialized = true;
        // }
      }

      // 更新方向状态
      if (data.driver && typeof data.driver.direction !== 'undefined') {
        this.lastDirection = data.driver.direction; // 使用返回的方向值
      }
    },

    checkConnectionStatus() {
      const now = Date.now();
      // 如果超过5秒没有收到响应，认为连接已断开
      if (now - this.lastResponseTime > 5000) {
        this.wsConnected = false;
      }
    },

    // 修改开关状态处理函数
    handleScreenChange(value) {
      this.screenStatus = value;
      this.sendControlData();
    },

    handleWarningLightChange(value) {
      this.warningLightStatus = value;
      this.sendControlData();
    },

    handleFollowChange(value) {
      this.followStatus = value;
      this.sendControlData();
    },

    handleObstacleAvoidChange(value) {
      this.obstacleAvoidEnabled = value;
      this.sendControlData();
    },

    // 修改 sendControlData 方法
    sendControlData() {
      // 只在有手柄数据时更新手柄相关状态
      if (this.gamepadController && this.gamepadController.isActive) {
        this.updateGamepadData();
      }

      const controlData = {
        "JSON_id": 1,
        "rc_car_card": {
          "attribute": {
            "platform": this.platform_fun,
            "screen_en": this.screenStatus ? 1 : 0,
            "warn_light_en": this.warningLightStatus ? 1 : 0,
            "follow_en": this.followStatus ? 1 : 0,
            "obstacle_avoid_en": this.obstacleAvoidEnabled ? 1 : 0,
            "car_speed": this.lastSpeed,
            "car_direction": this.lastDirection
          }
        }
      };

      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify(controlData));
        console.log('发送控制数据:', JSON.stringify(controlData));
      }
    },

    handleBack() {
      // 先标记组件已卸载，防止重连
      this.isComponentUnmounted = true;

      // 立即清除所有定时器
      if (this.connectionCheckInterval) {
        clearInterval(this.connectionCheckInterval);
        this.connectionCheckInterval = null;
      }
      if (this.sendInterval) {
        clearInterval(this.sendInterval);
        this.sendInterval = null;
      }
      if (this.reconnectTimer) {
        clearTimeout(this.reconnectTimer);
        this.reconnectTimer = null;
      }

      // 停止音频传输
      if (this.audioHandler && this.audioHandler.isRecording) {
        this.audioHandler.stopRecording();
      }

      // 移除全局事件监听
      window.removeEventListener("gamepadconnected", this.handleGamepadConnected);
      window.removeEventListener("gamepaddisconnected", this.handleGamepadDisconnected);

      // 销毁手柄控制器
      if (this.gamepadController) {
        this.gamepadController.destroy();
        this.gamepadController = null;
      }

      // 断开所有 WebSocket 连接
      const closePromises = [];

      if (this.ws) {
        console.log('断开控制 WebSocket 连接');
        this.ws.onclose = null; // 移除重连监听
        this.ws.close();
        this.ws = null;
        this.wsConnected = false;
      }

      if (this.audioHandler && this.audioHandler.audioWs) {
        console.log('断开音频 WebSocket 连接');
        this.audioHandler.audioWs.onclose = null; // 移除重连监听
        this.audioHandler.audioWs.close();
        this.audioHandler.audioWs = null;
      }

      // 确保所有清理工作完成后再跳转
      setTimeout(() => {
        // 返回主页
        this.$router.push('/');
      }, 100);
    },

  },
  computed: {
    // 注释掉电池图片计算属性
    /*
    batteryImage() {
      if (this.batteryLevel >= 80) return require('../assets/img/bat_full.png');
      if (this.batteryLevel >= 60) return require('../assets/img/bat_high.png');
      if (this.batteryLevel >= 40) return require('../assets/img/bat_medium.png');
      if (this.batteryLevel >= 20) return require('../assets/img/bat_low.png');
      return require('../assets/img/bat_empty.png');
    },
    */
    connectionImage() {
      return this.wsConnected ?
        require('../assets/img/connect.png') :
        require('../assets/img/no_connect.png');
    },
    getDirectionText() {
      // 根据 direction 值显示对应状态
      switch (this.contenttext) {
        case 0:
          return '遥控车已停止';
        case 1:
          return '遥控车正在前进';
        case 2:
          return '遥控车正在后退';
        case 3:
          return '遥控车正在左转';
        case 4:
          return '遥控车正在右转';
        default:
          return '遥控车当前状态';
      }
    },
    getptz() {
      switch (this.contentptz) {
        case 0:
          return '云台静止';
        case 1:
          return '云台上升';
        case 2:
          return '云台下降';
        default:
          return '云台静止';
      }
    }
  },
  setup() {
    const router = useRouter();

    // 添加返回按钮处理函数
    const onClickLeft = () => {
      router.back();
    };

    return {
      onClickLeft,
    };
  }
}
</script>

<style scoped>
.control-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000033;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 60px;
  background-color: #000033;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: relative;
}

.placeholder-div {
  width: 63px;
}

.title-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-box {
  border: 2px solid #00ffff;
  padding: 2px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  /* 确保文本变化时盒子大小稳定 */
}

.main-content {
  flex: 1;
  display: flex;
  padding: 10px;
  gap: 20px;
}

.left-controls {
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.switch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #00ffff;
  border-radius: 8px;
  font-size: 20px;
}

.center-display {
  flex: 1;
  border: 1px solid #00ffff;
  border-radius: 8px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.status-text {
  font-size: 20px;
  color: #00ffff;
  align-self: flex-start;
  margin-bottom: 10px;
}

.car-display {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.boom-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 10px; */
}

.boom-image {
  width: 60px;
  height: 60px;
}

.top-boom {
  transform: rotate(0);
}

.bottom-boom {
  transform: rotate(180deg);
}

.car-image {
  width: 160px;
  height: auto;
}

.right-status {
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.status-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 50px;
}

.icons-row {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;
}

.icon-item {
  width: 40px;
  height: 40px;
  /* border: 1px solid #00ffff; */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #00ffff;
}

.battery {
  background-color: #00ffff;
  color: #000033;
}

:deep(.el-switch__core) {
  border-color: #00ffff;
  background-color: transparent;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #00ffff;
}

.top-right-icons {
  display: flex;
  gap: 15px;
  align-items: center;
  width: 63px;
}

.top-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.circle-border {
  width: 100px;
  height: 100px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s ease;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.circle-border.pressed {
  border-color: red;
}

.control-button-img {
  width: 80px;
  height: 80px;
  user-select: none;
  /* 防止拖动图片 */
}

.voice-icon-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.voice-icon-img.show-voice {
  opacity: 1;
}

/* 确保标题栏在最上层 */
:deep(.van-nav-bar) {
  z-index: 999;
}

.back-button {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
  font-size: 24px;
  /* 调整箭头大小 */
  color: #00ffff;
  /* 使用青色，与其他元素保持一致 */
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>
