<template>
  <div class="custom-add-tag">
    <t-tag
      v-for="(tag, index) in tags"
      :key="index"
      :theme="tag.type"
      :closable="tag.showClose"
      :icon="tag.icon"
      :disabled="!!tag.disabled"
      :max-width="tag.maxWidth"
      @click="handleClick"
      @close="handleClose(index)"
    >
      {{ tag.name }}
    </t-tag>
    <t-space class="tag-block editable">
      <t-tag v-if="!inputVisible" @click="handleClickAdd">
        <add-icon />
        {{ placeholder }}
      </t-tag>
      <t-input
        v-else
        ref="input"
        size="small"
        style="width: 94px"
        @blur="handleInputEnter"
        @enter="handleInputEnter"
      />
    </t-space>
  </div>
</template>

<script lang="tsx" setup>
import { nextTick, ref } from 'vue';
import { AddIcon } from 'tdesign-icons-vue-next';
import {
  Space as TSpace,
  Input as TInput,
  Tag as TTag,
} from 'tdesign-vue-next';
import { show_message } from '@/utils/tdesign_tool';

const props = withDefaults(
  defineProps<{
    modelValue: string[] | [];
    rules: any[];
    placeholder?: string;
  }>(),
  {
    placeholder: '请输入',
  }
);
const emit = defineEmits(['update:modelValue']);
const tags = ref([]);
const input = ref('');
const inputVisible = ref(false);
const handleClose = (index) => {
  console.log(index);
  tags.value.splice(index, 1);
  let list = JSON.parse(JSON.stringify(props.modelValue));
  list.splice(index, 1);
  emit('update:modelValue', list);
};
const handleClick = (event) => {
  console.log(event);
};
const handleInputEnter = (val) => {
  if (val && !tags.value.some((item) => item.name === val)) {
    tags.value.push({
      name: val,
      type: 'default',
      showClose: true,
      maxWidth: 200,
    });
    // 更新value
    let list = [];
    tags.value.forEach((item: any) => {
      list.push(item.name);
    });
    emit('update:modelValue', list);
  }
  inputVisible.value = false;
};

const handleClickAdd = () => {
  // 判断长度
  const { rules } = props;
  for (let i = 0; i < rules.length; i++) {
    let item = rules[i];
    if (item.type == 'length') {
      // 最大长度限制
      const maxlen = parseInt(item.value + '');
      if (tags.value.length >= maxlen) {
        show_message(item.message);
        return;
      }
    }
  }
  inputVisible.value = true;
  nextTick(() => {
    input.value.focus();
  });
};
</script>

<style lang="less">
.custom-add-tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 12px;
  margin-left: -12px;
  & > * {
    margin: 0 12px;
  }
  .t-tag {
    background: #181818;
    height: 46px;
    color: white;
    border-radius: 8px;

    .t-icon-close {
      color: white;
    }
  }
  .tag-block {
    .t-space-item {
      .t-tag {
        background: #181818;
        height: 46px;
        color: #888fa1;
        border-radius: 8px;
      }
      .t-input__wrap {
        border-radius: 8px;
        .t-input {
          background: #181818;
          height: 46px;
          border-radius: 8px;
          border: none;
          box-shadow: none;
          .t-input__inner {
            color: white;
          }
        }
      }
    }
  }
}
</style>
