<!-- 实体类-标签属性 -->
<template>
  <div style="min-height: 100px;">
    <a-spin :spinning="spinning">
      <template v-for="(tag, index) in tags">
        <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
          <a-tag :key="tag" :closable="true" :after-close="() => handleClose(tag)">
            {{ `${tag.slice(0, 20)}...` }}
          </a-tag>
        </a-tooltip>
        <a-tag v-else :key="tag" :closable="true" :after-close="() => handleClose(tag)">
          {{ tag }}
        </a-tag>
      </template>
      <a-input
        v-if="inputVisible"
        ref="input"
        type="text"
        size="small"
        :style="{ width: '78px' }"
        :value="inputValue"
        @change="handleInputChange"
        @blur="handleInputConfirm"
        @keyup.enter="handleInputConfirm"
      />
      <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
        <a-icon type="plus" />
        新建标签
      </a-tag>
    </a-spin>
  </div>
</template>

<script>
const api = require('@/api/index')
export default {
  name: 'TagEditor',
  props: ['entId', 'isModel'],
  data() {
    return {
      vertexId: null,
      tags: [],
      inputVisible: false,
      inputValue: '',
      spinning: false
    }
  },
  created() {
    if (this.$route.meta.type && this.$route.meta.type === 'entity') {
      this.vertexId = this.$route.params.entityId
    } else {
      this.vertexId = this.$route.params.classId
    }
    // 这里是模板实体中引用当前组件，作为组件而不是一个路由地址的指向，加入的判断
    if (typeof this.isModel !== 'undefined') {
      this.vertexId = this.entId
    }
    if (this.vertexId) {
      this.refreshTagList()
    }
  },
  methods: {
    /**
       * 刷新tag列表
       */
    refreshTagList() {
      this.spinning = true
      api.tag.getTagList(this.vertexId, this.isModel).then((data) => {
        this.spinning = false
        const tags = []
        for (var i = 0; i < data.length; i++) {
          tags.push(data[i].tagName)
        }
        this.tags = tags
      })
    },
    /**
       * 删除标签
       **/
    handleClose(removedTag) {
      api.tag.deleteTag(this.vertexId, removedTag, this.isModel).then((data) => {
        if (data) {
          const tags = this.tags.filter(tag => tag !== removedTag)
          this.tags = tags
        }
      })
    },
    /**
       * 点击新建标签按钮
       * */
    showInput() {
      this.inputVisible = true
      this.$nextTick(function() {
        this.$refs.input.focus()
      })
    },
    /**
       * 输入框变化触发
       * */
    handleInputChange(e) {
      this.inputValue = e.target.value
    },
    /**
       * 新建提交
       */
    handleInputConfirm() {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        api.tag.addTag(this.vertexId, inputValue, this.isModel).then((data) => {
          if (data) {
            tags = [...tags, inputValue]
            Object.assign(this, {
              tags,
              inputVisible: false,
              inputValue: ''
            })
          }
        })
      } else if (inputValue && tags.indexOf(inputValue) > -1) {
        this.$message.error('不可以有重名标签')
      }
    }
  }
}
</script>

<style scoped>

</style>
