<style scoped lang="scss">
.tag-warpper {
  width: 100%;
  min-height: 35px;
  border-radius: 2px;
}


.tag-list .el-tag {
  height: 26px;
  line-height: 26px;
  float: left;
}

.tag-input {
  float: left;
  min-width: 150px;
  border-width: 0;
}

.tag-warpper /deep/ .el-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border-width: 0;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
}

.tag-warpper .el-input:hover {
  border-width: 0;
  outline: none !important;
  box-shadow: none !important;
}

.tag-warpper .el-input:focus {
  border-width: 0;
  outline: none !important;
  box-shadow: none !important;
}

</style>
<template>
  <div>
    <div :class="className">
      <div class="tag-list">
        <el-tag v-for="(item,idx) in state.tagList" :key="idx"
                :name="item" :closable="!readonly" :color="'var(--el-text-color-primary)'"
                @on-close="deleteItem(idx)">{{ item }}
        </el-tag>
        <div v-if="!readonly" class="tag-input nob">
          <Input v-model="state.inputTag" :placeholder="placeholder"
                 @keyup.enter.native="enterTag"/>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup lang="ts" name="ExtTag">
import {reactive} from 'vue';
import {ElMessage} from 'element-plus';

const emit = defineEmits(['update:value']);
const props = defineProps({
  value: {
    type: Array,
    default: () => {
      return [];
    }
  },
  readonly: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '点此输入，Enter回车键键确认'
  },
  className: {
    type: String,
    default: "tag-warpper"
  }
})

const state = reactive({
  tagList: [] as Array<String>,
  inputTag: ""
})

const enterTag = () => {
  if (!state.inputTag.trim()) {
    ElMessage.warning("输入内容不能为空");
  } else {
    state.tagList.push(state.inputTag);
    state.inputTag = "";
  }
  emit("update:value", state.tagList)
}

const deleteItem = (idx: number) => {
  state.tagList.splice(idx, 1);
  emit("update:value", state.tagList)
}
</script>
