<template>
  <el-drawer
    :visible.sync="visible"
    :with-header="false"
    direction="rtl"
    size="340px"
    :modal="false"
    class="vslam-control-panel"
  >
    <div class="panel-container">
      <!-- 标题栏 -->
      <div class="panel-header">
        <h3>
          <i class="el-icon-setting"></i>
          控制面板
        </h3>
        <el-button
          type="text"
          icon="el-icon-close"
          @click="visible = false"
        />
      </div>

      <!-- 控制区域 -->
      <div class="panel-content">
        <!-- 视角控制 -->
        <el-collapse v-model="activeNames" accordion>
          <el-collapse-item title="视角控制" name="view">
            <el-form label-width="100px" size="small" class="control-form">
              <el-form-item label="视角模式">
                <el-select
                  :value="currentView"
                  @change="handleViewChange"
                  :disabled="bootMode"
                  placeholder="请选择视角"
                  style="width: 100%"
                >
                  <el-option label="自由视角" :value="5" />
                  <el-option
                    label="俯视图"
                    :value="1"
                    :disabled="!running"
                  />
                  <el-option
                    label="第三人称"
                    :value="2"
                    :disabled="!running"
                  />
                  <el-option
                    label="第一人称"
                    :value="3"
                    :disabled="!running"
                  />
                  <el-option
                    label="当前视角"
                    :value="4"
                    :disabled="!running"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="引导模式">
                <el-switch
                  :value="bootMode"
                  @change="handleBootToggle"
                  :disabled="!running"
                  active-text="开启"
                  inactive-text="关闭"
                />
                <div class="form-hint" v-if="bootMode">
                  点击地面可发送目标点
                </div>
              </el-form-item>

              <el-form-item label="手动控制" v-if="manualControlVisible">
                <el-switch
                  :value="manualControl"
                  @change="handleManualToggle"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </el-form-item>

              <el-form-item label="实时视频" v-if="realtimeVideoVisible">
                <el-switch
                  :value="realtimeVideo"
                  @change="handleVideoToggle"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </el-form-item>
            </el-form>
          </el-collapse-item>

          <!-- 全屏控制 -->
          <el-collapse-item title="全屏控制" name="fullscreen">
            <div class="fullscreen-buttons">
              <el-button
                type="primary"
                icon="el-icon-full-screen"
                @click="handleFullscreen('webpage')"
                style="width: 100%"
              >
                网页全屏
              </el-button>
              <el-button
                type="success"
                icon="el-icon-full-screen"
                @click="handleFullscreen('window')"
                style="width: 100%; margin-top: 10px"
              >
                浏览器全屏
              </el-button>
            </div>
          </el-collapse-item>

          <!-- 回放控制 -->
          <el-collapse-item title="回放控制" name="replay">
            <el-button
              type="warning"
              icon="el-icon-video-play"
              @click="handleReplay"
              :disabled="!running"
              style="width: 100%"
            >
              播放建图过程
            </el-button>
            <div class="form-hint" style="margin-top: 10px">
              回放将动画展示建图轨迹
            </div>
          </el-collapse-item>

          <!-- 机器人信息 -->
          <el-collapse-item
            title="机器人位置"
            name="robot"
            v-if="robotVisible"
          >
            <div class="robot-info">
              <el-row :gutter="10">
                <el-col :span="8">
                  <div class="info-card">
                    <div class="info-label">X 坐标</div>
                    <div class="info-value">{{ robotPosition.x || '0.00' }}</div>
                    <div class="info-unit">米</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-card">
                    <div class="info-label">Y 坐标</div>
                    <div class="info-value">{{ robotPosition.y || '0.00' }}</div>
                    <div class="info-unit">米</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-card">
                    <div class="info-label">Z 坐标</div>
                    <div class="info-value">{{ robotPosition.z || '0.00' }}</div>
                    <div class="info-unit">米</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>

          <!-- 系统状态 -->
          <el-collapse-item title="系统状态" name="status">
            <div class="status-info">
              <el-row :gutter="10" style="margin-bottom: 10px">
                <el-col :span="12">
                  <el-tag :type="running ? 'success' : 'info'" style="width: 100%">
                    <i :class="running ? 'el-icon-video-play' : 'el-icon-video-pause'"></i>
                    {{ running ? 'SLAM 运行中' : 'SLAM 已停止' }}
                  </el-tag>
                </el-col>
                <el-col :span="12">
                  <el-tag :type="robotVisible ? 'success' : 'warning'" style="width: 100%">
                    <i class="el-icon-s-custom"></i>
                    {{ robotVisible ? '机器人在线' : '机器人离线' }}
                  </el-tag>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-tag :type="bootMode ? 'success' : 'info'" style="width: 100%">
                    <i class="el-icon-position"></i>
                    {{ bootMode ? '引导模式开启' : '引导模式关闭' }}
                  </el-tag>
                </el-col>
                <el-col :span="12">
                  <el-tag type="info" style="width: 100%">
                    <i class="el-icon-view"></i>
                    {{ viewModeText }}
                  </el-tag>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'VSlamControlPanel',
  props: {
    // v-model 双向绑定
    value: {
      type: Boolean,
      default: true
    },
    // 当前视角
    currentView: {
      type: Number,
      default: 5
    },
    // 引导模式
    bootMode: {
      type: Boolean,
      default: false
    },
    // SLAM 运行状态
    running: {
      type: Boolean,
      default: false
    },
    // 机器人位置
    robotPosition: {
      type: Object,
      default: () => ({ x: 0, y: 0, z: 0 })
    },
    // 机器人是否可见
    robotVisible: {
      type: Boolean,
      default: false
    },
    // 手动控制是否可见
    manualControlVisible: {
      type: Boolean,
      default: true
    },
    // 实时视频是否可见
    realtimeVideoVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeNames: ['view'],
      manualControl: false,
      realtimeVideo: false
    }
  },
  computed: {
    // 双向绑定 visible
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    // 视角模式文本
    viewModeText() {
      const viewModes = {
        1: '俯视图',
        2: '第三人称',
        3: '第一人称',
        4: '当前视角',
        5: '自由视角'
      }
      return viewModes[this.currentView] || '未知'
    }
  },
  methods: {
    /**
     * 处理视角切换
     */
    handleViewChange(view) {
      this.$emit('view-change', view)
    },

    /**
     * 处理引导模式切换
     */
    handleBootToggle(enabled) {
      this.$emit('boot-toggle', enabled)
    },

    /**
     * 处理手动控制切换
     */
    handleManualToggle(enabled) {
      this.manualControl = enabled
      // TODO: 通过 MQTT 发送控制指令
      this.$message.success(enabled ? '手动控制已开启' : '手动控制已关闭')
    },

    /**
     * 处理实时视频切换
     */
    handleVideoToggle(enabled) {
      this.realtimeVideo = enabled
      this.$message.success(enabled ? '实时视频已开启' : '实时视频已关闭')
    },

    /**
     * 处理全屏
     */
    handleFullscreen(type) {
      this.$emit('fullscreen', type)
    },

    /**
     * 处理回放
     */
    handleReplay() {
      this.$emit('replay')
      this.$message.success('开始回放建图过程')
    }
  }
}
</script>

<style lang="scss" scoped>
.vslam-control-panel {
  ::v-deep .el-drawer__body {
    padding: 0;
    background: #f5f7fa;
  }
}

.panel-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;

    i {
      margin-right: 8px;
      color: #409eff;
    }
  }
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;

  ::v-deep .el-collapse {
    border: none;

    .el-collapse-item {
      background: #fff;
      border-radius: 4px;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);

      &__header {
        height: 48px;
        line-height: 48px;
        padding: 0 15px;
        background: #fff;
        border: none;
        font-size: 14px;
        font-weight: 500;
        color: #303133;

        &.is-active {
          border-bottom: 1px solid #e8e8e8;
        }
      }

      &__wrap {
        border: none;
        background: #fff;
      }

      &__content {
        padding: 15px;
        color: #606266;
      }
    }
  }
}

.control-form {
  ::v-deep .el-form-item {
    margin-bottom: 18px;

    &__label {
      font-size: 13px;
      color: #606266;
      line-height: 32px;
    }

    &__content {
      line-height: 32px;
    }
  }
}

.form-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.5;
}

.fullscreen-buttons {
  padding: 0;
}

.robot-info {
  .info-card {
    background: #f5f7fa;
    border-radius: 4px;
    padding: 12px 8px;
    text-align: center;

    .info-label {
      font-size: 12px;
      color: #909399;
      margin-bottom: 8px;
    }

    .info-value {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
      font-family: 'Courier New', monospace;
      margin-bottom: 4px;
    }

    .info-unit {
      font-size: 11px;
      color: #c0c4cc;
    }
  }
}

.status-info {
  ::v-deep .el-tag {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;

    i {
      margin-right: 4px;
    }
  }
}

/* 滚动条样式 */
.panel-content::-webkit-scrollbar {
  width: 6px;
}

.panel-content::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;

  &:hover {
    background: #c0c4cc;
  }
}

.panel-content::-webkit-scrollbar-track {
  background: transparent;
}
</style>

