<template>
  <div class="map-toolbar">
    <!-- 地图控制按钮组 -->
    <el-tooltip content="放大" placement="right">
      <el-button 
        size="small" 
        icon="el-icon-plus" 
        circle
        @click="zoomIn"
        class="toolbar-btn"
      />
    </el-tooltip>
    
    <el-tooltip content="缩小" placement="right">
      <el-button 
        size="small" 
        icon="el-icon-minus" 
        circle
        @click="zoomOut"
        class="toolbar-btn"
      />
    </el-tooltip>
    
    <!-- <el-tooltip content="居中到机器人" placement="right">
      <el-button 
        size="small" 
        icon="el-icon-location" 
        circle
        @click="centerToRobot"
        :disabled="!hasRobotPosition"
        class="toolbar-btn"
      />
    </el-tooltip> -->
    
    <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="right">
      <el-button 
        size="small" 
        :icon="isFullscreen ? 'el-icon-aim' : 'el-icon-full-screen'"
        circle
        @click="toggleFullscreen"
        class="toolbar-btn"
      />
    </el-tooltip>

    <!-- 分割线 -->
    <div class="toolbar-divider"></div>

    <!-- 主要操作按钮 -->
    <el-tooltip content="添加标定点" placement="right">
      <el-button 
        type="primary"
        size="small" 
        icon="el-icon-circle-plus"
        circle
        @click="addCalibrationPoint"
        class="toolbar-btn primary-btn"
        :disabled="!canAddCalibration"
      />
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'MapToolbar',
  props: {
    canAddCalibration: {
      type: Boolean,
      default: true
    },
    hasRobotPosition: {
      type: Boolean,
      default: false
    },
    isFullscreen: {
      type: Boolean,
      default: false
    },
    showAdvanced: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      measureToolActive: false
    }
  },
  methods: {
    zoomIn() {
      this.$emit('zoom-in')
    },
    
    zoomOut() {
      this.$emit('zoom-out')
    },
    
    centerToRobot() {
      if (!this.hasRobotPosition) {
        return
      }
      this.$emit('center-to-robot')
    },
    
    toggleFullscreen() {
      this.$emit('toggle-fullscreen')
    },
    
    addCalibrationPoint() {
      this.$emit('add-calibration-point')
    },
    
    resetView() {
      this.$emit('reset-view')
      this.showToast('视图已重置')
    },
    
    toggleMeasureTool() {
      this.measureToolActive = !this.measureToolActive
      this.$emit('toggle-measure-tool', this.measureToolActive)
      this.showToast(this.measureToolActive ? '测量工具已启用' : '测量工具已关闭')
    },
    
    showToast(message) {
      // 简单的提示信息，避免过多弹窗
      console.log('地图操作:', message)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-toolbar {
  /* 位置由父组件控制 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* 固定间距确保一致性 */
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px; /* 统一内边距 */
  border: 1px solid var(--color-border-primary);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  width: 60px; /* 固定宽度确保对齐 */

  .toolbar-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    transition: all var(--duration-200) var(--ease-out);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;

    &:hover {
      background: var(--color-bg-tertiary);
      color: var(--color-text-primary);
      border-color: var(--color-border-primary);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    &:active {
      transform: translateY(0);
      box-shadow: var(--shadow-sm);
    }

    &.primary-btn {
      background: var(--color-primary) !important;
      color: var(--color-text-inverse) !important;
      border-color: var(--color-primary) !important;

      &:hover {
        background: var(--color-primary-light) !important;
        border-color: var(--color-primary-light) !important;
      }

      &:disabled {
        background: var(--color-text-quaternary) !important;
        border-color: var(--color-text-quaternary) !important;
        color: var(--color-text-inverse) !important;
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
    }

    &.active {
      background: var(--color-primary);
      color: var(--color-text-inverse);
      border-color: var(--color-primary);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      
      &:hover {
        background: var(--color-bg-card);
        color: var(--color-text-secondary);
        border-color: var(--color-border-secondary);
        transform: none;
        box-shadow: none;
      }
    }

    ::v-deep .el-icon {
      font-size: var(--font-size-base) !important;
      line-height: 1 !important;
    }

    ::v-deep i {
      font-size: var(--font-size-base) !important;
      line-height: 1 !important;
    }
  }

  .toolbar-divider {
    width: 24px;
    height: 1px;
    background: var(--color-border-secondary);
    margin: 4px 0;
    flex-shrink: 0;
  }
}

// 暗色主题适配
html.dark {
  .map-toolbar {
    background: rgba(31, 41, 55, 0.9);
    border-color: var(--color-border-tertiary);

    .toolbar-group {
      .toolbar-btn {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-tertiary);

        &:hover {
          background: var(--color-bg-quaternary);
          border-color: var(--color-border-secondary);
        }
      }
    }

    .toolbar-divider {
      background: var(--color-border-tertiary);
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .map-toolbar {
    .toolbar-group {
      .toolbar-btn {
        width: 32px;
        height: 32px;

        ::v-deep .el-icon {
          font-size: var(--font-size-sm);
        }
      }
    }
  }
}

// 动画效果
@keyframes toolbarSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.map-toolbar {
  animation: toolbarSlideIn 0.3s ease-out;
}
</style>
