<template>
  <div class="structure-panel">
    <div class="panel-title">结构信息</div>
    
    <div class="info-section">
      <div class="info-row">
      <span class="label">图片尺寸</span>
      <span class="value">{{ editorStore.imageSize.width }} × {{ editorStore.imageSize.height }}</span>
      </div>
      <div class="info-row" v-if="editorStore.scaleFactor < 1">
      <span class="label">缩放比例</span>
      <span class="value">{{ (editorStore.scaleFactor * 100).toFixed(1) }}%</span>
      </div>
      <div class="info-row">
      <span class="label">行数</span>
      <span class="value">{{ editorStore.rowCount }}</span>
      </div>
      <div class="info-row">
      <span class="label">列数</span>
      <span class="value">{{ editorStore.colCount }}</span>
      </div>
      <div class="info-row">
      <span class="label">表格Bbox</span>
      <span class="value">{{ editorStore.tableBbox?.join(', ') ?? '-' }}</span>
      </div>
    </div>
    
    <!-- 横线列表 -->
    <div class="line-section">
      <div class="section-title">
        横线 ({{ editorStore.horizontalLineCount }})
      </div>
      <div class="line-list">
        <div 
          v-for="(y, index) in editorStore.structure.horizontal_lines"
          :key="'h-' + index"
          class="line-item"
          :class="{
            selected: isSelected('h', index),
            modified: isModified('h', index)
          }"
          @click="selectLine('h', index)"
        >
          <span class="line-label">R{{ index + 1 }}</span>
          <span class="line-value">Y = {{ y }}</span>
        </div>
      </div>
    </div>
    
    <!-- 竖线列表 -->
    <div class="line-section">
      <div class="section-title">
        竖线 ({{ editorStore.verticalLineCount }})
      </div>
      <div class="line-list">
        <div 
          v-for="(x, index) in editorStore.structure.vertical_lines"
          :key="'v-' + index"
          class="line-item"
          :class="{
            selected: isSelected('v', index),
            modified: isModified('v', index)
          }"
          @click="selectLine('v', index)"
        >
          <span class="line-label">C{{ index + 1 }}</span>
          <span class="line-value">X = {{ x }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useEditorStore } from '@/stores'

const editorStore = useEditorStore()

function isSelected(type: 'h' | 'v', index: number): boolean {
  const selected = editorStore.selectedLine
  return selected !== null && selected.type === type && selected.index === index
}

function isModified(type: 'h' | 'v', index: number): boolean {
  if (type === 'h') {
    return editorStore.structure.modified_h_lines.includes(index)
  } else {
    return editorStore.structure.modified_v_lines.includes(index)
  }
}

function selectLine(type: 'h' | 'v', index: number) {
  editorStore.selectLine({ type, index })
}
</script>

<style scoped>
.structure-panel {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #303133;
}

.info-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}

.info-row .label {
  color: #909399;
}

.info-row .value {
  color: #303133;
  font-weight: 500;
}

.line-section {
  margin-bottom: 16px;
}

.section-title {
  font-size: 13px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
}

.line-list {
  max-height: 200px;
  overflow-y: auto;
}

.line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.line-item:hover {
  background: #e6f7ff;
}

.line-item.selected {
  background: #409eff;
  color: #fff;
}

.line-item.selected .line-label,
.line-item.selected .line-value {
  color: #fff;
}

.line-item.modified {
  background: #fef0f0;
}

.line-item.modified.selected {
  background: #f56c6c;
}

.line-label {
  font-weight: 600;
  color: #409eff;
}

.line-value {
  color: #909399;
}
</style>
