/**
* Description: 可编辑的Tag列表,支持增删改
*
* Created by longyihuang on 2019/11/4
* E-Mail: 475865662@qq.com
*/

<template>
  <div class="editable-tags-container">
    <div v-for="(tag, index) in tags" :key="index">
      <el-tag
        v-if="editIndex !== index"
        class="tag"
        @click="handleClickEdit(tag, index)"
        :closable="closable"
        @close="handleClose(index)"
        :disable-transitions="true"
      >
        {{tag}}
      </el-tag>
      <el-input
        v-else
        :style="{width: inputWidth+'px'}"
        v-model="inputValue"
        ref="editTagInput"
        :size=size
        @keyup.enter.native="handleEditConfirm"
        @keyup.esc.native="handleCancelEdit"
        @blur="blurCommit && handleEditConfirm()"
      />
    </div>

    <div v-if="addable">
      <el-input
        :style="{width: inputWidth+'px'}"
        v-if="inputVisible"
        v-model="inputValue"
        ref="addTagInput"
        :size=size
        @keyup.enter.native="handleAddConfirm"
        @keyup.esc.native="handleCancelAdd"
        @blur="blurCommit && handleAddConfirm()"

      />
      <el-button v-else class="button-new-tag" :size="size"  @click="showInput">{{addButtonName}}</el-button>
    </div>
  </div>
</template>

<script>
	export default {
		name: "EditableTags",
		props: {
			tags: {
				type: Array,
				default: function () {
					return [];
				}
			},
			addable: {
				type: Boolean,
				default: function () {
					return false;
				}
			},
			addButtonName: {
				type: String,
				default: function () {
					return '+ New Tag';
				}
			},
			closable: {
				type: Boolean,
				default: function () {
					return false;
				}
			},
			editable: {
				type: Boolean,
				default: function () {
					return false;
				}
			},
			blurCommit: {
				type: Boolean,
				default: function () {
					return true;
				}
			},
			size: {
				type: String,
				default: function () {
					return undefined;
				}
			},

			inputWidth: {
				type: Number,
				default: function () {
					return 190;
				}
      }
		},
		data() {
			return {
				inputVisible: false,
				inputValue: '',
				editIndex: undefined
			}
		},
		methods: {
			handleClickEdit(tag, index) {
				if (this.editable) {
					if (this.inputVisible) {
						this.handleCancelAdd();
						return;
					}
					this.editIndex = index;
					this.inputValue = tag;
					this.$nextTick(() => {
						this.$refs.editTagInput[0].focus();
					});
				}
			},

			handleCancelEdit() {
				this.editIndex = undefined;
				this.inputValue = '';
			},


			handleClose(index) {
				this.$emit('onCloseTag', index);
			},


			handleEditConfirm() {
				const inputValue = this.inputValue;
				const editIndex = this.editIndex;
				if (inputValue) {
					this.$emit('onEditTag', inputValue, editIndex);
				}
				this.editIndex = undefined;
				this.inputValue = '';
			},


			handleAddConfirm() {
				const inputValue = this.inputValue;
				if (inputValue) {
					this.$emit('onAddTag', inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},

			showInput() {
				if (this.editIndex !== undefined) {
					this.handleCancelEdit();
					return;
				}
				this.inputVisible = true;
				this.$nextTick(() => {
					this.$refs.addTagInput.focus();
				});
			},

			handleCancelAdd() {
				this.inputVisible = false;
				this.inputValue = '';
			}
		}
	}
</script>

<style lang='scss' scoped>
  .editable-tags-container {
    display: flex;
    flex-wrap: wrap;
    .tag {
      margin: 5px 5px;
    }
    .button-new-tag {
      margin: 5px 5px;
    }
  }

</style>