<template>
  <div class="head-control">
    <h2 class="title">人工头舵机控制</h2>
    <div class="main-content">
      <!-- 左侧：10个Yaw预设输入框 -->
      <div class="preset-panel left-panel">
        <h3>Yaw 预设位（左右转头）</h3>
        <div v-for="(preset, index) in leftPresets" :key="index" class="preset-item">
          <span class="label">位 {{ index + 1 }}</span>
          <el-input-number
            v-model="preset.value"
            :min="0"
            :max="1"
            :step="0.01"
            :precision="2"
            size="small"
            controls-position="right"
            @change="onPresetChange"
          />
        </div>
        <el-button type="primary" size="small" @click="applyYawFromPresets">应用当前 Yaw</el-button>
      </div>

      <!-- 中央图片 + 20个控制点 -->
      <div class="image-container">
        <img
          src="https://cdn.head-acoustics.com/_processed_/3/5/csm_HMS_V_frontal_seitlich_67c86d4fad.jpg"
          alt="人工头"
          class="head-image"
        />
        <!-- 20 个控制点 -->
        <div
          v-for="(point, index) in points"
          :key="index"
          class="control-point"
          :style="{ left: point.x + '%', top: point.y + '%' }"
          :class="{ active: point.active }"
          @click="applyPreset(index)"
          :title="`点 ${index + 1}: Yaw=${point.yaw.toFixed(2)}, Pitch=${point.pitch.toFixed(2)}`"
        >
          {{ index + 1 }}
        </div>
      </div>

      <!-- 右侧：10个Pitch预设输入框 -->
      <div class="preset-panel right-panel">
        <h3>Pitch 预设位（上下点头）</h3>
        <div v-for="(preset, index) in rightPresets" :key="index" class="preset-item">
          <span class="label">位 {{ index + 1 }}</span>
          <el-input-number
            v-model="preset.value"
            :min="0"
            :max="1"
            :step="0.01"
            :precision="2"
            size="small"
            controls-position="right"
            @change="onPresetChange"
          />
        </div>
        <el-button type="primary" size="small" @click="applyPitchFromPresets">应用当前 Pitch</el-button>
      </div>
    </div>

    <!-- 当前值显示与下发 -->
    <div class="current-display">
      <div class="current-item">
        <span>当前 Yaw：</span>
        <span class="value">{{ servo1.toFixed(2) }}</span>
      </div>
      <div class="current-item">
        <span>当前 Pitch：</span>
        <span class="value">{{ servo2.toFixed(2) }}</span>
      </div>
      <el-button type="primary" @click="sendServoValues">立即下发舵机值</el-button>
      <el-button @click="resetToCenter">复位到中心 (0.50, 0.50)</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// import { setServo } from '@/api/device/head'; // 假设接口

const terminalId = ref('25449ff3fcc7b27da5f69462c5efcec2');
const deviceId = ref('head1');

const servo1 = ref(0.5); // 当前 Yaw
const servo2 = ref(0.5); // 当前 Pitch

// 左侧10个Yaw预设（对应左侧10个点）
const leftPresets = ref([
  { value: 0.10 }, { value: 0.15 }, { value: 0.08 }, { value: 0.12 }, { value: 0.18 },
  { value: 0.05 }, { value: 0.10 }, { value: 0.15 }, { value: 0.08 }, { value: 0.12 }
]);

// 右侧10个Pitch预设（对应右侧10个点，但Pitch值可独立调整）
const rightPresets = ref([
  { value: 0.20 }, { value: 0.30 }, { value: 0.40 }, { value: 0.50 }, { value: 0.60 },
  { value: 0.70 }, { value: 0.80 }, { value: 0.90 }, { value: 0.95 }, { value: 1.00 }
]);

// 当预设值改变时，自动同步到对应的点（可选）
const onPresetChange = () => {
  // 可选：同步到 points 数组的 yaw/pitch
  leftPresets.value.forEach((p, i) => {
    points.value[i].yaw = p.value;
  });
  rightPresets.value.forEach((p, i) => {
    points.value[i + 10].pitch = p.value;
  });
};

// 点击图片上的点 → 应用对应预设，并同步到输入框
const applyPreset = (index) => {
  points.value.forEach(p => p.active = false);
  points.value[index].active = true;

  const yaw = points.value[index].yaw;
  const pitch = points.value[index].pitch;

  servo1.value = yaw;
  servo2.value = pitch;

  // 同步到左侧/右侧输入框（高亮当前对应的预设）
  if (index < 10) {
    leftPresets.value.forEach((p, i) => p.value = i === index ? yaw : p.value);
  } else {
    rightPresets.value.forEach((p, i) => p.value = i === (index - 10) ? pitch : p.value);
  }

  sendServoValues();
};

// 从左侧预设应用当前选中的Yaw（假设用户先在输入框选中一个，这里用最后一个修改的近似，或添加选中逻辑）
let lastLeftIndex = null;
let lastRightIndex = null;

// 简化：提供按钮直接应用当前所有输入框的平均或手动选择。这里提供“应用当前Yaw”按钮，使用第一个非默认的值或手动。
// 为简化，这里按钮应用“第一个输入框的值”作为Yaw，你可以改为添加选中高亮。
const applyYawFromPresets = () => {
  servo1.value = leftPresets.value[0].value; // 示例：使用第一个，你可改为选中机制
  sendServoValues();
};

const applyPitchFromPresets = () => {
  servo2.value = rightPresets.value[0].value; // 示例：使用第一个
  sendServoValues();
};

const sendServoValues = async () => {
  try {
    // await setServo({
    //   terminalId: terminalId.value,
    //   deviceId: deviceId.value,
    //   servo1: servo1.value,
    //   servo2: servo2.value,
    // });
  } catch (error) {
    console.error('舵机下发失败:', error);
  }
};

const resetToCenter = () => {
  servo1.value = 0.5;
  servo2.value = 0.5;
  points.value.forEach(p => p.active = false);
  sendServoValues();
};

// 20个点坐标（已调整适应新图片）
const points = ref([
  // 左侧10点
  { x: 18, y: 20, yaw: 0.10, pitch: 0.20, active: false },
  { x: 22, y: 30, yaw: 0.15, pitch: 0.30, active: false },
  { x: 15, y: 40, yaw: 0.08, pitch: 0.40, active: false },
  { x: 20, y: 50, yaw: 0.12, pitch: 0.50, active: false },
  { x: 25, y: 60, yaw: 0.18, pitch: 0.60, active: false },
  { x: 12, y: 70, yaw: 0.05, pitch: 0.70, active: false },
  { x: 18, y: 80, yaw: 0.10, pitch: 0.80, active: false },
  { x: 22, y: 90, yaw: 0.15, pitch: 0.90, active: false },
  { x: 15, y: 95, yaw: 0.08, pitch: 0.95, active: false },
  { x: 20, y: 98, yaw: 0.12, pitch: 1.00, active: false },

  // 右侧10点（Yaw偏大）
  { x: 82, y: 20, yaw: 0.90, pitch: 0.20, active: false },
  { x: 78, y: 30, yaw: 0.85, pitch: 0.30, active: false },
  { x: 85, y: 40, yaw: 0.92, pitch: 0.40, active: false },
  { x: 80, y: 50, yaw: 0.88, pitch: 0.50, active: false },
  { x: 75, y: 60, yaw: 0.82, pitch: 0.60, active: false },
  { x: 88, y: 70, yaw: 0.95, pitch: 0.70, active: false },
  { x: 82, y: 80, yaw: 0.90, pitch: 0.80, active: false },
  { x: 78, y: 90, yaw: 0.85, pitch: 0.90, active: false },
  { x: 85, y: 95, yaw: 0.92, pitch: 0.95, active: false },
  { x: 80, y: 98, yaw: 0.88, pitch: 1.00, active: false },
]);
</script>

<style scoped>
.head-control {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  height: calc(100vh - 125px);
  display: flex;
  flex-direction: column;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}

.main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.preset-panel {
  width: 220px;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preset-panel h3 {
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 16px;
}

.preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.label {
  width: 50px;
  font-size: 14px;
}

.image-container {
  position: relative;
  max-width: 600px;
}

.head-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.control-point {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(64, 158, 255, 0.8);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.2s;
  border: 3px solid #fff;
}

.control-point:hover {
  background: #409eff;
  transform: translate(-50%, -50%) scale(1.2);
}

.control-point.active {
  background: #f56c6c;
  transform: translate(-50%, -50%) scale(1.4);
}

.current-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.current-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}

.value {
  font-weight: bold;
  color: #409eff;
  min-width: 60px;
}
</style>