<template>
    <div class="form-wrapper">
        <Form ref="formView" :model="formItem" inline :rules="formRule">
            <div
                class="formViewItem"
                v-for="(item, index) in formObj.formArr"
                :key="index"
                :style="
                    'min-height:' +
                        (formObj.lineHeight
                            ? formObj.lineHeight + 'px'
                            : '46px') +
                        ';height:' +
                        (formObj.lineHeight
                            ? formObj.lineHeight + 'px'
                            : 'auto') +
                        ';float:left;visibility:' +
                        (item.show === false ? 'hidden' : '')
                "
            >
                <FormItem
                    v-if="item.type != 99 && item.type != 15"
                    :label="!item.isInternal ? item.name : ''"
                    :label-width="item.labelWidth || 105"
                    :prop="item.key"
                    :style="{
                        display: item.display == false ? 'none' : 'block'
                    }"
                >
                    <Input
                        v-if="item.type == 0"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        @on-blur="onBlur(item.key)"
                        @on-keyup.enter="onUp(item.key)"
                        @on-click="onClick(item.key)"
                        :type="item.inputType"
                        :class="
                            item.alignRight
                                ? item.disabled
                                    ? 'eslink_form_rightInputBox ' + item.key
                                    : 'eslink_form_rightPaddingInputBox ' +
                                      item.key
                                : item.key
                        "
                        :maxlength="item.maxlength"
                        :disabled="item.disabled"
                        :clearable="item.disabled ? false : true"
                        :focusIndex="item.focusIndex"
                        :icon="item.icon"
                        :readonly="item.readonly ? item.readonly : false"
                        :placeholder="
                            item.placeholder ? '请输入' + item.name : ''
                        "
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    />
                    <Select
                        v-else-if="item.type == 1"
                        :focusIndex="item.focusIndex"
                        :multiple="item.multiple"
                        :filterable="item.filterable ? true : false"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        :disabled="item.disabled"
                        :transfer="true"
                        :placeholder="
                            item.placeholder ? '请选择' + item.name : ''
                        "
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <Option
                            v-for="itemchild in item.data ||
                                formObj.dictArr[item.key]"
                            :value="itemchild.key"
                            :key="itemchild.key"
                            >{{ itemchild.value }}</Option
                        >
                    </Select>
                    <RadioGroup
                        v-else-if="item.type == 2"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        :disabled="item.disabled"
                        :focusIndex="item.focusIndex"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <div class="inline-block" v-if="!item.default">
                            <Radio
                                :label="itemchild.value"
                                v-for="(itemchild, index) in item.data ||
                                    formObj.dictArr[item.key]"
                                :key="index"
                                :disabled="item.disabled"
                            ></Radio>
                        </div>
                        <div class="inline-block" v-if="item.default">
                            <Radio
                                :label="itemchild.key"
                                v-for="(itemchild, index) in item.data ||
                                    formObj.dictArr[item.key]"
                                :key="index"
                                :disabled="item.disabled"
                            >
                                <span>{{ itemchild.value }}</span>
                            </Radio>
                        </div>
                    </RadioGroup>
                    <CheckboxGroup
                        v-else-if="item.type == 3"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        :disabled="item.disabled"
                        :focusIndex="item.focusIndex"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <Checkbox
                            :label="itemchild.value"
                            v-for="itemchild in item.data ||
                                formObj.dictArr[item.key]"
                            :key="itemchild.value"
                        >
                            <Icon
                                :type="itemchild.icon"
                                v-if="itemchild.icon"
                            ></Icon>
                            <div style="float:right;margin-left:5px;">
                                {{ itemchild.label }}
                            </div>
                        </Checkbox>
                    </CheckboxGroup>
                    <DatePicker
                        v-else-if="item.type == 4"
                        v-model="formItem[item.key]"
                        type="daterange"
                        placement="bottom-end"
                        @on-change="onChange(item.key)"
                        :placeholder="
                            item.placeholder ? '请选择' + item.name : ''
                        "
                        :editable="false"
                        :disabled="item.disabled"
                        :open="item.open"
                        :clearable="item.open"
                        :focusIndex="item.focusIndex"
                        :options="item.options"
                        :format="item.format"
                        :transfer="true"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    />
                    <DatePicker
                        v-else-if="item.type == 5"
                        v-model="formItem[item.key]"
                        :type="item.dateType || 'date'"
                        placement="bottom-end"
                        @on-change="onChange(item.key)"
                        :placeholder="
                            item.placeholder ? '请选择' + item.name : ''
                        "
                        :editable="false"
                        :disabled="item.disabled"
                        :open="item.open"
                        :clearable="item.open"
                        :focusIndex="item.focusIndex"
                        :options="item.options"
                        :format="item.format"
                        :transfer="true"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    />
                    <es-select-search
                        v-else-if="item.type == 6"
                        ref="searchSelect"
                        :queryIfo="item.queryIfo"
                        :disabled="item.disabled"
                        :baseWidth="
                            item.col
                                ? (baseWidth + 115) * (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        "
                        :focusIndex="item.focusIndex"
                        :defaultValue="formItem[item.labelKey]"
                        :defaultKey="formItem[item.key]"
                        :isDefault="item.isDefault"
                        @selectData="formItem[item.key] = $event"
                        @selectData2="
                            selectDataFn((formItem[item.data] = $event))
                        "
                    />
                    <InputNumber
                        v-else-if="item.type == 7"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        @on-blur="onBlur(item.key)"
                        :ref="item.key"
                        :focusIndex="item.focusIndex"
                        :class="
                            item.alignRight
                                ? 'eslink_form_rightInputNumberBox ' + item.key
                                : item.key
                        "
                        :max="item.max"
                        :min="item.min ? item.min : 0"
                        :disabled="item.disabled"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    />
                    <Input
                        v-else-if="item.type == 8"
                        v-model="formItem[item.key]"
                        type="textarea"
                        @on-change="onChange(item.key)"
                        :rows="item.rows || 1"
                        :disabled="item.disabled"
                        :placeholder="
                            item.placeholder ? '请输入' + item.name : ''
                        "
                        :maxlength="item.maxlength"
                        :focusIndex="item.focusIndex"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    />
                    <Cascader
                        v-else-if="item.type == 9"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        :data="item.data || formObj.dictArr[item.key]"
                        :disabled="item.disabled"
                        :focusIndex="item.focusIndex"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    />
                    <Transfer
                        v-else-if="item.type == 10"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        :data="item.data || formObj.dictArr[item.key]"
                        :target-keys="item.targetKeys"
                        :render-format="render"
                        :disabled="item.disabled"
                        :focusIndex="item.focusIndex"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    />
                    <div v-else-if="item.type == 11" class="upload">
                        <Upload
                            action=""
                            :before-upload="handleBeforeUpload(item.key)"
                        >
                            <Button con="ios-cloud-upload-outline"
                                >选择文件</Button
                            >
                        </Upload>
                    </div>
                    <div
                        v-if="item.type == 11 && file !== null"
                        class="showFile"
                    >
                        {{ file.name }}
                    </div>

                    <div
                        v-if="item.type == 12"
                        class="text"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <div
                            v-text="formItem[item.key] || item.text"
                            :title="formItem[item.key] || item.text"
                        />
                    </div>
                    <i-input
                        v-if="item.type === 13"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 10) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                        v-model="formItem[item.key]"
                    >
                        <Select
                            v-model="formItem[item.leftKey]"
                            v-if="item.leftKey"
                            slot="prepend"
                            @on-change="onChange(item.leftKey, $event)"
                            :transfer="true"
                            style="width: 70px;height:28px"
                        >
                            <Option
                                v-for="itemchild in item.data ||
                                    formObj.dictArr[item.leftKey]"
                                :value="itemchild.key"
                                :key="itemchild.key"
                                >{{ itemchild.value }}</Option
                            >
                        </Select>
                        <Select
                            v-model="formItem[item.rightKey]"
                            v-if="item.rightKey"
                            slot="append"
                            @on-change="onChange(item.rightKey, $event)"
                            :transfer="true"
                            style="width: 70px;height:28px"
                        >
                            <Option
                                v-for="itemchild in item.data ||
                                    formObj.dictArr[item.rightKey]"
                                :value="itemchild.key"
                                :key="itemchild.key"
                                >{{ itemchild.value }}</Option
                            >
                        </Select>
                    </i-input>
                    <Checkbox
                        v-if="item.type == 14"
                        :label="item.value"
                        v-model="formItem[item.key]"
                        @on-change="onChange(item.key)"
                        :key="item.checked"
                    >
                        <Icon :type="item.icon" v-if="item.icon"></Icon>
                        <div style="float:right;margin-left:5px;">
                            {{ item.label }}
                        </div>
                    </Checkbox>
                </FormItem>
                <div
                    v-if="item.type == 15"
                    class="second-t titleCom"
                    style="width:100%;"
                >
                    <!-- <my-header
                        :title="item.name"
                        :hasIcon="false"
                    ></my-header> -->
                </div>
                <div v-if="item.type == 99">
                    <div
                        class="text"
                        :style="{
                            'min-height': formObj.lineHeight || 46 + 'px',
                            width: baseWidth + labelWidth + 10 + 'px'
                        }"
                        v-for="col in item.col || 1"
                        :key="col"
                    ></div>
                </div>
            </div>
            <div
                v-if="formObj.btnStyle"
                :class="
                    !formObj.btnAlign
                        ? 'pull-right'
                        : 'pull-' + formObj.btnAlign
                "
            >
                <Button
                    v-for="item in formObj.btnArr"
                    :type="item.type"
                    :key="item.name"
                    :disabled="item.disabled"
                    :ref="item.ref"
                    :focusIndex="item.focusIndex"
                    class="form_btn_form"
                    :style="{
                        display:
                            !item.display || item.display != 'none'
                                ? 'inline-block'
                                : 'none'
                    }"
                    @click="btnFn(item.fnType)"
                    >{{ item.name }}</Button
                >
            </div>
        </Form>
        <div
            v-if="formObj.btnStyle"
            :class="
                !formObj.btnAlign ? 'pull-right' : 'pull-' + formObj.btnAlign
            "
        >
            <Button
                v-for="item in formObj.btnArr"
                :type="item.type"
                :key="item.name"
                :disabled="item.disabled"
                :ref="item.ref"
                :focusIndex="item.focusIndex"
                class="form_btn"
                :style="{
                    display:
                        !item.display || item.display != 'none'
                            ? 'inline-block'
                            : 'none'
                }"
                @click="btnFn(item.fnType)"
                >{{ item.name }}</Button
            >
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
/**
 * 一、formObj对象参数
 * 1 formArr——表单项数组
 * 1.1 name——表单项 字段名称
 * 1.2 type——表单项类型：0-input、1-select、2-radio、3-checkbox、4-datepicker、5-daterange、6-selectSearch、7-inputNumber、8-textarea、9-cascader、10-transfer、11-upload、12-text、13-组合input(左右select) 14-单独的checkbox(用于勾选使用) 15-标题 99-占位(col：占几个位子)
 * 1.3 display——表单项是否完全隐藏（不占位），默认为true不隐藏，如果希望完全隐藏某个组件，设置display: false
 * 1.4 show——表单项是否隐藏（仍然占位），默认为true不隐藏，如果希望隐藏某个组件，设置show: false
 * 1.5 disabled——表单项是否禁用
 * 1.6 maxlength——表单项的最大输入长度
 * 1.7 readonly——表单项是否只读
 * 1.8 focusIndex——表单项回车获取焦点的顺序
 * 1.9 value——默认值
 *
 * 2 formArrWidth——表单项元素宽度
 * 3 labelWidth——表单项文本宽度
 * 4 ruleArr——表单验证规则数组，参考iview的form组件表单验证规则写法
 * 5 col——表单列数，用于表单项宽度自适应
 * 6 parent——表单的父级div，需传入一个父盒子class的名字，当页面有多个form表单存在的时候，如果其中一个form表单被隐藏，col计算将会不正确，因为隐藏的form表单没有宽度值，所以传入父级的类名可以让所有的form表单使用统一的宽度值进行适配计算
 * 7 lineHeight——表单元素的行高，默认46px
 * 8 btnArr——表单按钮组
 * 8.1 display-——按钮是否隐藏，默认显示（不设置该属性），如果需要隐藏按钮，可以给单个按钮增加display:'none'的属性
 * 9 btnAlign——底部按钮位置：left-左对齐、center-居中、right-右对齐(默认)
 * 10 btnStyle——底部按钮样式：控制form底部按钮是独占一行显示还是紧接着form表单显示，默认独占一行，设为1或true，则紧随表单项
 *
 * 一、form组件事件
 * 1 change事件、keyup-enter事件、on-blur事件
 *
 * 三、注意事项
 * 1 .form-wrapper的父级的width必须是100%,否则form表单的自适应会无法适配，将会计算错误
 * 2 form组件具备ref的DOM操作功能，可以方便的操作组件内的DOM元素
 */

export default {
    name: 'es-form',
    props: ['formObj'],
    data() {
        return {
            formItem: {},
            // formRule: {},
            labelWidth: 105,
            baseWidth: 180,
            file: null,
            formData: null,
            inputArr: [], // 保存input组件，用于设置focus流程
            test: {}
        };
    },
    created() {
        const ths = this;

        // 绑定属性，并设置默认值
        ths.formObj.formArr.forEach((el, idx) => {
            ths.$set(ths.formItem, el.key, el.value);
        });

        if (ths.formObj.formArrWidth) {
            ths.baseWidth = ths.formObj.formArrWidth;
        }
        if (ths.formObj.labelWidth) {
            ths.labelWidth = ths.formObj.labelWidth;
        }

        // ths.formRule = ths.formObj.ruleArr;
    },
    updated() {
        console.log('form updated');
    },
    mounted() {
        const ths = this;

        ths.$nextTick(function() {
            // 设置标题组件的父级的宽度
            $('.titleCom')
                .parent()
                .css('width', '100%');
            $('.titleCom')
                .parent()
                .css('line-height', 0);
            $('.titleCom')
                .parent()
                .css('height', 28);

            // 固定列数的表单自适应计算
            if (ths.formObj.col) {
                ths.setBaseWidth();

                $(window).resize(() => {
                    ths.setBaseWidth();
                });
            }

            // 设置表单焦点数组
            ths.getInputArr();
        });

        // 处理表单元素自定义字体样式
        ths.formObj.formArr.forEach((el, idx) => {
            // 获取Input
            let input = $('.' + el.key + ' input');

            if (el.fontColor) {
                $(input).css('color', el.fontColor);
            }
            if (el.fontWeigth) {
                $(input).css('font-weight', el.fontWeigth);
            }
            if (el.fontSize) {
                $(input).css('font-size', el.fontSize);
            }
        });

        this.$emit('formInitFn');
    },
    methods: {
        // 获取refs数组,input事件触发
        getInputArr() {
            let ths = this;
            let arr = [];
            // let count = 0;

            // 先处理表单元素
            ths.formObj.formArr.forEach((el, idx) => {
                // 获取Input
                let input = $('.' + el.key + ' input');
                let focusIndex = el.focusIndex;

                if (focusIndex >= 0) {
                    // 将input标签放入数组内
                    $(input).addClass(String(focusIndex));
                    arr[focusIndex] = input[0];
                }
            });

            // 再处理底部按钮
            if (ths.formObj.btnArr && ths.formObj.btnArr.length > 0) {
                ths.formObj.btnArr.forEach((el, idx) => {
                    let focusIndex = el.focusIndex;
                    let btn = $('.form_btn')[idx];

                    if (focusIndex >= 0) {
                        // 设置按钮焦点颜色
                        $(btn).addClass('btnFocus ' + focusIndex);
                        arr[focusIndex] = btn;
                    }
                });
            }

            if (arr.length > 0) {
                ths.inputEventFn(arr);
                // 将input数组保存起来供父级调用
                ths.inputArr = arr;
            }
        },
        // 监听input数组的回车事件
        inputEventFn(arr) {
            // let ths = this;
            // let count = 0;

            $(arr[0]).focus();

            // 监听键盘事件，下一步动作
            $(arr).on('keyup', function(e) {
                if (e.keyCode === 13) {
                    let classArr = e.target.className.split(' ');
                    let num = classArr[classArr.length - 1];

                    num++;
                    if (num <= arr.length - 1) {
                        // 如果当前按钮或者输入框禁用时，跳过该项
                        if ($(arr[num])[0].disabled) {
                            num++;
                        }
                        $(arr[num]).focus();
                    }
                }
            });
        },
        // 设置焦点事件
        setFocus(index) {
            if (this.inputArr.length > 0) {
                this.inputArr[index].focus();
            }
        },
        setBaseWidth() {
            const ths = this;
            let parent = ths.formObj.parent
                ? '.' + ths.formObj.parent
                : '.form-wrapper';
            let mwidth = $(parent).width();

            ths.baseWidth = mwidth / ths.formObj.col - 14 - ths.labelWidth;
        },
        render(item) {
            return item.key + ':' + item.label;
        },
        onClick(targetKey) {
            this.$emit('formItemClickFn', targetKey);
        },
        onChange(targetKey) {
            let ths = this;

            ths.formObj.formArr.forEach(function(item, index, array) {
                if (item.key === targetKey) {
                    // 数字类型输入框
                    if (item.type === 7) {
                        let value = ths.formItem[targetKey];
                        let s = String(value);
                        let point = -1;

                        if (isNaN(value)) {
                            setTimeout(() => {
                                ths.formItem[targetKey] = 0;
                            }, 200);
                        }

                        // 判断是否有小数点
                        point = s.indexOf('.');

                        // 判断是否有负数
                        if (Number(s) < 0) {
                            s = Math.abs(s);
                            ths.formItem[targetKey] = s;
                        }

                        // 判断需要输入的是整数还是2位小数,intType:true
                        if (item.intType) {
                            if (point > 0) {
                                let n = parseInt(s, 10);

                                setTimeout(() => {
                                    ths.formItem[targetKey] = n;
                                }, 200);
                            }
                        } else {
                            // 如果发现有小数点
                            if (point > 0) {
                                s =
                                    s.substring(0, point) +
                                    s.substring(point, point + 3);
                                if (s.substring(point).length > 2) {
                                    setTimeout(() => {
                                        ths.formItem[targetKey] = Number(s);
                                    }, 200);
                                }
                            }
                        }
                    }
                }
            });

            this.$emit(
                'formItemChangeFn',
                targetKey,
                this.formItem[targetKey],
                this.formItem
            );
        },
        onUp(targetKey) {
            this.$emit('formItemUpFn', targetKey, this.formItem[targetKey]);
        },
        onBlur(targetKey) {
            this.$emit('formItemBlurFn', targetKey, this.formItem[targetKey]);
        },
        selectDataFn(targetKey) {
            this.$emit('selectData', targetKey);
        },
        btnFn(fnType) {
            let ths = this;

            let obj = {};

            obj.fnType = fnType;
            obj.formItem = ths.formItem;
            obj.formData = ths.formData;
            obj.formData &&
                Object.keys(obj.formItem).forEach(item => {
                    obj.formData.set(item, obj.formItem[item]);
                });
            obj.formView = ths.$refs.formView;

            this.$emit('btnFn', obj);
        },
        handleBeforeUpload(key) {
            let ths = this;

            return function(file) {
                ths.formData = new FormData();
                ths.formData.set(key, file);
                ths.file = file;
                return false;
            };
        },
        // 设置表单元素值
        setValue(key, value) {
            let ths = this;
            let temp = { ...ths.formItem };

            // ths.handleReset();
            ths.formItem = { ...temp };

            ths.formItem[key] = value;
            ths.$set(ths.formItem, key, value);
        },
        // 批量设置表单元素值
        setValues(obj) {
            let ths = this;
            let temp = { ...ths.formItem };

            // ths.handleReset();
            ths.formItem = { ...temp };

            for (let key in obj) {
                ths.formItem[key] = obj[key];
                ths.$set(ths.formItem, key, obj[key]);
            }
        },
        // 给form表单赋值并且设置表单的类型格式
        setFormate(data, refs) {
            let ths = this;

            ths.formItem = { ...data };

            ths.formObj.formArr.forEach((el, idx) => {
                if (el.itype === 'string') {
                    // 如果没有值的话就会出现undefined
                    if (!ths.formItem[el.key] && ths.formItem[el.key] !== 0) {
                        ths.formItem[el.key] = '';
                    } else {
                        if (el.type === 6) {
                            refs.setValue(el.labelKey, '');
                            setTimeout(() => {
                                refs.setValue(el.labelKey, data[el.labelKey]);
                            }, 100);
                        }
                        ths.formItem[el.key] = String(data[el.key]);
                    }
                } else if (el.itype === 'number') {
                    // 如果没有值的话就会出现NAN
                    if (!ths.formItem[el.key]) {
                        ths.formItem[el.key] = 0;
                    } else {
                        ths.formItem[el.key] = Number(data[el.key]);
                    }
                }
            });
        },
        // 重置表单
        handleReset() {
            let ths = this;

            // 清空搜索下拉
            if (ths.$refs.searchSelect) {
                for (let i = 0; i < ths.$refs.searchSelect.length; i++) {
                    ths.$refs.searchSelect[i].resetFn();
                }
            }

            // 清空普通下拉
            if (ths.$refs.dropSelect) {
                for (let i = 0; i < ths.$refs.dropSelect.length; i++) {
                    ths.$refs.dropSelect[i].clearSingleSelect();
                }
            }

            // 重置表单
            ths.$refs.formView.resetFields();
            // 防止切换“新增/编辑”时属性污染
            ths.formItem = {};
        },
        // 只清空类型为6的值
        handleType6Reset(key) {
            let ths = this;

            // 清空搜索下拉
            if (ths.$refs.searchSelect) {
                for (let i = 0; i < ths.$refs.searchSelect.length; i++) {
                    // 如果key值和queryIfo.keywords一样
                    if (ths.$refs.searchSelect[i].queryIfo.keywords === key) {
                        ths.$refs.searchSelect[i].resetFn();
                    }
                }
            }
        },
        // 可以操作组件的值，form-要操作的form对象、name-key值、fun-回调函数
        operationArrFn(form, name, fun) {
            form.formArr.forEach(function(value, index, array) {
                if (value.key === name) {
                    return fun(array[index]);
                }
            });
        },
        // 批量操作组件的值,form-要操作的form对象、names-key值数组、fun-回调函数
        operationArrsFn(form, names, fun) {
            let arr = [];

            for (let i = 0; i < names.length; i++) {
                form.formArr.forEach(function(value, index, array) {
                    if (value.key === names[i]) {
                        arr.push(array[index]);
                    }
                });
            }
            return fun(arr);
        },
        // 可以操作组件的值，refs-ref对象，form-要操作的form对象、name-key值,attribute-要修改的属性值,newValue-传入的值
        newoperationArrFn(refs, form, name, attribute, newValue) {
            form.formArr.forEach(function(value, index, array) {
                if (value.key === name) {
                    array[index][attribute] = newValue;
                }
            });
        },
        // 可以批量操作组件的值，refs-ref对象，form-要操作的form对象、objs-特殊的键值对对象，可以参考IC卡充值页面
        newoperationArrsFn(refs, form, objs) {
            // let arrName = [];
            // let arrAttributeName = [];
            // let arrAttributeValue = [];

            for (var i in objs) {
                for (let j in objs[i]) {
                    for (var m = 0; m < form.formArr.length; m++) {
                        if (form.formArr[m].key === i) {
                            form.formArr[m][j] = objs[i][j];
                            console.log(j + '   ' + objs[i][j]);
                        }
                    }
                }
            }
        },
        // 只能单次为输入框设置焦点事件
        singleSetFocesFn(name) {
            // let ths = this;
            let input = $('.' + name + ' input');

            $(input).focus();
        }
    },
    computed: {
        formRule: {
            get() {
                return this.formObj.ruleArr;
            },
            set() {}
        }
    }
};
</script>

<style lang="scss">
.eslink_form_rightInputBox input {
    text-align: right !important;
}
.eslink_form_rightPaddingInputBox input {
    text-align: right !important;
    padding-right: 30px;
}
.eslink_form_rightInputNumberBox input {
    text-align: right !important;
    padding-right: 30px;
}
.eslink_form_rightInputNumberBox .ivu-input-number-handler-wrap {
    opacity: 1;
}
.form_btn {
    margin-right: 14px;
    width: 80px;
}
.form_btn_form {
    float: left;
    margin-right: 14px;
    width: 80px;
}
</style>
<style lang="scss" scoped>
.upload {
    float: left;
}
.text {
    float: left;
    text-align: justify;
    div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 13px;
    }
}
.showFile {
    float: left;
    margin-left: 20px;
    margin-top: 5px;
}
.btnFocus:focus {
    background: #ff873b;
    border-color: #ff873b;
}

.inline-block {
    display: inline-block;
}
</style>
