<template>
	<div class="xd-group-input" v-if="dataList.length > 0">
    <div class="xd-group-input__item" v-for="(item,index) in dataList">
      <div class="xd-group-input__item-input">
        <el-input
          clearable
          v-model="item.value"
          :placeholder="item.placeholder"
          :disabled="item.disabled"
          :type="item.type"
          :size="item.size"
          :rows="item.rows"
          @input="handleInput"
          @blur="handleInput"
          @change="handleInput"
          @clear="handleInput"
        ></el-input>
      </div>
      <div class="xd-group-input__item-btn">
        <i v-if="(index + 1) === dataList.length" class="el-icon-circle-plus" @click="addItem()"></i>
        <i v-if="dataList.length > 1" class="el-icon-remove" @click="removeItem(index)"></i>
      </div>
    </div>
	</div>
</template>

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

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

      setting: {
        type: Object,
        default() {
          return {
            type:'text', //支持所有input自定义type属性,
            rows: 4, //当类型为Textarea时，此属性生效
            maxCharLen: 99999, //最大字符串数量
            minCharLen:0 //最小字符串数量
					}
        },
      },

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

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

      placeholder: {
        type: String,
        default: '请输入内容',
      },

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

      //是否启用自定义校验器
      useCustomRules: {
        type: Boolean,
        default: false,
      },

      //数字字符串 转 数字
      isNumber: {
        type: Boolean,
        default: true,
      },

      //自定义方法
      handleCustom: {
        type: Function || null,
        default: null
      },

		},
		data(){
      return {
        timer:null,
        dataList: [],
        emptyItem:  {value: '', type: 'text', placeholder:'请输入内容' }
			}
		},

		created(){
      if(this.defaultValue.length > 0) {
        let list = [];
        this.defaultValue.map(value =>{
          list.push(this.addItem(value))
        });
        this.dataList = list;
        this.$nextTick(()=>{
          this.update();
        })

      }
      else this.addItem();
		},

		methods: {
      handleInput(){
        if(this.timer) clearTimeout(this.timer);
        this.timer = setTimeout(()=>{
          this.change();
          this.update();
        }, 300)
      },
      removeItem(index){
        this.dataList.splice(index, 1);
        this.change();
        this.update();
      },
      addItem(value = null){
        let empty = this.$xdHelper.cloneDeep(this.emptyItem);
        empty['placeholder'] = this.placeholder|| '输入内容';
        empty['disabled'] = this.disabled || false;
        empty['size'] = this.size || 'medium';
        empty['type'] = this.setting.type || 'text';
        if(empty['type'] === 'textarea') {
          empty['rows'] = this.setting && this.setting.rows || 4;
        }
        if(value !== null){
          empty.value = value;
          return empty;
        }
        this.dataList.push(empty);
      },

      /**
			 * @description 需要校验检查参数是正确处理方法
       */
			checkParams(){
        console.log(this.setting);
        let value = [];
        let flag = false;
        this.dataList.map(item=>{
          if(this.setting
            && typeof this.setting.minCharLen === 'number'
          ) {
           if(item.value.length < this.setting.minCharLen) flag = true;
          }
          if(this.setting
            && typeof this.setting.maxCharLen === 'number'
          ) {
            if(item.value.length > this.setting.maxCharLen) flag = true;
          }
          if(item.value) value.push(item.value);
          if(!item.value) flag = true;
        });
        if(flag) return [];
        return value;
			},

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


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

<style scoped lang="scss">
	.xd-group-input {
    width: 100%;
    &__item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      :last-child {
        margin-bottom: 0;
      }

      &-input{
        flex: 1;
      }

      &-btn {
        width: 80px;
        flex-shrink: 0;
        margin-left: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        & > i {
          margin: 0 2px;
          font-size: 24px;
          flex-shrink: 0;
          cursor: pointer;
          &.el-icon-remove {
            color: $red;
          }

          &.el-icon-circle-plus {
            color: $blue;
          }

        }
      }
    }

	}

	@media screen and (max-width: 768px) {
		.xd-group-input {
		}
	}
</style>
