<template>
  <div class="vslam-toolbar">
    <!-- 左侧：面包屑导航 -->
    <div class="toolbar-left">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <i class="el-icon-s-home"></i>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/map/list' }">
          地图列表
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-view"></i>
          {{ mapName }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 中间：机器人位置信息 -->
    <div class="toolbar-center" v-if="robotVisible">
      <el-tag type="info" size="small" effect="plain" class="position-tag">
        <i class="el-icon-location-outline"></i>
        X: {{ robotPosition.x || '0.00' }} m
      </el-tag>
      <el-tag type="info" size="small" effect="plain" class="position-tag">
        <i class="el-icon-location-outline"></i>
        Y: {{ robotPosition.y || '0.00' }} m
      </el-tag>
      <el-tag type="info" size="small" effect="plain" class="position-tag">
        <i class="el-icon-location-outline"></i>
        Z: {{ robotPosition.z || '0.00' }} m
      </el-tag>
    </div>

    <!-- 右侧：操作按钮 -->
    <div class="toolbar-right">
      <!-- 运行状态指示 -->
      <el-tag
        v-if="running"
        type="success"
        effect="dark"
        size="small"
        class="status-tag"
      >
        <i class="el-icon-video-play"></i>
        SLAM 运行中
      </el-tag>
      <el-tag
        v-else
        type="info"
        size="small"
        class="status-tag"
      >
        <i class="el-icon-video-pause"></i>
        SLAM 已停止
      </el-tag>

      <!-- 创建子地图按钮 -->
      <el-button
        v-if="running"
        type="warning"
        size="small"
        icon="el-icon-plus"
        :loading="creatingSubmap"
        @click="handleCreateSubmap"
      >
        创建子地图
      </el-button>

      <!-- 刷新按钮 -->
      <el-button
        type="primary"
        size="small"
        icon="el-icon-refresh"
        @click="handleRefresh"
      >
        刷新
      </el-button>

      <!-- 返回按钮 -->
      <el-button
        :type="backButtonType"
        size="small"
        icon="el-icon-back"
        @click="handleBack"
        :class="{ 'has-building-hint': hasActiveBuilding }"
      >
        {{ backButtonText }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { getBuildingState } from '@/utils/map-building-state'

export default {
  name: 'VSlamToolbar',
  props: {
    // 地图名称
    mapName: {
      type: String,
      required: true
    },
    // SLAM 运行状态
    running: {
      type: Boolean,
      default: false
    },
    // 机器人位置
    robotPosition: {
      type: Object,
      default: () => ({ x: 0, y: 0, z: 0 })
    },
    // 机器人是否可见
    robotVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      creatingSubmap: false,
      hasActiveBuilding: false // 是否有正在构建的地图
    }
  },
  computed: {
    /**
     * 返回按钮文案
     */
    backButtonText() {
      return this.hasActiveBuilding ? '返回查看进度' : '返回'
    },
    
    /**
     * 返回按钮类型
     */
    backButtonType() {
      return this.hasActiveBuilding ? 'primary' : 'default'
    }
  },
  mounted() {
    // 检查是否有正在构建的地图
    this.checkBuildingState()
    
    // 定时检查构建状态
    this.pollingTimer = setInterval(() => {
      this.checkBuildingState()
    }, 5000)
  },
  beforeDestroy() {
    if (this.pollingTimer) {
      clearInterval(this.pollingTimer)
    }
  },
  methods: {
    /**
     * 检查构建状态
     */
    checkBuildingState() {
      const state = getBuildingState()
      this.hasActiveBuilding = state && state.isBuilding && state.mapName === this.mapName
    },
    
    /**
     * 创建子地图
     * 步骤：
     * 1. 停止当前 SLAM
     * 2. 生成新地图名称（mapName-1, mapName-2...）
     * 3. 启动新 SLAM
     */
    handleCreateSubmap() {
      this.$confirm('确定要创建子地图吗？这将停止当前建图并开始新地图。', '创建子地图', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.creatingSubmap = true
        
        // 生成新地图名称
        let newMapName = this.generateSubmapName(this.mapName)
        
        // 通知父组件执行创建子地图操作
        this.$emit('create-submap', newMapName)
        
        // 3 秒后恢复按钮状态
        setTimeout(() => {
          this.creatingSubmap = false
        }, 3000)
      }).catch(() => {
        this.$message.info('已取消创建子地图')
      })
    },
    
    /**
     * 生成子地图名称
     * 规则：如果地图名是 map-1，则生成 map-2；如果是 map，则生成 map-1
     */
    generateSubmapName(mapName) {
      const match = mapName.match(/-(\d+)$/)
      if (match) {
        // 已有编号，递增
        const prefix = mapName.substr(0, mapName.length - match[0].length)
        const number = parseInt(match[1])
        return `${prefix}-${number + 1}`
      } else {
        // 无编号，添加 -1
        return `${mapName}-1`
      }
    },
    
    /**
     * 刷新页面
     */
    handleRefresh() {
      this.$emit('refresh')
      this.$message.success('刷新成功')
    },
    
    /**
     * 返回地图列表
     */
    handleBack() {
      this.$emit('back')
    }
  }
}
</script>

<style lang="scss" scoped>
.vslam-toolbar {
  height: 60px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 100;
}

.toolbar-left {
  flex-shrink: 0;
  
  ::v-deep .el-breadcrumb {
    font-size: 14px;
    line-height: 1;
    
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: #606266;
        font-weight: normal;
        
        &.is-link {
          color: #409eff;
          font-weight: normal;
          
          &:hover {
            color: #66b1ff;
          }
        }
        
        i {
          margin-right: 4px;
        }
      }
      
      &:last-child {
        .el-breadcrumb__inner {
          color: #303133;
          font-weight: 500;
        }
      }
    }
  }
}

.toolbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  
  .position-tag {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 0 12px;
    
    i {
      margin-right: 4px;
    }
  }
}

.toolbar-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  
  .status-tag {
    padding: 0 12px;
    
    i {
      margin-right: 4px;
    }
  }
  
  .el-button {
    i {
      margin-right: 4px;
    }
    
    &.has-building-hint {
      animation: pulse-glow 2s infinite;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        background: #67C23A;
        border-radius: 50%;
        border: 2px solid #fff;
        animation: blink 1.5s infinite;
      }
    }
  }
}

// 脉冲发光动画
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(64, 158, 255, 0.8);
  }
}

// 闪烁动画
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .toolbar-center {
    .position-tag {
      font-size: 12px;
      padding: 0 8px;
    }
  }
}

@media screen and (max-width: 992px) {
  .vslam-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 20px;
  }
  
  .toolbar-left {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .toolbar-center {
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 10px;
  }
  
  .toolbar-right {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>

