<template>
    <div class="multi-input" :class="{'is-disabled': inputDisabled}">
        <div class="addInput">
            <Button @click="add" v-show="!inputDisabled" v-if="!inputButtonHide">
                <Icon type="plus"/>
            </Button>
        </div>
        <div class="input-item" v-for="(i) in inputValue" :key="i">
            <div class="input">
                <label>
                    <a-input :value="inputValue[i]" ref="userNameInput" :type="inputType || 'text'"
                           @change="change(i)"
                           @input="change(i)"
                           @blur="blur(i, inputValue[i])"
                           :disbaled="inputDisabled">
                    </a-input>
                </label>
                <Icon class="edit" type="edit" @click="zoomInput(i,'click')" v-if="expand"/>
            </div>
            <Button type="danger" class="btn-del"
                    v-if="((i === 0 && inputValue.length > 1) || i > 0) && !inputButtonHide"
                    @click="del(i)">
                <Icon type="minus" v-show="!inputDisabled"/>
            </Button>
        </div>
        <!--扩展显示-->
        <div class="zoom-box">
            <Modal
                    v-model="zoomShow"
                    :footer="null"
                    @ok="zoomShow=false"
            >
                <div class="zoom-title">
                    {{zoomTitle}}
                </div>
                <a-input type="textarea"
                        :autosize="{ minRows: 10 }"
                        placeholder="请输入内容"
                        :value="zoomValue" @change="zoomChange">
                </a-input>
            </Modal>
        </div>
    </div>
</template>

<script>
  import {
    Button, Input, Icon, Modal
  } from 'ant-design-vue';
  import {$isNull} from '@chenxihub/sweet';

  export default {
    name: 'para-multinput',
    components: {
      Button, aInput:Input, Icon, Modal,aInputTextarea:Input.TextArea
    },
    props: [
      'value',
      'expand', // 是否可以展开输入框
      'split', // 分隔符
      'disabled',
      'buttonHide',
      'lineNum', // 可显示行数 -1为自动
      'inputType'
    ],
    data() {
      return {
        inputValue: [],
        zoomTitle: '',
        zoomValue: '',
        zoomShow: false,
        inputDisabled: this.disabled || false,
        inputButtonHide: this.buttonHide || false,
        inputLineNum: this.lineNum || 0
      };
    },
    mounted() {
      if (this.inputLineNum > 0) {
        for (let i = 0; i < this.inputLineNum; i++) {
          if (this.value[i] === undefined) {
            this.inputValue.push('');
          } else {
            this.inputValue.push(this.value[i]);
          }
        }
      } else {
        this.set(this.value);
        this.change();
      }
    },
    methods: {
      add() {
        this.inputValue.push('');
        this.change();
      },
      del(i) {
        this.inputValue.splice(i, 1);
        this.change();
      },
      change(i) {
        let value = this.inputValue;
        if (value.length === 1 && $isNull(value[0])) {
          value = [];
        }
        if (this.split !== undefined && typeof this.split === 'string') {
          value = value.join(this.split);
        }
        if (i !== undefined) {
          this.zoomInput(i);
        }
        this.$emit('input', value);
      },
      blur(i, val) {
        this.$emit('blur', i, val);
      },
      set(data) {
        if ($isNull(data) || (data instanceof Array && data.length === 0)) {
          data = [''];
        }
        if (typeof data === 'string' && this.split !== undefined && typeof this.split === 'string') {
          data = data.split(this.split);
        }
        if (!(data instanceof Array)) {
          data = [data];
        }
        this.inputValue = data;
      },
      zoomInput(i, type) {
        this.zoomTitle = `正在编辑第${i + 1}行`;
        this.zoomItem = i;
        this.zoomValue = this.inputValue[i];
        if (type === 'click') {
          this.zoomShow = true;
        }
      },
      zoomChange(e) {
        const value = e.target.value;
        if (this.zoomItem !== undefined) {
          this.$set(this.inputValue, this.zoomItem, value);
        }
        this.change();
      }
    },
    watch: {
      value(val, old) {
        if (val === old) return;
        this.set(val);
      },
      disabled(val) {
        if (typeof val !== 'boolean') return;
        this.inputDisabled = val;
      },
      buttonHide(val) {
        if (typeof val !== 'boolean') return;
        this.inputButtonHide = val;
      }
    }
  };
</script>
