<template>
  <div class="text-input-list">
    <!-- 文本输入列表 -->
    <div class="input-list">
      <div
        v-for="(text, index) in innerTexts"
        :key="index"
        class="input-item"
      >
        <el-input
          v-model="innerTexts[index]"
          :placeholder="`${placeholder} #${index + 1}`"
          :maxlength="maxLength"
          :class="{
            'is-error': isOverLength(text),
            'is-focused': focusedIndex === index
          }"
          :show-word-limit="true"
          @input="handleInput(index)"
          @focus="focusedIndex = index"
          @blur="focusedIndex = -1"
          width="50%"
        >
          <template slot="append">
            <el-button
              v-if="canDelete(index)"
              icon="el-icon-delete"
              @click="handleRemove(index)"
              class="delete-button"
            ></el-button>
          </template>
        </el-input>
        <div class="input-status">
          <transition name="fade">
            <span v-if="duplicateIndexes.includes(index)" class="duplicate-warning">
              重复内容
            </span>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextInputList',

  props: {
    value: {
      type: Array,
      default: () => ['']
    },
    maxLength: {
      type: Number,
      default: 100
    },
    placeholder: {
      type: String,
      default: '请输入文本'
    },
    warningThreshold: {
      type: Number,
      default: 0.9 // 默认在90%时显示警告
    }
  },

  data() {
    return {
      innerTexts: [''],
      focusedIndex: -1,
      duplicateIndexes: []
    }
  },

  watch: {
    value: {
      handler(newVal) {
        const valueToSet = newVal.length ? newVal : ['']
        if (JSON.stringify(this.getNonEmptyTexts()) !== JSON.stringify(valueToSet)) {
          this.innerTexts = [...valueToSet]
          if (!this.innerTexts[this.innerTexts.length - 1]) {
            this.innerTexts.push('')
          }
        }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    getNonEmptyTexts() {
      return this.innerTexts.filter(text => text.trim() !== '')
    },

    isOverLength(text) {
      return text.length > this.maxLength
    },

    canDelete(index) {
      return this.innerTexts.length > 1
    },

    handleInput(index) {
      const text = this.innerTexts[index]
      this.duplicateIndexes = [] // 清除之前的重复标记

      // 检查重复
      const duplicateIndex = this.innerTexts.findIndex((t, i) =>
        i !== index && t.trim() === text.trim() && text.trim() !== ''
      )

      if (duplicateIndex !== -1) {
        this.$message({
          message: '该文本已存在，请输入其他内容',
          type: 'warning',
          duration: 2000
        })
        this.duplicateIndexes = [index]
        this.$set(this.innerTexts, index, '')
        return
      }

      // 如果是最后一行且有内容，添加新行
      if (index === this.innerTexts.length - 1 && text.trim() !== '') {
        this.innerTexts.push('')
      }

      // 更新父组件的值
      this.$emit('input', this.getNonEmptyTexts())
    },

    handleRemove(index) {
      this.innerTexts.splice(index, 1)
      if (this.innerTexts.length === 0) {
        this.innerTexts.push('')
      }
      this.$emit('input', this.getNonEmptyTexts())
    }
  }
}
</script>

<style>
.text-input-list {
  width: 100%;
}

.input-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-item {
  position: relative;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.input-item:hover .delete-button {
  opacity: 1;
}

.delete-button {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.delete-button:hover {
  opacity: 1;
}

/* 输入框样式 */
.el-input.is-focused .el-input__inner {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.el-input__inner {
  transition: all 0.3s ease;
}

.el-input.is-error .el-input__inner {
  border-color: #F56C6C;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.1);
}

/* 状态显示区域 */
.input-status {
  position: absolute;
  left: 0;
  bottom: -20px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.input-counter {
  color: #909399;
  transition: all 0.3s ease;
}

.input-counter.is-error {
  color: #F56C6C;
}

.input-counter.is-warning {
  color: #E6A23C;
}

.duplicate-warning {
  color: #F56C6C;
  display: flex;
  align-items: center;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 输入框组样式 */
.el-input-group__append {
  padding: 0;
}

.el-input-group__append .el-button {
  border: none;
  margin: 0;
  height: 100%;
  color: #909399;
}

.el-input-group__append .el-button:hover {
  color: #F56C6C;
  background-color: #fef0f0;
}
</style>
