<template>
  <div class="text-diff">
    <div class="text-diff__content">
      <template v-if="mode === 'diff'">
        <div v-if="diffResult" class="text-diff__row" :class="{ 'text-diff__row--different': hasEmptyValue }">
          <span v-for="(part, index) in diffResult.oldParts" 
            :key="'old-'+index"
            :class="{
              'text-diff__part': true,
              'text-diff__part--removed': part.removed || hasEmptyValue,
              'text-diff__part--unchanged': !part.removed && !hasEmptyValue
            }"
            :style="(part.removed || hasEmptyValue) ? styles.removed : styles.common">
            {{ part.value || '-' }}
          </span>
        </div>
      </template>
      <template v-else>
        <div class="text-diff__row" :class="{ 'text-diff__row--different': isDifferent || hasEmptyValue }">
          {{ oldText || '-' }}
        </div>
      </template>
    </div>
    <div v-if="showSimilarity && similarity !== null" class="text-diff__similarity">
      相似度: {{ similarity.toFixed(2) }}%
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, watchEffect } from 'vue'
import { useTextComparison, TextComparisonOptions } from '../composables/useTextComparison'

type CompareMode = 'diff' | 'full'

const TextDiff = defineComponent({
  name: 'TextDiff',
  props: {
    oldText: {
      type: String,
      default: ''
    },
    newText: {
      type: String,
      default: ''
    },
    isDifferent: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String as PropType<CompareMode>,
      default: 'diff',
      validator: (value: unknown): value is CompareMode => 
        typeof value === 'string' && ['diff', 'full'].includes(value as CompareMode)
    },
    options: {
      type: Object as PropType<TextComparisonOptions>,
      default: () => ({})
    },
    showSimilarity: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const { diffResult, similarity, styles, updateTexts } = useTextComparison(
      props.oldText || '',
      props.newText || '',
      props.options
    )

    // 检查是否有空值
    const hasEmptyValue = computed(() => {
      return !props.oldText || !props.newText || props.oldText.trim() === '' || props.newText.trim() === ''
    })

    // 监听文本变化
    watchEffect(() => {
      updateTexts(props.oldText || '', props.newText || '')
    })

    return {
      diffResult,
      similarity,
      styles,
      hasEmptyValue
    }
  }
})

export default TextDiff
export type { TextDiff }
</script>

<style scoped>
.text-diff {
  font-size: 14px;
  line-height: 1.5;
}

.text-diff__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.text-diff__row {
  padding: 8px 12px;
  word-break: break-all;
  white-space: pre-wrap;
  min-height: 20px;
  position: relative;
}

.text-diff__row--different {
  color: #f56c6c;
}

.text-diff__part {
  display: inline;
  white-space: pre-wrap;
  word-break: break-all;
  /* margin: 0 1px; */
}

.text-diff__similarity {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  text-align: right;
}
</style>