<template>
	<div
		class="xd-text-area-tag"
		:class="{active:isEnter && !disabled,disabled:disabled}"
		@click="handleClick"
	>

		<el-tag
			class="xd-text-area-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-text-area-tag__input"
			v-model="inputValue"
			ref="saveTagInput"
			:placeholder="placeholder"
			size="small"
			@keyup.enter.native="handleInputConfirm()"
			@blur="()=>{handleInputConfirm(false);}"
		>
		</el-input>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  export default {
    name: "XdTextAreaTag",
    mixins: [emitter],
		props:{
      defaultValue: {
        type: Array,
        default() {
          return []
        },
      },

      maps: {
        type: Object | null,
        default() {
          return null
        },
      },

      setting: {
        type: Object,
        default() {
          return {
            multiple: true
					}
        },
      },

      disabled: {
        type: Boolean,
        default: false,
      },

      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },

      placeholder: {
        type: String,
        default: '请输入内容',
      },
		},
		data(){
      return {
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        isEnter: false,
        multiple: false,
			}
		},

		created(){
      if(this.$xdHelper.checkVarType(this.setting.multiple) === 'boolean') {
        this.multiple = this.setting.multiple;
			}
      if (this.$xdHelper.checkVarType(this.defaultValue) === 'array' && this.defaultValue.length > 0) {
        if(this.multiple) {
          this.dynamicTags = this.dynamicTags.concat(this.defaultValue);
				}
        else{
          this.dynamicTags = [this.defaultValue[0]]
				}

        this.update();
      }
		},

		methods: {

      handleClick() {
        this.isEnter = true;
        this.$refs.saveTagInput.$refs.input.focus();
      },
      handleClose(index) {
        this.dynamicTags.splice(index, 1);
        this.change();
        this.update();
      },
      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) {
          if(this.multiple) {
            this.dynamicTags.push({
              value: inputValue,
              label: inputValue,
            });
					}
          else{
            this.dynamicTags = [{
              value: inputValue,
              label: inputValue,
            }]
					}

          this.inputVisible = false;
          this.inputValue = '';
        }
        this.change();
        this.update();
        if (isEnter === false) this.isEnter = isEnter;
      },
      handleChange() {
        this.change();
        this.update();
      },

      /**
			 * @description 需要校验检查参数是正确处理方法
       */
			checkParams(){
   			return this.dynamicTags;
			},

			/**
			 * @description 数据改变事件
			 */
			change(){
			  this.$emit('onChange', this.checkParams())
			},


      /**
			 * @description 双向绑定数据处理
       */
			update(){
        this.$emit('input', this.checkParams());
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.blur', [this.checkParams()])
          this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()])
        }
			},


		}
  }
</script>

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

    &.disabled {
      position: relative;
      &:after {
        position: absolute;
        border-radius: 4px;
        left: 0;
        right: 0;
        bottom: 0;
        top:0;
        content: ' ';
        cursor: not-allowed;
        background: rgba(0,0,0,.03);
        z-index: 100;
      }
    }

		&.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;
			max-width: 160px;
			min-width: 140px;

		}
	}

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