<template>
  <div class="form-render">
    <el-form ref="formRender" :disabled="disabled" :model="formData" v-bind="bindAttrs(formConfig, 'el-form')">
      <el-row :gutter="config.gutter">
        <el-col v-for="(s, key) in filterUnShowSchema(schema)" :key="key" :span="s.span || 6">
          <el-form-item :prop="key" v-bind="bindAttrs(s, 'el-form-item')" class="full-wrap">
            <el-select
              v-if="s.type == 'el-select'"
              v-model="formData[key]"
              v-bind="s.attrs"
              :placeholder="placeholder(s)"
              v-on="initBindFunction(s.on)"
              @change="value => handleFormDataChange(value, key)"
            >
              <template v-if="formOptions[key]">
                <el-option v-for="(option, i) in formOptions[key]" :key="`${option.value}_${i}`" v-bind="option" />
              </template>
              <template v-for="(slotName, takeSlot) in s.slotRender" v-slot:[takeSlot]>
                <slot :name="slotName" />
              </template>
            </el-select>
            <component
              :is="s.type"
              v-else
              v-model="formData[key]"
              v-bind="s.attrs"
              :placeholder="placeholder(s)"
              :options="formOptions[key]"
              v-on="initBindFunction(s.on)"
              @change="value => handleFormDataChange(value, key)"
              @input="value => handleFormDataChange(value, key)"
            >
              <template v-for="(slotName, takeSlot) in s.slotRender" v-slot:[takeSlot]>
                <slot :name="slotName" />
              </template>
            </component>
          </el-form-item>
        </el-col>
        <div class="operation-wrap">
          <el-form-item label-width="0">
            <slot v-if="!config.hideSearch" name="slot-operation-search">
              <el-button round size="small" plain type="primary" icon="iconfont icon-search" @click="handleSubmit">搜索</el-button>
            </slot>
            <slot v-if="!config.hideReset" name="slot-operation-reset">
              <el-button round size="small" type="info" icon="iconfont icon-clear" @click="handleReset">重置</el-button>
            </slot>
            <slot name="slot-operation-extend" />
          </el-form-item>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import mixin from './mixin'

export default {
  mixins: [mixin]
}
</script>

<style lang="scss">
@import url("./index.scss");
</style>
