<template>
  <div class="demo-x-markdown-section-extractor">
    <h2>Demo: XMarkdownSectionExtractor</h2>

    <XMarkdownSectionExtractor
      ref="extractor"
      :showUploadButton="false"
      @sections-rendered="onSectionsRendered"
      @selection-change="onSelectionChange"
    />

    <div class="demo-actions">
      <button @click="loadAndExtract">加载内容并提取</button>
      <button @click="getSelected">获取选中数据</button>
      <button @click="clearSections">清空</button>
      <button @click="testExtractByKeywords">测试 extractByKeywords</button>
    </div>

    <div v-if="keywordResult" class="keyword-result">
      <h3>extractByKeywords 结果：</h3>
      <div v-for="(item, idx) in keywordResult" :key="idx" class="result-item">
        <strong>{{ Object.keys(item)[0] }}：</strong>{{ Object.values(item)[0] }}
      </div>
    </div>
  </div>
</template>

<script>
import XMarkdownSectionExtractor from './XMarkdownSectionExtractor.vue'
import markdownContent from './bingli.md'

export default {
  name: 'DemoXMarkdownSectionExtractor',
  components: { XMarkdownSectionExtractor },
  data () {
    return {
      selectedItems: [],
      sampleMarkdown: markdownContent,
      keywordResult: null
    }
  },
  methods: {
    async loadAndExtract () {
      // 方式1：先设置 source，再调用 extractAs
      this.$refs.extractor.setSource(this.sampleMarkdown)
      await this.$refs.extractor.extractAs(['还需提问', '下一步建议'])
    },
    onSectionsRendered (sections) {
      // eslint-disable-next-line no-console
      console.log('sections rendered:', sections)
    },
    onSelectionChange (selected) {
      this.selectedItems = selected
    },
    getSelected () {
      const selected = this.$refs.extractor.getSelectedItems()
      // eslint-disable-next-line no-console
      console.log('selected items:', selected)
      alert(`已选中 ${selected.length} 条数据，已输出到控制台`)
    },
    clearSections () {
      this.$refs.extractor.clearRenderedSections()
    },
    testExtractByKeywords () {
      const result = this.$refs.extractor.extractByKeywords(
        this.sampleMarkdown,
        ['主诉', '现病史', '既往史', '体格检查', '专科检查', '辅助检查']
      )
      this.keywordResult = result
      // eslint-disable-next-line no-console
      console.log('extractByKeywords result:', result)
    }
  }
}
</script>

<style lang="less" scoped>
.demo-actions {
  margin-top: 16px;

  button {
    padding: 8px 16px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 8px;

    &:hover {
      background: #40a9ff;
    }
  }
}

.keyword-result {
  margin-top: 16px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 4px;

  h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
  }

  .result-item {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;

    strong {
      color: #1890ff;
    }
  }
}
</style>
