<template>
  <div class="form-render">
    <el-form ref="formRender" :disabled="disabled" :model="formData" v-bind="bindAttrs({ inline: true, ...formConfig }, 'el-form')">
      <el-form-item v-for="(s, key) in filterUnShowSchema(schema)" :key="key" :prop="key" :class="s.firstRow ? '' : 'mar-t-16'" v-bind="bindAttrs(s, 'el-form-item')">
        {{ s.firstRow }}
        <!-- 下拉选择需要单独拎出来，他的选项再el-option中 -->
        <el-select
          v-if="formType[key] == '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 in formOptions[key]" :key="option.value" v-bind="option" />
          </template>
          <template v-for="(slotName, takeSlot) in s.slotRender" v-slot:[takeSlot]>
            <slot :name="slotName" />
          </template>
        </el-select>
        <!-- 渲染除el-select的其他任意组件，包括原生，element组件以及自定义组件 -->
        <component
          :is="formType[key]"
          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-form-item v-if="showOperation" 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>
    </el-form>
  </div>
</template>

<script>
import mixin from './mixin'

export default {
  mixins: [mixin],
  computed: {
    showOperation() {
      const slots = ['slot-operation-search', 'slot-operation-reset', 'slot-operation-extend']
      const show = slots.some(name => {
        return this.$slots[`${name}`]
      })
      return show
    }
  }
}
</script>

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