<template>
  <div class="flex">
    <el-input v-model="item.tagItemName" placeholder="请输入标签值" class="w-380" maxlength="15" show-word-limit @change="onChange" @paste.native="onPaste" />
    <i class="iconfont plus icon margin icon-PlusOutlined" @click="add" />
    <i v-if="currentLength > 1 && !item.tagItemId" class="iconfont delete icon icon-delete" @click="del" />
  </div>
</template>

<script>
export default {
  name: 'TagValueItem',
  props: {
    item: Object,
    currentLength: Number
  },
  data() {
    return {
      tagValue: ''
    };
  },
  methods: {
    onPaste(e) {
      if (this.currentLength >= 100) {
        return this.$message.warning('标签值最多支持设置100个');
      }
      this.$emit('paste', e);
      setTimeout(() => {
        this.item.tagItemName = '';
      }, 10);
    },
    add() {
      if (this.currentLength >= 100) {
        return this.$message.warning('标签值最多支持设置100个');
      }
      this.$emit('add', this.item.id);
    },
    del() {
      this.$emit('del', this.item.id);
    }
  }
};
</script>

<style scoped lang="scss">
@mixin flex($justify, $alignItems) {
  display: flex;
  justify-content: $justify;
  align-items: $alignItems;
}
.flex {
  @include flex(initial, center);
  &:not(:last-of-type) {
    margin-bottom: 20px;
  }
}
.w-380 {
  width: 380px;
}
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
}
.margin {
  margin: 0 7px 0 16px;
}
.plus {
  color: #2f54eb;
  &:hover {
    background: rgba(47, 84, 235, .1);
  }
}
.delete {
  color: #f5222d;
  &:hover {
    background: rgba(245, 34, 45, .1);
  }
}
</style>
