<template>
  <div class="w-tags-input">
    <el-tag v-for="(tag, index) in model" :key="index" closable :disable-transitions="false" :type="props.type"
      @close="handleClose(index)">
      {{ index }} : {{ tag }}
    </el-tag>
    <el-input v-if="inputVisible" ref="inputRef" v-model="inputValue" :style="{ width: props.placeholder.length * 2 + 1 + 'em' }"
      size="small" placeholder="key : value" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
    <el-button v-else class="button-new-tag" size="small" @click="showInput">
      {{ props.placeholder }}
    </el-button>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { nextTick, ref } from 'vue'
const model = defineModel({
  type: Object,
  required: true
});

const props = defineProps({
  /**
   * 输入提示
   */
  placeholder: {
    type: String,
    default: "新增配置项",
  },
  type: {
    type: String,
    default: 'primary'
  }
});

const inputValue = ref('')
const inputVisible = ref(false);
const inputRef = ref(undefined);
const handleClose = (index) => {
  delete model.value[index];
};

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    inputRef.value?.input?.focus();
  })
}



const handleInputConfirm = () => {
  if (inputValue.value) {
    if (inputValue.value.indexOf(":")>0) {
      model.value[inputValue.value.split(':')[0].trim()] = inputValue.value.split(':')[1].trim();
    } else {
      ElMessage.error('输入格式错误');
    }

  }
  inputVisible.value = false
  inputValue.value = ''
}

</script>

<style lang="scss" scoped>
.w-tags-input {
  display: flex;
  flex-wrap: wrap;

  &>* {
    margin: 0 1em 1em 0;
  }
}
</style>