<template>
  <div>
    <table
      class="es-table-form"
      border="1"
      cellspacing="0"
      cellpadding="0"
      v-if="content.length"
    >
      <colgroup>
        <template v-for="(item, index) in cols">
          <col :width="labelWidth" :key="'label' + index" />
          <col :width="item" :key="index" />
        </template>
      </colgroup>
      <caption v-if="caption" class="es-table-caption">
        {{
          caption
        }}
      </caption>
      <tbody>
        <tr v-for="(items, indexs) in content" :key="indexs">
          <template v-for="(item, index) in items">
            <td
              v-if="item.type === 'caption'"
              :colspan="col * 2"
              :key="index"
              class="es-table-td-caption"
            >
              <div class="es-table-caption">{{ item.text }}</div>
            </td>
            <td
              v-else-if="item.type === 'table'"
              :colspan="col * 2"
              :key="index"
              class="es-table-form-data"
            >
              <es-data-table-form
                v-if="item.lazy"
                class="es-form-table-data"
                :data="model[item.name]"
                :full="false"
                v-bind="item"
                :readonly="
                  item.readonly !== undefined ? item.readonly : readonly
                "
                @blur="
                  (val, data) => {
                    handleBlur(item, val, data);
                  }
                "
                @focus="
                  (val, data) => {
                    handleFocus(item, val, data);
                  }
                "
                @edit="
                  (val, data) => {
                    handleChange(item, val, data);
                  }
                "
                @btnClick="handleClick"
                @dataChange="handleDataChange"
              >
              </es-data-table-form>
              <es-data-table
                v-else
                class="es-form-item-table"
                ref="dataTable"
                :data="model[item.name]"
                :full="false"
                v-bind="
                  handleExclAttribute({
                    data: item,
                    attrs: ['value', 'events']
                  })
                "
                v-on="item.events"
                :readonly="
                  item.readonly !== undefined ? item.readonly : readonly
                "
                @blur="
                  (val, data) => {
                    handleBlur(item, val, data);
                  }
                "
                @focus="
                  (val, data) => {
                    handleFocus(item, val, data);
                  }
                "
                @edit="
                  (val, data) => {
                    handleChange(item, val, data);
                  }
                "
                @btnClick="handleClick"
                @dataChange="handleDataChange"
              >
              </es-data-table>
            </td>
            <template v-else>
              <td
                v-if="item.label !== false && item.hide !== true"
                class="es-table-form-label"
                :class="{
                  'es-align-middle': item.labelRow,
                  'is-required':
                    item.rules && item.rules.required && !hideRequiredAsterisk,
                  'required-after': after
                }"
                :key="'label' + index"
                :align="item.type === 'label' ? item.align : ''"
                :colspan="
                  item.labelCol
                    ? item.labelCol
                    : item.type === 'label'
                    ? item.colspan
                    : ''
                "
                :rowspan="item.labelRow"
              >
                <es-label
                  v-if="item.showLabel !== false && item.label"
                  v-bind="getLabel(item.label)"
                ></es-label>
              </td>
              <td
                v-if="
                  item.type !== 'label' &&
                  !(item.type === 'empty' && item.labelRow) &&
                  item.hide !== true
                "
                :align="
                  item.type === 'label' || item.type === 'empty'
                    ? item.align
                    : ''
                "
                :class="
                  item.type === 'label' || item.type === 'empty'
                    ? 'es-table-form-label'
                    : item.disabled
                    ? 'es-table-form-item td-disabled'
                    : 'es-table-form-item'
                "
                :key="index"
                :colspan="
                  item.colspan
                    ? item.colspan
                    : item.colspan !== false && items.length < col
                    ? col * 2 - items.length
                    : item.label === false
                    ? 2
                    : ''
                "
                :rowspan="item.rowspan"
              >
                <expand-dom
                  v-if="item.render"
                  :item="item"
                  :model="models"
                  :render="item.render"
                ></expand-dom>
                <template v-else>
                  <es-label
                    v-if="
                      (item.type === 'label' || item.type === 'empty') &&
                      !item.hide
                    "
                    :contents="item.text"
                    v-bind="{
                      event: item.event,
                      events: item.events
                    }"
                  ></es-label>
                  <el-form-item
                    v-else-if="!item.hide"
                    label-width="0"
                    :prop="item.name"
                    :rules="getRules(item)"
                    :class="{
                      'es-form-item-inline': item.inline
                    }"
                  >
                    <es-input-number
                      v-if="item.type == 'number'"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @blur="
                        (event) => {
                          handleBlur(item, event);
                        }
                      "
                      @focus="
                        (event) => {
                          handleFocus(item, event);
                        }
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-input-number>
                    <es-radio-group
                      v-else-if="item.type == 'radio'"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-radio-group>
                    <es-checkbox-group
                      v-else-if="item.type == 'checkbox'"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-checkbox-group>
                    <es-select
                      v-else-if="item.type == 'select'"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @blur="
                        (event) => {
                          handleBlur(item, event);
                        }
                      "
                      @focus="
                        (event) => {
                          handleFocus(item, event);
                        }
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-select>
                    <es-cascader
                      v-else-if="item.type == 'cascader'"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain || item.name === undefined"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @blur="
                        (event) => {
                          handleBlur(item, event);
                        }
                      "
                      @focus="
                        (event) => {
                          handleFocus(item, event);
                        }
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    >
                    </es-cascader>
                    <es-select-ganged
                      v-else-if="
                        item.type == 'ganged' ||
                        (item.type == 'select' && item.ganged)
                      "
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-select-ganged>
                    <es-switch
                      v-else-if="item.type == 'switch'"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-switch>
                    <es-date-picker
                      v-else-if="
                        item.date ||
                        [
                          'date',
                          'year',
                          'month',
                          'date',
                          'dates',
                          'week',
                          'datetime',
                          'datetimerange',
                          'daterange',
                          'monthrange',
                          'quarter',
                          'halfyear'
                        ].includes(item.type)
                      "
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @blur="
                        (event) => {
                          handleBlur(item, event);
                        }
                      "
                      @focus="
                        (event) => {
                          handleFocus(item, event);
                        }
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-date-picker>
                    <es-upload
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: ['value', 'ownId']
                        })
                      "
                      :ownId="item.ownId || models.id"
                      v-model="model[item.name]"
                      v-else-if="
                        item.type == 'attachment' || item.type == 'upload'
                      "
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      :rules="item.rules"
                      btnSize="small"
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                      @getFilesAmount="$emit('getFilesAmount', $event)"
                    ></es-upload>
                    <es-selector
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      v-else-if="item.type == 'selector'"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      :plain="item.plain"
                      v-on="
                        handleExclAttribute({
                          data: item.events,
                          attrs: 'change'
                        })
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-selector>
                    <es-icons
                      v-else-if="item.type === 'icon'"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: ['value']
                        })
                      "
                      v-model="models[item.name]"
                      :plain="item.plain || item.name === undefined"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                    ></es-icons>
                    <component
                      v-else-if="item.type === 'component'"
                      v-model="models[item.name]"
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: ['value', 'label']
                        })
                      "
                      v-on="item.events"
                    ></component>
                    <es-input
                      v-else
                      v-bind="
                        handleExclAttribute({
                          data: item,
                          attrs: 'label'
                        })
                      "
                      v-model="model[item.name]"
                      :plain="item.plain"
                      :readonly="
                        item.readonly !== undefined ? item.readonly : readonly
                      "
                      @blur="
                        (event) => {
                          handleBlur(item, event);
                        }
                      "
                      @focus="
                        (event) => {
                          handleFocus(item, event);
                        }
                      "
                      @change="
                        (val) => {
                          handleChange(item, val);
                        }
                      "
                      @input="
                        (val) => {
                          handleInput(item, val);
                        }
                      "
                      @clear="
                        () => {
                          handleClear(item);
                        }
                      "
                    >
                      <template v-if="item.prefix" slot="prefix">
                        <expand-dom
                          v-if="item.render"
                          :item="item"
                          :model="models"
                          :render="item.render"
                        ></expand-dom>
                      </template>
                      <template v-if="item.suffix" slot="suffix">
                        <expand-dom
                          v-if="item.render"
                          :item="item"
                          :model="models"
                          :render="item.render"
                        ></expand-dom>
                      </template>
                      <template v-if="item.prepend" slot="prepend">
                        <expand-dom
                          v-if="item.render"
                          :item="item"
                          :model="models"
                          :render="item.render"
                        ></expand-dom>
                      </template>
                      <template v-if="item.append" slot="append">
                        <expand-dom
                          v-if="item.render"
                          :item="item"
                          :model="models"
                          :render="item.render"
                        ></expand-dom>
                      </template>
                    </es-input>
                    <template v-if="item.inline">
                      <template v-if="Array.isArray(item.inline)">
                        <template v-for="(inline, k) in item.inline">
                          <es-button
                            v-if="inline.type == 'button' && !inline.hide"
                            class="es-button-inline"
                            :key="k"
                            :disabled="isDisabled || inline.disabled"
                            v-bind="
                              handleExclAttribute({
                                data: inline,
                                attrs: ['disabled', 'type']
                              })
                            "
                            @click="handleClick(inline)"
                          ></es-button>
                          <div
                            v-else-if="!inline.hide"
                            class="es-form-inline es-form-item-inline"
                            :key="k"
                          >
                            <div class="es-range" v-if="inline.range !== false">
                              —
                            </div>
                            <el-form-item
                              label-width="0"
                              :prop="inline.name"
                              :rules="getRules(inline)"
                            >
                              <es-input-number
                                v-if="inline.type == 'number'"
                                v-bind="
                                  handleExclAttribute({
                                    data: inline,
                                    attrs: ['value']
                                  })
                                "
                                v-model="models[inline.name]"
                                :plain="
                                  inline.plain || inline.name === undefined
                                "
                                :readonly="
                                  inline.readonly !== undefined
                                    ? inline.readonly
                                    : item.readonly !== undefined
                                    ? item.readonly
                                    : readonly
                                "
                                @blur="
                                  (event) => {
                                    handleBlur(inline, event);
                                  }
                                "
                                @focus="
                                  (event) => {
                                    handleFocus(inline, event);
                                  }
                                "
                                @change="
                                  (val) => {
                                    handleChange(inline, val);
                                  }
                                "
                              ></es-input-number>
                              <es-select
                                v-else-if="inline.type == 'select'"
                                v-bind="
                                  handleExclAttribute({
                                    data: inline,
                                    attrs: ['value']
                                  })
                                "
                                v-model="models[inline.name]"
                                :plain="
                                  inline.plain || inline.name === undefined
                                "
                                :readonly="
                                  inline.readonly !== undefined
                                    ? inline.readonly
                                    : item.readonly !== undefined
                                    ? item.readonly
                                    : readonly
                                "
                                @blur="
                                  (event) => {
                                    handleBlur(inline, event);
                                  }
                                "
                                @focus="
                                  (event) => {
                                    handleFocus(inline, event);
                                  }
                                "
                                @change="
                                  (val) => {
                                    handleChange(inline, val);
                                  }
                                "
                              ></es-select>
                              <es-cascader
                                v-else-if="inline.type == 'cascader'"
                                v-bind="
                                  handleExclAttribute({
                                    data: inline,
                                    attrs: ['value']
                                  })
                                "
                                v-model="models[inline.name]"
                                :plain="
                                  inline.plain || inline.name === undefined
                                "
                                :readonly="
                                  inline.readonly !== undefined
                                    ? inline.readonly
                                    : item.readonly !== undefined
                                    ? item.readonly
                                    : readonly
                                "
                                @blur="
                                  (event) => {
                                    handleBlur(inline, event);
                                  }
                                "
                                @focus="
                                  (event) => {
                                    handleFocus(inline, event);
                                  }
                                "
                                @change="
                                  (val) => {
                                    handleChange(inline, val);
                                  }
                                "
                              >
                              </es-cascader>
                              <es-date-picker
                                v-else-if="
                                  inline.date ||
                                  [
                                    'date',
                                    'year',
                                    'month',
                                    'date',
                                    'dates',
                                    'week',
                                    'datetime',
                                    'datetimerange',
                                    'daterange',
                                    'monthrange',
                                    'quarter',
                                    'halfyear'
                                  ].includes(inline.type)
                                "
                                v-bind="
                                  handleExclAttribute({
                                    data: inline,
                                    attrs: ['value']
                                  })
                                "
                                v-model="models[inline.name]"
                                :plain="
                                  inline.plain || inline.name === undefined
                                "
                                :readonly="
                                  inline.readonly !== undefined
                                    ? inline.readonly
                                    : item.readonly !== undefined
                                    ? item.readonly
                                    : readonly
                                "
                                @blur="
                                  (event) => {
                                    handleBlur(inline, event);
                                  }
                                "
                                @focus="
                                  (event) => {
                                    handleFocus(inline, event);
                                  }
                                "
                                @change="
                                  (val) => {
                                    handleChange(inline, val);
                                  }
                                "
                              ></es-date-picker>
                              <template
                                v-else-if="
                                  inline.type == 'image' || inline.type == 'img'
                                "
                              >
                                <img
                                  v-if="inline.url || inline.src"
                                  v-bind="
                                    handleExclAttribute({
                                      data: inline,
                                      attrs: ['value']
                                    })
                                  "
                                  height="100%"
                                  :src="inline.url || inline.src"
                                  @click="inline.event"
                                />
                              </template>
                              <es-icons
                                v-else-if="inline.type === 'icon'"
                                v-bind="
                                  handleExclAttribute({
                                    data: inline,
                                    attrs: ['value']
                                  })
                                "
                                v-model="models[inline.name]"
                                :plain="
                                  inline.plain || inline.name === undefined
                                "
                                :readonly="
                                  inline.readonly !== undefined
                                    ? inline.readonly
                                    : item.readonly !== undefined
                                    ? item.readonly
                                    : readonly
                                "
                                @change="
                                  (val) => {
                                    handleChange(inline, val);
                                  }
                                "
                              ></es-icons>
                              <component
                                v-else-if="inline.type === 'component'"
                                v-model="models[inline.name]"
                                v-bind="
                                  handleExclAttribute({
                                    data: inline,
                                    attrs: ['value', 'label']
                                  })
                                "
                                v-on="inline.events"
                              ></component>
                              <es-input
                                v-else
                                v-bind="
                                  handleExclAttribute({
                                    data: inline,
                                    attrs: ['value']
                                  })
                                "
                                v-model="models[inline.name]"
                                :plain="
                                  inline.plain || inline.name === undefined
                                "
                                :readonly="
                                  inline.readonly !== undefined
                                    ? inline.readonly
                                    : item.readonly !== undefined
                                    ? item.readonly
                                    : readonly
                                "
                                @blur="
                                  (event) => {
                                    handleBlur(inline, event);
                                  }
                                "
                                @focus="
                                  (event) => {
                                    handleFocus(inline, event);
                                  }
                                "
                                @input="
                                  (val) => {
                                    handleInput(inline, val);
                                  }
                                "
                                @clear="handleClear(inline)"
                                @change="
                                  (val) => {
                                    handleChange(inline, val);
                                  }
                                "
                              ></es-input>
                            </el-form-item>
                          </div>
                        </template>
                      </template>
                      <template v-else-if="!item.inline.hide">
                        <div
                          class="es-range"
                          v-if="item.inline.range !== false"
                        >
                          —
                        </div>
                        <el-form-item
                          label-width="0"
                          :prop="item.inline.name"
                          :rules="getRules(item.inline)"
                        >
                          <es-input-number
                            v-if="item.inline.type == 'number'"
                            v-bind="item.inline"
                            v-model="models[item.inline.name]"
                            :plain="
                              item.inline.plain ||
                              item.inline.name === undefined
                            "
                            :readonly="
                              item.inline.readonly !== undefined
                                ? item.inline.readonly
                                : item.readonly !== undefined
                                ? item.readonly
                                : readonly
                            "
                            @blur="
                              (event) => {
                                handleBlur(item.inline, event);
                              }
                            "
                            @focus="
                              (event) => {
                                handleFocus(item.inline, event);
                              }
                            "
                            @change="
                              (val) => {
                                handleChange(item.inline, val);
                              }
                            "
                          ></es-input-number>
                          <es-select
                            v-else-if="item.inline.type == 'select'"
                            v-bind="
                              handleExclAttribute({
                                data: item,
                                attrs: 'label'
                              })
                            "
                            v-model="models[item.inline.name]"
                            :plain="
                              item.inline.plain ||
                              item.inline.name === undefined
                            "
                            :readonly="
                              item.inline.readonly !== undefined
                                ? item.inline.readonly
                                : item.readonly !== undefined
                                ? item.readonly
                                : readonly
                            "
                            @blur="
                              (event) => {
                                handleBlur(item.inline, event);
                              }
                            "
                            @focus="
                              (event) => {
                                handleFocus(item.inline, event);
                              }
                            "
                            @change="
                              (val) => {
                                handleChange(item.inline, val);
                              }
                            "
                          ></es-select>
                          <es-cascader
                            v-else-if="item.inline.type == 'cascader'"
                            v-bind="
                              handleExclAttribute({
                                data: item,
                                attrs: 'label'
                              })
                            "
                            v-model="models[item.inline.name]"
                            :plain="
                              item.inline.plain ||
                              item.inline.name === undefined
                            "
                            :readonly="
                              item.inline.readonly !== undefined
                                ? item.inline.readonly
                                : item.readonly !== undefined
                                ? item.readonly
                                : readonly
                            "
                            @blur="
                              (event) => {
                                handleBlur(item.inline, event);
                              }
                            "
                            @focus="
                              (event) => {
                                handleFocus(item.inline, event);
                              }
                            "
                            @change="
                              (val) => {
                                handleChange(item.inline, val);
                              }
                            "
                          >
                          </es-cascader>
                          <es-date-picker
                            v-else-if="
                              item.inline.date ||
                              [
                                'date',
                                'year',
                                'month',
                                'date',
                                'dates',
                                'week',
                                'datetime',
                                'datetimerange',
                                'daterange',
                                'monthrange',
                                'quarter',
                                'halfyear'
                              ].includes(item.inline.type)
                            "
                            v-bind="item.inline"
                            v-model="models[item.inline.name]"
                            :plain="
                              item.inline.plain ||
                              item.inline.name === undefined
                            "
                            :readonly="
                              item.inline.readonly !== undefined
                                ? item.inline.readonly
                                : item.readonly !== undefined
                                ? item.readonly
                                : readonly
                            "
                            @blur="
                              (event) => {
                                handleBlur(item.inline, event);
                              }
                            "
                            @focus="
                              (event) => {
                                handleFocus(item.inline, event);
                              }
                            "
                            @change="
                              (val) => {
                                handleChange(item.inline, val);
                              }
                            "
                          ></es-date-picker>
                          <es-icons
                            v-else-if="item.inline.type === 'icon'"
                            v-bind="
                              handleExclAttribute({
                                data: item.inline,
                                attrs: ['value']
                              })
                            "
                            v-model="models[item.inline.name]"
                            :plain="
                              item.inline.plain ||
                              item.inline.name === undefined
                            "
                            :readonly="
                              item.inline.readonly !== undefined
                                ? item.inline.readonly
                                : item.readonly !== undefined
                                ? item.readonly
                                : readonly
                            "
                            @change="
                              (val) => {
                                handleChange(item.inline, val);
                              }
                            "
                          ></es-icons>
                          <component
                            v-else-if="item.inline.type === 'component'"
                            v-model="models[item.inline.name]"
                            v-bind="
                              handleExclAttribute({
                                data: item.inline,
                                attrs: ['value', 'label']
                              })
                            "
                            v-on="item.inline.events"
                          ></component>
                          <es-input
                            v-else
                            v-bind="item.inline"
                            v-model="models[item.inline.name]"
                            :plain="
                              item.inline.plain ||
                              item.inline.name === undefined
                            "
                            :readonly="
                              item.inline.readonly !== undefined
                                ? item.inline.readonly
                                : item.readonly !== undefined
                                ? item.readonly
                                : readonly
                            "
                            @blur="
                              (event) => {
                                handleBlur(item.inline, event);
                              }
                            "
                            @focus="
                              (event) => {
                                handleFocus(item.inline, event);
                              }
                            "
                            @change="
                              (val) => {
                                handleChange(item.inline, val);
                              }
                            "
                            @input="
                              (val) => {
                                handleInput(item.inline, val);
                              }
                            "
                            @clear="
                              () => {
                                handleClear(item.inline);
                              }
                            "
                          >
                            <template v-if="item.inline.prefix" slot="prefix">
                              <expand-dom
                                v-if="item.inline.render"
                                :item="item"
                                :model="models"
                                :render="item.inline.render"
                              ></expand-dom>
                            </template>
                            <template slot="suffix" v-if="item.inline.suffix">
                              <expand-dom
                                v-if="item.inline.render"
                                :item="item"
                                :model="models"
                                :render="item.inline.render"
                              ></expand-dom>
                            </template>
                            <template v-if="item.inline.prepend" slot="prepend">
                              <expand-dom
                                v-if="item.inline.render"
                                :item="item"
                                :model="models"
                                :render="item.inline.render"
                              ></expand-dom>
                            </template>
                            <template v-if="item.inline.append" slot="append">
                              <expand-dom
                                v-if="item.inline.render"
                                :item="item"
                                :model="models"
                                :render="item.inline.render"
                              ></expand-dom>
                            </template>
                          </es-input>
                        </el-form-item>
                      </template>
                    </template>
                  </el-form-item>
                </template>
              </td>
            </template>
          </template>
        </tr>
      </tbody>
    </table>
    <template v-for="(item, index) in table">
      <es-data-table-form
        v-if="item.lazy"
        :key="index"
        class="es-form-item-table"
        :data="model[item.name]"
        :full="false"
        v-bind="item"
        :readonly="item.readonly !== undefined ? item.readonly : readonly"
        @blur="
          (val, data) => {
            handleBlur(item, val, data);
          }
        "
        @focus="
          (val, data) => {
            handleFocus(item, val, data);
          }
        "
        @edit="
          (val, data) => {
            handleChange(item, val, data);
          }
        "
        @btnClick="handleClick"
        @dataChange="handleDataChange"
      >
      </es-data-table-form>
      <es-data-table
        v-else
        :key="index"
        class="es-form-item-table"
        ref="dataTable"
        :data="model[item.name]"
        :full="false"
        v-bind="
          handleExclAttribute({
            data: item,
            attrs: ['value', 'events']
          })
        "
        v-on="item.events"
        :readonly="item.readonly !== undefined ? item.readonly : readonly"
        @blur="
          (val, data) => {
            handleBlur(item, val, data);
          }
        "
        @focus="
          (val, data) => {
            handleFocus(item, val, data);
          }
        "
        @edit="
          (val, data) => {
            handleChange(item, val, data);
          }
        "
        @btnClick="handleClick"
        @dataChange="handleDataChange"
      >
      </es-data-table>
    </template>
  </div>
</template>
<script>
import rules from 'eoss-ui/src/utils/rules.js';
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'EsTableForm',
  components: {
    expandDom: {
      functional: true,
      props: {
        item: Object,
        model: Object,
        render: [Function, String]
      },
      render: (h, ctx) => {
        if (typeof ctx.props.render == 'string') {
          try {
            return util.toFunction(ctx.props.render)(h, params);
          } catch (error) {
            throw error;
          }
        }
        return ctx.props.render(h, ctx.props.item, ctx.props.model);
      }
    }
  },
  inject: {
    scale: {
      default: ''
    },
    esForm: {
      default: ''
    }
  },
  props: {
    model: {
      type: Object,
      default() {
        return {};
      }
    },
    disabled: Boolean,
    span: Number,
    contents: {
      type: Array,
      default() {
        return [];
      }
    },
    hideRequiredAsterisk: {
      type: Boolean,
      default: false
    },
    after: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: [Number, String],
      default: 120
    },
    readonly: Boolean,
    tableAfter: {
      type: Boolean,
      default: true
    },
    caption: String,
    widths: Array,
    thead: Array,
    zoom: false
  },
  computed: {
    content() {
      let content = [];
      let items = [];
      let n = 0;
      let table = [];
      let formList;
      if (this.tableAfter) {
        formList = this.contents.filter((items) => {
          if (Array.isArray(items)) {
            return items.filter((item) => {
              if (item.type === 'table' && item.after !== false) {
                table.push(item);
              }
              return item.type !== 'table' || item.after === false;
            });
          }
          if (items.type === 'table' && items.after !== false) {
            table.push(items);
          }
          return items.type !== 'table' || items.after === false;
        });
        this.table = table;
      } else {
        formList = this.contents;
      }
      if (Array.isArray(formList[0])) {
        return formList;
      } else {
        const contents = formList.filter((item) => {
          if (!item.hide) {
            return item;
          }
        });
        contents.forEach((item, index) => {
          let i = (index - n) % this.col;
          let cover = false;
          if (i == 0) {
            items = [];
          }
          if (
            (item.colspan && item.colspan > 1) ||
            item.col === 12 ||
            item.col === 0 ||
            item.type === 'table' ||
            item.type === 'caption'
          ) {
            cover = true;
            n++;
          }
          if (cover) {
            if (items.length) {
              content.push(items);
              content.push([item]);
              items = [];
            } else {
              content.push([item]);
            }
          } else {
            if (i < this.col) {
              items.push(item);
            }
            if (i + 1 === this.col) {
              content.push(items);
            }
          }
        });
        return content;
      }
    },
    models: {
      get() {
        return this.model;
      },
      set(val) {
        return val;
      }
    },
    isDisabled() {
      return this.disabled || (this.esForm || {}).disabled;
    }
  },
  watch: {
    scale: {
      deep: true,
      handler(val) {
        this.getWidth();
      }
    },
    zoom: {
      handler(val) {
        this.getWidth();
      }
    }
  },
  data() {
    return {
      col: this.span ? this.span : 2,
      cols: [],
      table: [],
      required: false
    };
  },
  created() {},
  mounted() {
    this.getWidth();
  },
  methods: {
    getLabel(res) {
      return typeof res === 'string'
        ? { contents: res }
        : { ...res, plain: res.plain || res.name === undefined };
    },
    getRules(res) {
      if (res.rules && !res.hide) {
        if (Array.isArray(res.rules)) {
          return res.rules.map((item) => {
            if (item.required) {
              this.required = item.required;
            }
            if (rules[item.type]) {
              return {
                pattern: rules[item.type]['pattern'],
                message: item.message
                  ? item.message
                  : rules[item.type]['message'],
                trigger: item.trigger
                  ? item.trigger
                  : res.fetchSuggestions ||
                    res.url ||
                    (res.data && res.data.length)
                  ? 'change'
                  : 'blur'
              };
            }
            return item;
          });
        }
        if (rules[res.rules.type]) {
          return {
            pattern: rules[res.rules.type]['pattern'],
            message: res.rules.message
              ? res.rules.message
              : rules[res.rules.type]['message'],
            trigger: res.rules.trigger
              ? res.rules.trigger
              : res.fetchSuggestions || res.url || (res.data && res.data.length)
              ? 'change'
              : 'blur'
          };
        }
        if (res.rules.required) {
          this.required = res.rules.required;
        }
        return res.rules;
      }
      return undefined;
    },
    getWidth() {
      this.$nextTick(() => {
        this.nextTickd();
      });
    },
    nextTickd() {
      let widths = [];
      let surplus = 0;
      let divisor = this.col;
      const parentWidth =
        this.$el.clientWidth -
        (parseFloat(this.$el.style.paddingLeft) || 0) -
        (parseFloat(this.$el.style.paddingRight) || 0);
      let getWidth = this.$refs.dataTable
        ? this.$refs.dataTable.$el
          ? this.$refs.dataTable.$el.offsetWidth
          : this.$refs.dataTable[0].$el.offsetWidth
        : parentWidth;
      if (getWidth < parentWidth) {
        getWidth = parentWidth;
      }
      let allWidth = getWidth - parseInt(this.labelWidth, 10) * this.col;
      if (this.widths && this.widths.length === this.col) {
        this.widths.forEach((item) => {
          let num = parseInt(item, 10);
          if (item && num) {
            allWidth -= item ? num : 0;
            divisor--;
          }
        });
      }
      let width = allWidth / divisor;
      if (width - Math.floor(width) > 0) {
        surplus =
          (getWidth - parseInt(this.labelWidth, 10) * this.col) % this.col;
      }
      if (this.col > 1) {
        for (let i = 0; i < this.col; i++) {
          if (this.widths && this.widths[i]) {
            widths.push(parseInt(this.widths[i], 10) + 'px');
          } else if (i < surplus) {
            widths.push(Math.floor(width) + 1 + 'px');
          } else {
            widths.push(Math.floor(width) + 'px');
          }
        }
      } else {
        widths = [''];
      }
      this.cols = widths;
    },
    handleClick(res) {
      if (res.event && typeof res.event === 'function') {
        res.event(res);
      }
      this.$emit('btnClick', res, this.models);
      this.$emit('btn-click', res, this.models);
    },
    handleChange(res, value, data) {
      if (res.events && res.events.change) {
        res.events.change(res, value, data);
      } else {
        this.$emit('change', res, value, data);
      }
    },
    handleInput(res, value, data) {
      this.$emit('input', res, value, data);
    },
    handleFocus(res, value, data) {
      if (res.events && res.events.focus) {
        res.events.focus(res, value, data);
      } else {
        this.$emit('focus', res, value, data);
      }
    },
    handleBlur(res, value, data) {
      if (res.events && res.events.blur) {
        res.events.blur(res, value, data);
      } else {
        this.$emit('blur', res, value, data);
      }
    },
    handleClear(res, value) {
      this.$emit('clear', res, value);
    },
    handleDataChange(res, data) {
      if (res.events && res.events.dataChange) {
        res.events.dataChange(res, value, data);
      } else {
        this.$emit('dataChange', res, data);
        this.$emit('data-change', res, data);
      }
    },
    handleExclAttribute({ data, attrs }) {
      return util.exclAttribute({
        data: data,
        attrs: attrs
      });
    }
  }
};
</script>
