<script>
import DiffMatchPatch from 'diff-match-patch'

const dmp = new DiffMatchPatch()

/**
 * 显示两段文本的差异
 * @displayName SdTextDiff 文本对比
 */
export default {
  name: 'SdTextDiff',
  functional: true,
  props: {
    /**
     * 第一段文本
     */
    text1: {
      type: String,
      required: true,
    },
    /**
     * 第二段文本
     */
    text2: {
      type: String,
      required: true,
    },
  },
  render: function(h, context) {
    const styles = [context.$style.delete, undefined, context.$style.add]
    const titles = ['删除', undefined, '增加']
    const diffs = dmp.diff_main(context.props.text1 || '', context.props.text2 || '')

    return (
      <span class={context.$style.wrapper}>
        {diffs.map((diff) => (
          <span class={styles[diff[0] + 1]} title={titles[diff[0] + 1]}>
            {diff[1]}
          </span>
        ))}
      </span>
    )
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  .delete {
    color: $red-6;
    text-decoration: line-through;
  }
  .add {
    color: $green-6;
    text-decoration: underline;
  }
}
</style>

<docs>
```vue
<template>
<sd-text-diff text1="周杰郑智化" text2="周杰伦郑智" />
</template>
```
</docs>
