<template>
  <div class="right-panel">
    <!-- 面板头部 -->
    <div class="panel-header">
      <div class="panel-title">
        <h3>实时标定信息</h3>
        <span class="map-name">(当前地图: {{ mapName }})</span>
      </div>
      <el-button 
        @click="toggleCollapse" 
        type="text" 
        size="mini" 
        class="collapse-btn"
        icon="el-icon-arrow-right"
      />
    </div>

    <!-- 面板内容 -->
    <div class="panel-content">
      <!-- 实时位姿卡片 -->
      <div class="info-card">
        <div class="card-header">
          <h4 class="card-title">实时位姿</h4>
        </div>
        <div class="card-content">
          <!-- 激光定位 -->
          <div class="pose-section">
            <div class="section-title">激光定位</div>
            <div class="pose-item">
              <span class="pose-label">X坐标</span>
              <span class="pose-value">{{ laserPositionData.x }}</span>
            </div>
            <div class="pose-item">
              <span class="pose-label">Y坐标</span>
              <span class="pose-value">{{ laserPositionData.y }}</span>
            </div>
            <div class="pose-item">
              <span class="pose-label">航向角</span>
              <span class="pose-value">{{ laserPositionData.angle }}</span>
            </div>
          </div>

          <!-- GNSS定位 -->
          <div class="pose-section">
            <div class="section-title">GNSS定位</div>
            <div class="pose-item">
              <span class="pose-label">状态</span>
              <el-tag 
                :type="getGnssStatusType(gnssPositionData.status)" 
                size="mini"
                class="pose-value"
              >
                {{ gnssPositionData.status }}
              </el-tag>
            </div>
            <div class="pose-item">
              <span class="pose-label">经度</span>
              <span class="pose-value">{{ gnssPositionData.longitude }}</span>
            </div>
            <div class="pose-item">
              <span class="pose-label">纬度</span>
              <span class="pose-value">{{ gnssPositionData.latitude }}</span>
            </div>
            <div class="pose-item">
              <span class="pose-label">方向角</span>
              <span class="pose-value">{{ gnssPositionData.angle }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 当前标定点卡片 -->
      <div class="info-card">
        <div class="card-header">
          <h4 class="card-title">当前标定点</h4>
        </div>
        <div class="card-content">
          <div class="calibration-table" v-if="calibrationList.length > 0">
            <div class="table-header">
              <div class="col-id">序号</div>
              <div class="col-coord">坐标(X,Y)</div>
              <div class="col-action">操作</div>
            </div>
            <div class="table-body">
              <div 
                v-for="item in calibrationList" 
                :key="item.id" 
                class="table-row"
              >
                <div class="col-id">{{ item.id }}</div>
                <div class="col-coord">{{ item.coordinate }}</div>
                <div class="col-action">
                  <el-popconfirm
                    title="确定要删除这个标定点吗？"
                    @confirm="removeCalibration(item.id)"
                    placement="left"
                  >
                    <el-button 
                      slot="reference"
                      type="text" 
                      size="mini" 
                      icon="el-icon-delete"
                      class="delete-btn"
                    />
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-state">
            <i class="el-icon-position"></i>
            <p>暂无标定点</p>
          </div>

          <!-- 操作按钮组 -->
          <div class="action-buttons">
            <el-button 
              type="primary" 
              size="small" 
              icon="el-icon-plus"
              @click="addCalibration"
              :disabled="!canAddCalibration"
            >
              添加标定点
            </el-button>
            <el-button 
              size="small" 
              icon="el-icon-check"
              @click="executeCalibration"
              :disabled="calibrationList.length === 0"
            >
              一键标定
            </el-button>
          </div>
        </div>
      </div>

    </div>

    <!-- 拖拽调宽手柄 -->
    <div class="resize-handle" @mousedown="startResize" v-show="!isDrawerMode"></div>
  </div>
</template>

<script>
export default {
  name: 'RightPanel',
  props: {
    mapName: {
      type: String,
      required: true
    },
    laserPositionData: {
      type: Object,
      default: () => ({ x: 0, y: 0, angle: 0 })
    },
    gnssPositionData: {
      type: Object,
      default: () => ({ status: '0/0', longitude: 0, latitude: 0, angle: 0 })
    },
    calibrationList: {
      type: Array,
      default: () => []
    },
    currentMap: {
      type: Object,
      default: () => ({ name: 'sh02' })
    },
    isDrawerMode: {
      type: Boolean,
      default: false
    },
    panelWidth: {
      type: Number,
      default: 360
    }
  },
  data() {
    return {
      panelWidth: 360,
      isResizing: false
    }
  },
  computed: {
    canAddCalibration() {
      return this.laserPositionData.x !== 0 || this.laserPositionData.y !== 0
    }
  },
  mounted() {
    // 在浮层模式下，宽度由父组件控制
    if (!this.isDrawerMode) {
      this.panelWidth = this.panelWidth || 360
    }
    
    // 添加全局鼠标事件监听
    document.addEventListener('mousemove', this.handleResize)
    document.addEventListener('mouseup', this.stopResize)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.handleResize)
    document.removeEventListener('mouseup', this.stopResize)
  },
  methods: {
    toggleCollapse() {
      // 直接通知父组件切换状态，不维护内部状态
      this.$emit('panel-toggle', true) // 总是发送折叠信号
    },
    
    updatePanelWidth() {
      // 在浮层模式下，宽度由CSS和父组件控制
      if (!this.isDrawerMode) {
        this.$nextTick(() => {
          if (this.$el) {
            this.$el.style.width = this.panelWidth + 'px'
          }
        })
      }
    },
    
    startResize(event) {
      this.isResizing = true
      this.startX = event.clientX
      this.startWidth = this.panelWidth
      document.body.style.cursor = 'col-resize'
      document.body.style.userSelect = 'none'
    },
    
    handleResize(event) {
      if (!this.isResizing || this.isDrawerMode) return
      
      const diff = this.startX - event.clientX
      const newWidth = Math.max(320, Math.min(420, this.startWidth + diff))
      
      if (newWidth !== this.panelWidth) {
        this.panelWidth = newWidth
        this.updatePanelWidth()
        this.$emit('panel-resize', newWidth)
      }
    },
    
    stopResize() {
      if (this.isResizing) {
        this.isResizing = false
        document.body.style.cursor = ''
        document.body.style.userSelect = ''
        localStorage.setItem('calibration-panel-width', this.panelWidth)
      }
    },
    
    getGnssStatusType(status) {
      if (status === '0/0') return 'info'
      if (status.includes('锁定')) return 'success'
      if (status.includes('异常')) return 'warning'
      return 'info'
    },
    
    addCalibration() {
      this.$emit('add-calibration')
    },
    
    removeCalibration(id) {
      this.$emit('remove-calibration', id)
    },
    
    executeCalibration() {
      this.$emit('execute-calibration')
    }
  },

  watch: {
    panelWidth(newWidth) {
      if (!this.isDrawerMode) {
        this.updatePanelWidth()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.right-panel {
  /* 浮层模式下的基础样式由父组件控制 */
  height: 100%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  transition: all var(--duration-200) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);

  &.collapsed {
    opacity: 0;
    pointer-events: none;
  }

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-tertiary);

    .panel-title {
      h3 {
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        line-height: var(--line-height-tight);
      }

      .map-name {
        font-size: var(--font-size-xs);
        color: var(--color-danger);
        margin-left: var(--spacing-2);
      }
    }

    .collapse-btn {
      color: var(--color-text-tertiary);
      
      &:hover {
        color: var(--color-primary);
      }
    }
  }

  .panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-4);
    opacity: 1;
    transition: opacity var(--duration-200) var(--ease-out);
    overflow: hidden;

    .info-card {
      background: var(--color-bg-card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      margin-bottom: 16px; /* 统一卡片间距 */
      overflow: hidden;

      &:last-child {
        margin-bottom: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      .card-header {
        padding: var(--spacing-3) var(--spacing-4);
        border-bottom: 1px solid var(--color-border-secondary);
        background: var(--color-bg-secondary);

        .card-title {
          margin: 0;
          font-size: var(--font-size-base);
          font-weight: var(--font-weight-semibold);
          color: var(--color-text-primary);
        }
      }

      .card-content {
        padding: var(--spacing-4);
      }
      
      /* 为最后一个卡片（标定点卡片）设置可滚动 */
      &:last-child {
        .card-content {
          flex: 1;
          overflow-y: auto;
          
          /* 自定义滚动条样式 */
          &::-webkit-scrollbar {
            width: 6px;
          }

          &::-webkit-scrollbar-track {
            background: var(--color-bg-tertiary);
            border-radius: var(--radius-full);
          }

          &::-webkit-scrollbar-thumb {
            background: var(--color-border-primary);
            border-radius: var(--radius-full);
            
            &:hover {
              background: var(--color-text-quaternary);
            }
          }
        }
      }

      .pose-section {
        margin-bottom: var(--spacing-4);

        &:last-child {
          margin-bottom: 0;
        }

        .section-title {
          font-size: var(--font-size-sm);
          font-weight: var(--font-weight-medium);
          color: var(--color-text-tertiary);
          margin-bottom: var(--spacing-2);
          padding-bottom: var(--spacing-1);
          border-bottom: 1px solid var(--color-border-tertiary);
        }

        .pose-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: var(--spacing-2) 0;
          border-bottom: 1px solid var(--color-border-tertiary);

          &:last-child {
            border-bottom: none;
          }

          .pose-label {
            font-size: var(--font-size-sm);
            color: var(--color-text-secondary);
            font-weight: var(--font-weight-medium);
          }

          .pose-value {
            font-size: var(--font-size-sm);
            color: var(--color-text-primary);
            font-weight: var(--font-weight-normal);
            text-align: right;
          }
        }
      }

      .calibration-table {
        .table-header,
        .table-row {
          display: grid;
          grid-template-columns: 48px 1fr 48px;
          gap: var(--spacing-2);
          align-items: center;
        }

        .table-header {
          padding: var(--spacing-2) 0;
          border-bottom: 1px solid var(--color-border-secondary);
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-semibold);
          color: var(--color-text-tertiary);
          text-align: center;
        }

        .table-row {
          padding: var(--spacing-2) 0;
          border-bottom: 1px solid var(--color-border-tertiary);
          font-size: var(--font-size-sm);

          &:last-child {
            border-bottom: none;
          }

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

          .col-id {
            text-align: center;
            font-weight: var(--font-weight-medium);
            color: var(--color-primary);
          }

          .col-coord {
            font-family: var(--font-family-mono);
            font-size: var(--font-size-xs);
            color: var(--color-text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .col-action {
            text-align: center;

            .delete-btn {
              color: var(--color-danger);
              
              &:hover {
                color: var(--color-danger-dark);
              }
            }
          }
        }
      }

      .action-buttons {
        display: flex;
        gap: var(--spacing-2);
        margin-top: var(--spacing-4);

        .el-button {
          flex: 1;
        }
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-6) var(--spacing-4);
        color: var(--color-text-quaternary);

        i {
          font-size: var(--font-size-2xl);
          margin-bottom: var(--spacing-2);
          opacity: 0.5;
        }

        p {
          margin: 0;
          font-size: var(--font-size-sm);
          opacity: 0.8;
        }
      }
    }
  }

  .resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;

    &:hover {
      background: var(--color-primary);
      opacity: 0.3;
    }

    &:active {
      background: var(--color-primary);
      opacity: 0.5;
    }
  }
}

// 暗色主题适配
html.dark {
  .right-panel {
    .panel-header {
      background: var(--color-bg-quaternary);
    }

    .info-card {
      background: var(--color-bg-tertiary);
      box-shadow: var(--shadow-card);

      .card-header {
        background: var(--color-bg-quaternary);
      }
    }
  }
}
</style>
