<template>
    <div class="table-parent" ref="esTableParent">
        <!-- 头部 -->
        <div
            ref="queryWrapper"
            class="query-wrapper clearfix"
            v-if="
                (esTableObj.queryObj && esTableObj.queryObj.formArr) ||
                    (esTableObj.tableObj.btnArr &&
                        esTableObj.tableObj.btnArr.length)
            "
        >
            <!-- 表单 -->
            <Form
                v-if="esTableObj.queryObj && esTableObj.queryObj.formArr"
                :class="{
                    qryForm: true,
                    w100:
                        btnNewLine ||
                        !(
                            esTableObj.tableObj.btnArr &&
                            esTableObj.tableObj.btnArr.length
                        )
                }"
                ref="qryForm"
                :model="formItem"
                :rules="esTableObj.queryObj.validItem"
                inline
                :label-width="labelWidth"
                :style="{ float: 'left', width: formWidth + 'px' }"
            >
                <FormItem
                    :label="item.name"
                    :prop="item.key"
                    class="esk-form-item"
                    v-for="item in esTableObj.queryObj.formArr"
                    :key="item.key"
                    :style="{
                        display: item.isShow != false ? 'block' : 'none'
                    }"
                >
                    <div
                        v-if="item.type === 0"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <i-input
                            v-model="formItem[item.key]"
                            clearable
                            :icon="item.icon"
                            @on-click="formClickFn(item.key)"
                            @on-change="formChangeFn(item.key)"
                            @on-enter="formEnterFn(item.key)"
                            :placeholder="item.placeholder"
                        />
                    </div>
                    <div
                        v-else-if="item.type === 1"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <Select
                            v-if="item.multiple"
                            v-model="formItem[item.key]"
                            clearable
                            multiple
                            :transfer="true"
                            :filterable="item.filterable ? true : false"
                            @on-change="formChangeFn(item.key, $event)"
                        >
                            <Option
                                v-for="opt in esTableObj.queryObj.dictArr[
                                    item.key
                                ]"
                                :value="opt.key"
                                :key="opt.key"
                                >{{ opt.value }}</Option
                            >
                        </Select>
                        <Select
                            ref="dropSelect"
                            v-if="!item.multiple"
                            v-model="formItem[item.key]"
                            clearable
                            :transfer="true"
                            :filterable="item.filterable ? true : false"
                            @on-change="formChangeFn(item.key)"
                        >
                            <Option
                                v-for="opt in esTableObj.queryObj.dictArr[
                                    item.key
                                ]"
                                :value="opt.key"
                                :key="opt.key"
                                >{{ opt.value }}</Option
                            >
                        </Select>
                    </div>

                    <div
                        v-else-if="item.type === 2"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <RadioGroup
                            v-model="formItem[item.key]"
                            @on-change="formChangeFn(item.key)"
                        >
                            <Radio
                                v-for="opt in esTableObj.queryObj.dictArr[
                                    item.key
                                ]"
                                :label="opt.value"
                                :key="opt.key"
                            ></Radio>
                        </RadioGroup>
                    </div>

                    <div
                        v-else-if="item.type === 3"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <CheckboxGroup
                            v-model="formItem[item.key]"
                            @on-change="formChangeFn(item.key)"
                        >
                            <Checkbox
                                v-for="opt in esTableObj.queryObj.dictArr[
                                    item.key
                                ]"
                                :label="opt.value"
                                :key="opt.key"
                            ></Checkbox>
                        </CheckboxGroup>
                    </div>

                    <div
                        v-else-if="item.type === 4"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <DatePicker
                            v-model="formItem[item.key]"
                            :type="item.dateType"
                            :transfer="true"
                            @on-change="formChangeFn(item.key, $event)"
                        />
                    </div>

                    <div
                        v-else-if="item.type === 5"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <DatePicker
                            format="yyyy-MM-dd"
                            v-model="formItem[item.key]"
                            :disabled="item.disabled"
                            :editable="item.editable || false"
                            :readonly="item.disabled"
                            :transfer="true"
                            type="daterange"
                            @on-change="formChangeFn(item.key, $event)"
                            style="width:100%"
                        />
                    </div>

                    <es-select-search
                        ref="searchSelect"
                        v-else-if="item.type === 6"
                        :queryIfo="item.queryIfo"
                        :baseWidth="
                            item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        "
                        @on-change="formChangeFn(item.key)"
                        @selectData="formItem[item.key] = $event"
                    ></es-select-search>
                    <div
                        v-else-if="item.type === 7"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <i-input v-model="formItem[item.key]">
                            <Select
                                v-model="formItem[item.leftKey]"
                                v-if="item.leftKey"
                                slot="prepend"
                                :placeholder="item.placeholderLeft || ''"
                                @on-change="formChangeFn(item.leftKey, $event)"
                                style="width: 70px;height:28px"
                            >
                                <Option
                                    v-for="opt in esTableObj.queryObj.dictArr[
                                        item.leftKey
                                    ]"
                                    :value="opt.key"
                                    :key="opt.key"
                                    >{{ opt.value }}</Option
                                >
                            </Select>
                            <Select
                                v-model="formItem[item.rightKey]"
                                v-if="item.rightKey"
                                slot="append"
                                :placeholder="item.placeholderRight || ''"
                                @on-change="formChangeFn(item.rightKey, $event)"
                                style="width: 70px;height:28px"
                            >
                                <Option
                                    v-for="opt in esTableObj.queryObj.dictArr[
                                        item.rightKey
                                    ]"
                                    :value="opt.key"
                                    :key="opt.key"
                                    >{{ opt.value }}</Option
                                >
                            </Select>
                        </i-input>
                    </div>
                    <div
                        v-else-if="item.type === 10"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <div style="height:32px"></div>
                    </div>
                    <div
                        v-else-if="item.type == 12"
                        class="text"
                        :style="{
                            width: item.col
                                ? (baseWidth + labelWidth + 20) *
                                      (item.col - 1) +
                                  baseWidth +
                                  'px'
                                : baseWidth + 'px'
                        }"
                    >
                        <div
                            v-text="formItem[item.key] || item.text"
                            :title="formItem[item.key] || item.text"
                        />
                    </div>
                </FormItem>

                <div class="query-btn-innerbox clearfix">
                    <div
                        v-if="
                            esTableObj.queryObj &&
                                esTableObj.queryObj.btnArr &&
                                esTableObj.queryObj.btnArr.length > 0
                        "
                        class="query-btn-inner"
                    >
                        <template
                            v-for="(item, index) in esTableObj.queryObj.btnArr"
                        >
                            <Button
                                :type="item.type"
                                :key="index"
                                :disabled="item.disabled"
                                @click="esTableObjbtnFn(item.id)"
                                >{{ item.name }}</Button
                            >
                        </template>
                    </div>
                    <div
                        v-if="
                            esTableObj.queryObj &&
                                esTableObj.queryObj.btnConcat &&
                                !isShow
                        "
                        class="query-btn-inner"
                    >
                        <Button
                            type="primary"
                            @click="queryFn"
                            :disabled="
                                esTableObj.tableObj.loading ||
                                    esTableObj.queryObj.qryBtnDisabled
                            "
                            >{{
                                esTableObj.tableObj.loading ? '查询中' : '查询'
                            }}</Button
                        >
                        <Button
                            v-if="!esTableObj.queryObj.hideResetBtn"
                            @click="handleReset()"
                            >重置</Button
                        >
                    </div>
                    <div
                        v-show="!isShow && hasAdvanceForm"
                        class="query-btn-inner-txt"
                        @click="showMoreBtnFn()"
                    >
                        展开
                    </div>
                    <div
                        v-show="!isShow && hasAdvanceForm"
                        class="query-btn-inner-flag"
                        @click="showMoreBtnFn()"
                    >
                        ↓
                    </div>
                </div>
            </Form>

            <div class="query-btn-outerbox clearfix" v-if="esTableObj.queryObj">
                <div
                    v-if="
                        esTableObj.queryObj &&
                            esTableObj.queryObj.btnArr &&
                            esTableObj.queryObj.btnArr.length > 0
                    "
                    class="query-btn-inner"
                >
                    <template
                        v-for="(item, index) in esTableObj.queryObj.btnArr"
                    >
                        <Button
                            :type="item.type"
                            :key="index"
                            :disabled="item.disabled"
                            @click="esTableObjbtnFn(item.id)"
                            >{{ item.name }}</Button
                        >
                    </template>
                </div>
                <div
                    v-if="
                        esTableObj.queryObj &&
                            esTableObj.queryObj.btnConcat &&
                            isShow
                    "
                    class="query-btn-inner"
                >
                    <Button
                        type="primary"
                        @click="queryFn"
                        :disabled="
                            esTableObj.tableObj.loading ||
                                esTableObj.queryObj.qryBtnDisabled
                        "
                        >{{
                            esTableObj.tableObj.loading ? '查询中' : '查询'
                        }}</Button
                    >
                    <Button
                        v-if="!esTableObj.queryObj.hideResetBtn"
                        @click="handleReset()"
                        >重置</Button
                    >
                </div>
                <div
                    v-show="isShow && hasAdvanceForm"
                    class="query-btn-inner-txt"
                    @click="showMoreBtnFn()"
                >
                    收起
                </div>
                <div
                    v-show="isShow && hasAdvanceForm"
                    class="query-btn-inner-flag"
                    @click="showMoreBtnFn()"
                >
                    ↑
                </div>
            </div>
            <!-- 表单 end-->
            <!-- 右侧按钮组 -->
            <div
                ref="rightBtnBox"
                :class="{
                    'rightBtnBox clearfix': !btnNewLine,
                    'rightBtnBoxNewLine w100': btnNewLine
                }"
                v-if="
                    esTableObj.tableObj.btnArr &&
                        esTableObj.tableObj.btnArr.length
                "
            >
                <!-- 按钮下拉集合 -->
                <div
                    class="btnGroupContainer"
                    v-if="
                        esTableObj.tableObj.btnArr &&
                            esTableObj.tableObj.btnArr.length
                    "
                >
                    <div
                        class="btnItem"
                        v-for="item in esTableObj.tableObj.btnArr"
                        :key="item.key"
                    >
                        <Button
                            type="primary"
                            v-if="!item.advance"
                            :disabled="item.disabled"
                            @click="btnFn(item.id)"
                            >{{ item.name }}</Button
                        >
                    </div>
                    <Dropdown class="btnGroup" v-if="hasAdvanceBtn">
                        <Button
                            >更多
                            <Icon type="ios-arrow-down"></Icon>
                        </Button>
                        <DropdownMenu
                            slot="list"
                            v-for="item in esTableObj.tableObj.btnArr"
                            :key="item.key"
                        >
                            <DropdownItem
                                v-if="item.advance"
                                :disabled="item.disabled"
                            >
                                <a
                                    class="DropdownItemBtn"
                                    :disabled="item.disabled"
                                    @click="btnFn(item.id)"
                                    >{{ item.name }}</a
                                >
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
                <!-- 按钮下拉集合 end-->
            </div>
            <!-- 右侧按钮组 end-->
        </div>
        <!-- 头部 end-->
        <div class="middle-content-slot">
            <slot name="middleContent" />
        </div>

        <div ref="tableWrapper" class="table-wrapper">
            <div
                class="table-top"
                :class="{
                    'has-title':
                        esTableObj.tableObj.title && esTableObj.tableObj.btnArr
                }"
            >
                <h4 v-if="esTableObj.tableObj.title" class="m-title">
                    {{ esTableObj.tableObj.title }}
                </h4>
                <div
                    :class="{
                        'pull-right': esTableObj.tableObj.title,
                        'text-right': !esTableObj.tableObj.title
                    }"
                ></div>
            </div>
            <Table
                :id="esTableObj.tableObj.id"
                :ref="esTableObj.tableObj.id ? esTableObj.tableObj.id : 'table'"
                border
                :highlight-row="esTableObj.tableObj.selectable"
                :height="tableHeight"
                :width="tableWidth"
                :loading="esTableObj.tableObj.loading"
                :columns="esTableObj.tableObj.columns"
                :data="esTableObj.tableObj.data"
                :row-class-name="rowClassName"
                @on-row-click="rowClick"
                @on-sort-change="sortChange"
                @on-select="rowSelect"
                @on-select-all="rowSelectAll"
                @on-selection-change="rowSelectChange"
                @on-select-cancel="rowCancel"
                @on-select-all-cancel="rowCancelAll"
                @on-current-change="handleChange"
            ></Table>
        </div>
        <div
            ref="tablePager"
            class="table-page"
            v-show="esTableObj.tableObj.pageObj.total > 0"
            v-if="esTableObj.tableObj.pageObj"
        >
            <Page
                v-if="esTableObj.tableObj.simplePage"
                :total="esTableObj.tableObj.pageObj.total"
                simple
                :current="esTableObj.tableObj.pageObj.pageNum"
                :page-size="esTableObj.tableObj.pageObj.pageSize"
                @on-change="changePageNumFn"
                @on-page-size-change="changePageSizeFn"
            ></Page>
            <Page
                v-else
                :total="esTableObj.tableObj.pageObj.total"
                :current="esTableObj.tableObj.pageObj.pageNum"
                :page-size="esTableObj.tableObj.pageObj.pageSize"
                @on-change="changePageNumFn"
                @on-page-size-change="changePageSizeFn"
                :show-total="!esTableObj.tableObj.pageObj.showTotal"
                :show-elevator="esTableObj.tableObj.pageObj.showElevator"
                :show-sizer="esTableObj.tableObj.pageObj.showSizer"
                :page-size-opts="[10, 20, 50, 100, 200, 500]"
            ></Page>
        </div>
        <span id="width_caculator" hidden></span>
    </div>
</template>

<script>
import $ from 'jquery';
/**
 * 一、esTableObj对象
 * 0 title——标题
 * 1 queryObj——查询表单相关设置
 * 1.1 formArr——表单字段，包含name、type（类型字典：0-input、1-select、2-radio、3-checkbox、4-DatePicker、5-daterange、6-selectSearch、12-text文字显示）、key、icon、col（占几列）
 * 1.2 validItem——表单验证，参考iview表单验证
 * 1.4 btnArr——自定义按钮组，当esTableObj.queryObj.btnArr不为undefined时，将使用自定义的table按钮组件，否则使用默认按钮组(查询-充值)
 * 1.5 noResetBtn——是否隐藏重置按钮
 * 1.7 formAdvancedArr——高级查询表单控件数组，和formArr格式一致
 * 1.8 formArrWidth——表单控件宽度
 * 1.9 labelWidth——表单文字宽度
 *
 * 2 tabObj——table组件定义对象
 * 2.1 btnArr——table右上角的按钮组
 * 2.2 loading——table加载动画
 * 2.3 columns——参考iview的table组件的colums数据结构
 * 2.4 selectable——是否支持行选中（高亮），如果有选择列，自动为true
 *
 * 3 data——table组件的数据对象
 *
 * 4 pageObj——分页组件数据对象
 *
 * 5 autoHeight——true：自动高度；false：自适应高度
 *
 * 6 offsetTop——设置table高度偏差，用于调节页面table的自适应高度
 *
 * 7 height——固定高度，如果不设置为自适应高度
 *
 * 8 width——固定宽度，如果不设置为父级div宽度
 *
 * 二、table事件方法
 * 1 [key]ChangeFn——表单控件的change方法  ->formItemChangeFn
 * 2 [key]ClickFn——表单控件的click方法    ->formItemClickFn
 * 3 btnFn——table按钮点击方法             ->tableBtnFn
 * 4 rowChangeFn——table当前行改变时的方法
 * 5 rowClickFn——table行点击事件方法
 * 6 rowSelectFn——table行选中事件方法
 * 7 rowSelectAllFn——table全选方法
 * 8 rowSelectChangeFn——table行选择发生改变的方法
 * 9 queryFn——查询按钮触发方法
 * 10 pageNumChangeFn——页码切换事件方法
 *
 * 三、中间部分自定义
 * 1 通过slot可以在查询条件和table之间的部分插入用户自定义的内容
 *
 */
export default {
    name: 'es-table',
    props: ['esTableObj'],
    data() {
        return {
            formWidth: '100%', // queryForm的
            labelWidth: 105, // queryForm的
            baseWidth: 140, // queryForm的
            tableHeight: 240,
            tableWidth: '100%',
            formItem: {}, // queryForm的
            handleData: [], // queryForm的
            isShow: false, // queryForm的
            dateParams: [],
            hasAdvanceForm: false, // 是否有高级form组件 queryForm的
            hasAdvanceBtn: false, // 是否有下拉按钮组
            originalColumns: [], // 原始列
            emptyColumns: [], // 空数据的列
            btnNewLine: false
        };
    },
    mounted() {
        let ths = this;
        ths.$nextTick(function() {
            // 判断是否有下拉按钮组存在
            ths.checkHasAdvanceBtn();

            ths.setTableHeightWidth();

            // 判断是否有高级form组件存在
            if (ths.esTableObj.queryObj) {
                ths.checkHasAdvanceForm();
                ths.setFormWidth();
            }

            // jquery实现input自动宽度
            $(
                '.ivu-page-simple-pager input, .ivu-page-options-elevator input'
            ).bind('input propertychange change blur', function ResizeInput() {
                console.log(this.value);
                if (!this.value) {
                    this.value = 1;
                }
                $('#width_caculator')
                    .html(this.value)
                    .css('fontSize', $(this).css('fontSize'));
                $(this).width($('#width_caculator').width());
            });
        });

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

        // 用jQuery解决多个table组件时不能都自适应的bug
        $(window).resize(() => {
            let timer = null;

            // 防抖
            clearTimeout(timer);
            timer = setTimeout(() => {
                ths.setTableHeightWidth();
                if (ths.esTableObj.queryObj) {
                    ths.setFormWidth();
                }
            }, 100);
        });

        // 如果有选择列，则表格支持选中行高亮
        if (
            ths.esTableObj.tableObj.columns &&
            ths.esTableObj.tableObj.columns.length > 0
        ) {
            if (
                ths.esTableObj.tableObj.columns[0].type === 'selection' ||
                ths.esTableObj.tableObj.columns[0].title === '选择'
            ) {
                ths.esTableObj.tableObj.selectable = true;
            }
        }
    },
    updated() {
        let ths = this;
        let timer = null;
        // 防抖
        clearTimeout(timer);
        timer = setTimeout(() => {
            ths.setTableHeightWidth();
        }, 100);
        console.log('table updated');
    },
    methods: {
        // 设置表格高度、宽度
        setTableHeightWidth() {
            let ths = this;
            // let parent = ths.esTableObj.parent
            //     ? '.' + ths.esTableObj.parent
            //     : window;
            let parent = ths.esTableObj.parent
                ? '.' + ths.esTableObj.parent
                : ths.$refs.esTableParent.parentNode;

            if (!ths.$refs.tableWrapper) {
                return;
            }

            // let table = ths.$refs[ths.esTableObj.tableObj.id || 'table'];
            // let tableWrapper = ths.$refs.tableWrapper;

            if (ths.esTableObj.tableObj.width) {
                ths.tableWidth = ths.esTableObj.tableObj.width;
            }
            if (ths.esTableObj.tableObj.height) {
                ths.tableHeight = ths.esTableObj.tableObj.height;
                return;
            }

            if (ths.esTableObj.tableObj.autoHeight) {
                ths.tableHeight = null;
                return;
            }

            // let offsetTopInner = table ? table.$el.offsetTop : 0;
            // let pageHeight = ths.$refs['tablePager']
            //     ? ths.$refs['tablePager'].offsetHeight
            //     : 0;
            // let offsetTopOuter = ths.esTableObj.tableObj.offsetTop || 0;
            // let parentHeight = $(parent).height();
            let parentHeight;
            if (parent instanceof HTMLElement) {
                let paddingList = window
                    .getComputedStyle(parent)
                    .padding.split(' ');
                let padding = 0;
                if (paddingList.length === 4) {
                    padding =
                        ths.$common.pixelToNumber(paddingList[0]) +
                        ths.$common.pixelToNumber(paddingList[2]);
                } else if (paddingList.length === 1) {
                    padding = ths.$common.pixelToNumber(paddingList[0]) * 2;
                }
                parentHeight =
                    ths.$common.pixelToNumber(
                        window.getComputedStyle(parent).height
                    ) - padding;
            } else {
                parentHeight = $(parent).height();
            }
            let siblingsOuterHeight = ths.$common.getSiblingsTotalHeight(
                ths.$refs.esTableParent
            );
            let siblingsInnerHeight = ths.$common.getSiblingsTotalHeight(
                ths.$refs.tableWrapper
            );
            // console.log('table siblingsHeight = ' + siblingsHeight);
            // let tempHeight =
            //     parentHeight -
            //     offsetTopInner -
            //     pageHeight -
            //     offsetTopOuter -
            //     50;

            let tempHeight = Math.floor(
                parentHeight - siblingsOuterHeight - siblingsInnerHeight
            );

            // 如果有最小高度值,table的高度值不可以小于最小高度值
            if (ths.esTableObj.tableObj.minHeight) {
                if (tempHeight < ths.esTableObj.tableObj.minHeight) {
                    ths.tableHeight = ths.esTableObj.tableObj.minHeight;
                } else {
                    ths.tableHeight = tempHeight;
                }
            } else {
                // 默认最小高度
                if (tempHeight < 80) {
                    ths.tableHeight = 80;
                } else {
                    ths.tableHeight = tempHeight;
                }
            }

            console.log('tableHeight = ' + ths.tableHeight);
        },
        // 设置form宽度
        setFormWidth() {
            const ths = this;

            if (!ths.esTableObj.queryObj || !ths.$refs.tableWrapper) {
                return;
            }

            // 设置文字的宽度，根据字数计算
            let maxCount = 0;
            let labelWidthArr = [
                0,
                14 + 12,
                14 * 2 + 12,
                14 * 3 + 12,
                14 * 4 + 12,
                14 * 5 + 12,
                14 * 6 + 12,
                14 * 7 + 12
            ];

            ths.esTableObj.queryObj.formArr
                .concat(ths.esTableObj.queryObj.formAdvancedArr || [])
                .forEach(obj => {
                    if (obj.name && obj.name.length > maxCount) {
                        maxCount = obj.name.length;
                        // 判断是否有必输的星号字符
                        if (ths.esTableObj.queryObj.validItem) {
                            let validItem =
                                ths.esTableObj.queryObj.validItem[obj.key];

                            if (
                                validItem &&
                                validItem.length > 0 &&
                                validItem[0].required
                            ) {
                                maxCount += 1;
                            }
                        }
                    }
                });

            ths.labelWidth =
                ths.esTableObj.queryObj.labelWidth || labelWidthArr[maxCount];

            // 计算form可以利用的空间
            let tableWidth = ths.$refs.tableWrapper.offsetWidth;
            // 计算右侧按钮组的宽度
            let rightBtnBoxWidth = ths.$refs.rightBtnBox
                ? ths.$refs.rightBtnBox.offsetWidth
                : 0;
            // 这个是什么宽度？？？
            let gapWidth = ths.esTableObj.queryObj.hideResetBtn ? 5 : 40;

            // 如果操作按钮换行，则不计算宽度
            if (ths.btnNewLine) {
                rightBtnBoxWidth = 0;
            }
            // 计算form的宽度
            ths.formWidth =
                tableWidth -
                rightBtnBoxWidth -
                (rightBtnBoxWidth === 0 ? 0 : gapWidth);

            let col =
                ths.esTableObj.queryObj.col ||
                ths.esTableObj.queryObj.formArr.length + 1;

            // 设置input的宽度,最大宽度不超过180px
            if (ths.esTableObj.queryObj.elementWidth) {
                ths.baseWidth = ths.esTableObj.queryObj.elementWidth;
            } else {
                /* 这段以前的设置了一个最大宽度，现在暂时不需要最大宽度
                // ths.baseWidth = Math.max(
                //     Math.min(ths.formWidth / col - 20 - ths.labelWidth, 180),
                //     40
                // );
                */
                ths.baseWidth = Math.max(
                    ths.formWidth / col - 20 - ths.labelWidth,
                    40
                );
            }
        },
        // 判断是否有高级form组件存在
        checkHasAdvanceForm() {
            let ths = this;
            if (!ths.esTableObj.queryObj) {
                return;
            }
            if (!ths.esTableObj.queryObj.formArr) {
                return;
            }
            let len = ths.esTableObj.queryObj.formArr.length;
            let count = 0;

            if (len > 0) {
                console.log(ths.esTableObj.queryObj.formArr);
                for (let i = 0; i < len; i++) {
                    if (
                        typeof ths.esTableObj.queryObj.formArr[i]['isShow'] !==
                        'undefined'
                    ) {
                        count++;
                    }
                }
                if (count > 0) {
                    ths.hasAdvanceForm = true;
                } else {
                    ths.hasAdvanceForm = false;
                }
            }
        },
        // 判断是否有下拉按钮组存在
        checkHasAdvanceBtn() {
            let ths = this;

            if (!ths.esTableObj.tableObj.btnArr) {
                return;
            }
            let len = ths.esTableObj.tableObj.btnArr.length;
            let count = 0;

            if (len > 0) {
                for (let i = 0; i < len; i++) {
                    if (
                        typeof ths.esTableObj.tableObj.btnArr[i]['advance'] !==
                        'undefined'
                    ) {
                        count++;
                    }
                }
                if (count > 0) {
                    ths.hasAdvanceBtn = true;
                } else {
                    ths.hasAdvanceBtn = false;
                }
            }
        },
        // 设置表单change事件
        formChangeFn(key, event) {
            let ths = this;

            if (event) {
                ths.formItem[key] = event;
            }
            ths.$emit(key + 'ChangeFn', ths.formItem[key]);
        },
        // 设置表单Enter事件
        formEnterFn(key, event) {
            let ths = this;

            if (event) {
                ths.formItem[key] = event;
            }
            ths.$emit(key + 'EnterFn', ths.formItem[key]);
        },
        // 设置表单click事件
        formClickFn(key) {
            let ths = this;

            ths.$emit(key + 'ClickFn', ths.formItem[key]);
        },
        // table btn id---按钮功能类型
        btnFn(id) {
            let ths = this;

            let obj = {};

            obj.id = id;
            obj.handleData = ths.handleData;

            this.$emit('btnFn', obj);
        },
        // 设置查询表单键值
        setValue(key, value) {
            let ths = this;
            let temp = { ...ths.formItem };

            ths.handleReset();
            ths.formItem = { ...temp };
            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]);
            }
        },
        // 表格上面按钮组---按钮功能类型
        esTableObjbtnFn(id) {
            let ths = this;

            ths.$emit('tableFormBtn', id);
        },
        // 当表格的当前行发生变化的时候会触发
        handleChange(current) {
            let ths = this;

            ths.handleData = [];
            ths.handleData.push(current);

            this.$emit('changeFn', current);
        },
        // 单击某一行
        rowClick(row, index) {
            this.$emit('clickFn', row, index);
        },
        // 选中某一行
        rowSelect(selection, row) {
            this.$emit('selectFn', row, selection);
        },
        // 全选
        rowSelectAll(selection) {
            this.$emit('selectAllFn', selection);
        },
        // 选择行发生改变
        rowSelectChange(selection) {
            this.$emit('selectChangeFn', selection);
        },
        rowCancel(selection, row) {
            this.$emit('cancelFn', row, selection);
        },
        rowCancelAll(selection) {
            this.$emit('cancelAllFn', selection);
        },
        sortChange(column, key, order) {
            this.$emit('sortFn', column, key, order);
        },
        // 查询
        queryFn() {
            let ths = this;

            if (ths.esTableObj.queryObj.formArr.length === 0) {
                ths.$emit('inquireFn');
                return;
            }

            ths.$refs.qryForm.validate(valid => {
                if (valid) {
                    // 如果日期清掉了，要移除之前设置的日期参数
                    ths.dateParams.forEach(param => {
                        if (!ths.formItem[param]) {
                            let arrKey = param.split('-');

                            delete ths.formItem[arrKey[0]];
                            delete ths.formItem[arrKey[1]];
                        }
                    });

                    for (let key in ths.formItem) {
                        // 处理日期范围参数
                        if (key.indexOf('-') !== -1) {
                            ths.dateParams.push(key);
                            let arrKey = key.split('-');

                            ths.formItem[key].forEach((val, index) => {
                                if (val) {
                                    ths.formItem[arrKey[index]] =
                                        ths.$moment(val).format('YYYY-MM-DD') +
                                        (index === 1 ? ' 23:59:59.999' : '');
                                }
                            });
                        }

                        ths.esTableObj.queryObj.formArr.forEach(item => {
                            // 处理单选参数
                            if (item.type === 2 && item.key === key) {
                                ths.esTableObj.queryObj.dictArr[key].forEach(
                                    dict => {
                                        if (dict.value === ths.formItem[key]) {
                                            ths.formItem[item.submitKey] =
                                                dict.key;
                                        }
                                    }
                                );
                            }
                            // 处理多选参数
                            if (item.type === 3 && item.key === key) {
                                let params = '';

                                ths.esTableObj.queryObj.dictArr[key].forEach(
                                    dict => {
                                        ths.formItem[key].forEach(el => {
                                            if (dict.value === el) {
                                                params +=
                                                    (params === '' ? '' : ',') +
                                                    dict.key;
                                            }
                                        });
                                    }
                                );

                                ths.formItem[item.submitKey] = params;
                            }
                        });
                    }

                    ths.$emit('inquireFn', ths.formItem);
                }
            });
        },
        // 重置表单
        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.qryForm.resetFields();
            ths.formItem = {};
        },
        // 清空selectSearch,key值代表页面的第几个selectSearch下拉框
        searchSelectReset(key) {
            this.$refs.searchSelect[key].resetFn();
        },
        // 切换页码
        changePageNumFn(pageNum) {
            let ths = this;

            let formItem;

            let pageSize;

            formItem = ths.formItem;
            pageSize = ths.esTableObj.tableObj.pageObj.pageSize;
            ths.esTableObj.tableObj.pageObj.pageNum = pageNum;

            if (ths.esTableObj.tableObj.simplePage) {
                $('.ivu-page-simple-pager input')
                    .val(pageNum)
                    .change();
            } else {
                $('.ivu-page-options-elevator input')
                    .val(pageNum)
                    .change();
            }
            ths.$emit('pageNumFn', pageNum, pageSize, formItem);
            // $('.ivu-page-simple-pager input, .ivu-page-options-elevator input')
        },
        // 切换每页返回的条数数
        changePageSizeFn(pageSize) {
            let ths = this;

            ths.esTableObj.tableObj.pageObj.pageSize = pageSize;

            if (ths.esTableObj.tableObj.pageObj.pageNum === 1) {
                ths.$emit('pageNumFn', 1, pageSize, ths.formItem);
            }
        },
        rowClassName(row, index) {
            let ths = this;

            if (ths.esTableObj.tableObj.rowClassName) {
                return ths.esTableObj.tableObj.rowClassName(row, index);
            }

            return '';
        },
        // 显示/隐藏更多的按钮---展开↓  收起↑
        showMoreBtnFn() {
            let ths = this;
            let len = ths.esTableObj.queryObj.formArr.length;

            ths.isShow = !ths.isShow;

            for (let i = 0; i < len; i++) {
                if (ths.isShow) {
                    if (
                        typeof ths.esTableObj.queryObj.formArr[i]['isShow'] !==
                        'undefined'
                    ) {
                        ths.esTableObj.queryObj.formArr[i]['isShow'] = true;
                        ths.btnNewLine = true;
                    }
                } else {
                    if (
                        typeof ths.esTableObj.queryObj.formArr[i]['isShow'] !==
                        'undefined'
                    ) {
                        ths.esTableObj.queryObj.formArr[i]['isShow'] = false;
                        ths.btnNewLine = false;
                    }
                }
            }
            ths.setFormWidth();
            ths.$nextTick(() => {
                ths.setTableHeightWidth();
            });
        },
        singleSetFocesFn(name) {
            // let ths = this;
            let input = $('.' + name + ' input');

            $(input).focus();
        }
    },
    watch: {
        'esTableObj.tableObj.btnArr': {
            handler(value) {
                this.checkHasAdvanceBtn();
            }
        },
        'esTableObj.tableObj.columns': {
            handler(value) {
                let self = this;
                if (
                    value &&
                    value.length > 0 &&
                    self.emptyColumns.length <= 0
                ) {
                    self.originalColumns = value;
                }
            },
            immediate: true
        },
        'esTableObj.tableObj.data': {
            handler(value) {
                let self = this;
                if (value && value.length > 0) {
                    self.emptyColumns = [];
                    self.esTableObj.tableObj.columns = self.originalColumns;
                } else {
                    self.emptyColumns = [];
                    self.esTableObj.tableObj.columns.forEach(val => {
                        if (!val.fixed) {
                            self.emptyColumns.push(val);
                        }
                    });
                    self.esTableObj.tableObj.columns = self.emptyColumns;
                }
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.m-title {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    color: #666;
    font-weight: normal;
    line-height: 1;
    &::before {
        position: absolute;
        top: 3px;
        left: 0;
        content: '';
        width: 8px;
        height: 8px;
        background: #3b95e9;
    }
}
.table-parent {
    .query-wrapper {
        width: 100%;
        height: 100%;
        min-height: 49px;
        position: relative;
        .rightBtnBoxNewLine {
            position: relative;
            width: 100%;
            button {
                float: right;
                margin-bottom: 14px;
            }
        }
        .rightBtnBox {
            position: absolute;
            bottom: 20px;
            right: 0px;
        }
        .query-btn-innerbox {
            display: block;
            float: left;
            // overflow: hidden;
        }
        .query-btn-outerbox {
            display: block;
            width: 100%;
            overflow: hidden;
            // float: left;
        }
        .query-btn-inner {
            float: left;
            margin-left: 0px;
            margin-bottom: 20px;
        }
        label {
            float: left;
        }
        .query-btn-inner-txt {
            float: left;
            margin-top: 3px;
            line-height: 28px;
            font-size: 12px;
            color: rgb(69, 157, 238);
            text-decoration: underline;
            cursor: pointer;
        }
        .query-btn-inner-flag {
            float: left;
            margin-top: 2px;
            line-height: 28px;
            font-size: 12px;
            color: rgb(69, 157, 238);
            cursor: pointer;
        }
        button {
            margin-right: 8px;
        }
    }
    .table-wrapper {
        width: 100%;
        .table-top {
            .m-title {
                display: inline;
            }
            &.has-title {
                height: 32px;
                line-height: 32px;
            }
        }
    }
    .table-page {
        text-align: right;
        margin-top: 14px;
    }
}
.esk-form-item {
    float: left;
    min-height: 28px;
}
.middle-content-slot {
    div {
        width: 100%;
    }
    width: 100%;
    display: flex;
}
/*按钮组*/
.btnGroupContainer {
    position: relative;
    width: 100%;
    height: 28px;
}
.btnItem {
    float: right;
    margin-left: 8px;

    button {
        margin-right: 0 !important;
    }
}
.btnGroup {
    float: right;
    margin-left: 5px;

    button {
        margin-right: 0 !important;
    }
    .ivu-dropdown-item {
        padding: 0 !important;
    }
    .DropdownItemBtn {
        display: block;
        width: 100%;
        height: auto;
        padding: 7px 16px;
    }
}
</style>

<style>
/*搜索组*/
.query-wrapper .ivu-form-inline .ivu-form-item {
    margin-right: 20px;
}

/*按钮*/
.table-parent .ivu-btn:not(.ivu-btn-small) {
    margin-top: 1px;
    padding: 0 16px;
    line-height: 26px !important;
    border-radius: 1px !important;
    margin-right: 8px;
}
.ivu-input-wrapper .ivu-icon {
    cursor: pointer;
}
/*右侧按钮组*/
.rightBtnBox .ivu-poptip {
    height: 29px;
}
.ivu-dropdown-rel {
    height: 29px;
}
</style>
