<template>
  <div class="ocr-demo-page">
    <div class="panel-header">OCR 组件调用示例</div>

    <div class="panel-body">
      <el-button type="primary" @click="visible = true">打开 OCR 对话框</el-button>

      <div class="demo-info">
        <div class="demo-section">
          <div class="section-title">原始传入文本</div>
          <pre>{{ lines.join('\n') }}</pre>
        </div>

        <div class="demo-section">
          <div class="section-title">已选字符</div>
          <div v-if="selectedChars.length">
            <el-tag
              v-for="item in selectedChars"
              :key="`${item.lineIndex}-${item.charIndex}`"
              type="success"
              effect="plain"
            >
              {{ item.char === ' ' ? '␣' : item.char }}
            </el-tag>
          </div>
          <div v-else class="empty-tip">当前尚未选择任何字符</div>
        </div>
      </div>
    </div>

    <OcrDialog
      v-model="visible"
      :lines="lines"
      title="OCR 多选字符示例"
      @selected-change="onSelectedChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import OcrDialog from '@/components/wave/ocrDialog.vue'

interface SelectedChar {
  lineIndex: number
  charIndex: number
  char: string
}

const visible = ref(false)
const selectedChars = ref<SelectedChar[]>([])
const lines = ref<string[]>([
  '示例 OCR 文本行一',
  '第二行内容，支持多行\n换行后依然按行切割',
  '第三行：可以点击每个字符进行多选'
])

function onSelectedChange(value: SelectedChar[]) {
  selectedChars.value = value
}
</script>

<style scoped>
.ocr-demo-page {
  max-width: 860px;
  margin: 24px auto;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.panel-header {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.panel-body {
  display: grid;
  gap: 20px;
}

.demo-info {
  display: grid;
  gap: 18px;
}

.demo-section {
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  background: #fafafa;
}

.section-title {
  font-weight: 600;
  margin-bottom: 10px;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.empty-tip {
  color: #999;
}

.el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>
