<!--  -->
<template>
  <div>
    <div class="text-right m-b-10px">
      <el-button size="small" type="primary" @click="addNewTag = true; newTagText = ''">添加新标签</el-button>
    </div>
    <div class="m-b-12px flex" v-if="addNewTag">
      <el-input
        v-model="newTagText"
        placeholder="请输入标签，按回车键确认！"
        clearable
        class="!w-300px"
        @keyup.enter="saveTags"
      />
      <el-button type="primary" class="m-l-12px" @click="saveTags">保存</el-button>
      <el-button @click="addNewTag = false">关闭</el-button>
    </div>
    <div>
      <el-tag
        v-for="(item, index) of list"
        :key="index"
        closable
        size="large"
        @close="deleteTag(index)"
        class="m-r-10px m-b-10px"
      >{{ item.skillsName }}</el-tag>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'Tags'})
import { cloneDeep } from 'lodash-es'

const props = defineProps({
  data: Array
})

const tagList = [
  {
    skillsName: "技术专家", 
    id: "1"
  }, 
  {
    skillsName: "管理精英", 
    id: "2"
  }, 
  {
    skillsName: "创新先锋", 
    id: "3"
  }, 
  {
    skillsName: "市场高手", 
    id: "4"
  }, 
  {
    skillsName: "团队领袖", 
    id: "5"
  }
]

const list = ref(props.data && props.data.length ? cloneDeep(props.data) : tagList)

const addNewTag = ref(false)
const newTagText = ref('')
const saveTags = () => {
  list.value.push({skillsName: newTagText.value})
  addNewTag.value = false
}

const deleteTag = (index) => {
  list.value.splice(index, 1)
}
</script>
