<template>
  <div
    class="xd-textarea-tag"
    :class="{active:isEnter}"
    :style="{width: width}"
    @click="handleClick"
  >
    <el-tag
      class="xd-textarea-tag__item"
      :key="index"
      v-for="(item,index) in dynamicTags"
      closable
      :disable-transitions="false"
      @close="handleClose(index)"
    >{{item.label}}</el-tag>
    <el-input
      class="xd-textarea-tag__input"
      :style="`width:${btnWidth}px`"
      v-model="inputValue"
      ref="saveTagInput"
      :placeholder="placeholder"
      size="small"
      @keyup.enter.native="handleInputConfirm()"
      @blur="()=>{handleInputConfirm(false);}"
    >
    </el-input>
  </div>
</template>

<script>
  export default {
    name: "XdTextareaTag",
    props:{
      btnWidth: {
        type: Number,
        default: 150
      },
      width: {
        type: String,
        default: '500px'
      },
      placeholder: {
        type: String,
        default: '请输入标签内容',
      },
      defaultValue: {
        type: Array,
        default(){
          return []
        }
      }
    },
    data() {
      return {
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        isEnter: false
      };
    },
    created(){
      this.dynamicTags = this.dynamicTags.concat(this.defaultValue);
      this.handleChange();
    },

    methods: {
      setValue(val){

      },
      handleClose(index) {
        this.dynamicTags.splice(index, 1);
        this.$emit('input', this.dynamicTags);
      },

      handleChange(){
        this.$emit('input', this.dynamicTags);
      },

      handleClick(){
        this.isEnter = true;
        this.$refs.saveTagInput.$refs.input.focus();
      },

      handleInputConfirm(isEnter) {
        let inputValue = this.$xdHelper.tirm(this.inputValue);
        if(this.$xdHelper.isKeyInLists(this.dynamicTags, inputValue, 'label')) {
          this.$message({message: '输入的内容已存在', type: 'error'});
          return;
        }
        if (inputValue) {
          this.dynamicTags.push({
            value: -1,
            label: inputValue,
          });
          this.inputVisible = false;
          this.inputValue = '';
        }
        this.$emit('input', this.dynamicTags);
        if(isEnter === false) this.isEnter = isEnter;
      }
    }
  }
</script>

<style scoped lang="scss">
  .xd-textarea-tag {
    overflow: hidden;
    padding: 10px 10px 0;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    &.active {
      border: 1px solid #42B983;
    }

    &__item {
      height: 32px;
      line-height: 30px;
      margin-right: 10px !important;
      margin-bottom: 10px;
    }

    &__input {
      vertical-align: bottom;
      height: 32px;
      line-height: 30px;
      overflow: hidden;
      margin-bottom: 10px;
    }
  }

  @media screen and (max-width: 450px) {
    .xd-textarea-tag {
      width: 100% !important;
      box-sizing: border-box
    }
  }
</style>
