<template>
  <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
  <component :is="rowComponent" class="zee-form__flex-wrap">
    <template v-for="(item, index) in list">
      <!-- 表单项有设置分组时 -->
      <component
        :is="colComponent"
        v-if="item.group && item.list"
        :key="index"
        :span="type === 'div' ? undefined : item.group.span || 24"
        :style="{ width: type === 'div' ? '100%' : undefined }"
        :class="colClassRender(item, index, colClass)"
      >
        <component :is="rowComponent" class="zee-form__flex-wrap" :class="groupClass || 'zee-form__group'">
          <!-- 表单分组标题 -->
          <component :is="rowComponent" :class="titleClass || 'zee-form__group-title'" v-if="item.group.title" style="width: 100%;">
            {{ item.group.title || item.group }}
          </component>
          <!-- 递归本组件 -->
          <z-form-render
            :title-class="titleClass"
            :item-class="itemClass"
            :content-class="contentClass"
            :group-class="groupClass"
            :class="contentClass || 'zee-form__group-content'"
            :list="item.list"
            :value="value"
            :model="itemKey ? model[itemKey] || {} : model"
            :itemKey="item.group.key"
            :type="type"
            @item-change="onItemChange"
            @form-item-change="onFormItemChange"
            @item-update="onItemUpdate"
            :span="type === 'div' ? undefined : span * (24 / (item.group.span || 24))"
          ></z-form-render>
        </component>
      </component>
      <!-- 正常无分组表单项 -->
      <template v-else>
        <component
          :is="colComponent"
          v-if="bindItemVisible(item, 'visible')"
          v-show="bindItemVisible(item, 'show')"
          :span="type === 'div' ? undefined : item.span || span"
          :key="index"
          :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
          :class="colClassRender(item, index, colClass)"
        >
          <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'zee-form__item'">
            <slot v-if="$scopedSlots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model1="value"></slot>
            <template v-else>
              <!-- 自定义组件 -->
              <dynamic-render
                v-if="typeof item.type === 'function'"
                :render="
                  item.type($createElement, {
                    model: value,
                    config: {
                      props: { ...propsFormatter(item.props), value: itemValue(item) },
                      style: item.style || { width: '100%' },
                      on: {
                        ...bindItemEvent(item),
                        input: v => onInput({ value: v, item }),
                      },
                    },
                  })
                "
              ></dynamic-render>
              <component
                v-else
                :is="item.type"
                :value="itemValue(item)"
                @input="v => onInput({ value: v, item })"
                v-on="bindItemEvent(item)"
                v-bind="propsFormatter(item.props)"
                :style="item.style || { width: '100%' }"
              ></component>
            </template>
          </el-form-item>
        </component>
      </template>
    </template>
  </component>
</template>

<script>
import DynamicRender from './dynamic-render';

export default {
  name: 'FormRender',
  components: { DynamicRender },
  props: {
    list: Array,
    model: Object,
    value: Object,
    itemKey: String,
    titleClass: String,
    contentClass: String,
    itemClass: String,
    colClass: [String, Function],
    groupClass: String,
    type: String,
    span: Number,
    params: Object,
  },
  computed: {
    rowComponent() {
      return this.type === 'div' ? 'div' : 'el-row';
    },
    colComponent() {
      return this.type === 'div' ? 'div' : 'el-col';
    },
  },
  methods: {
    /**
     * @description 渲染col class
     * @param {Object} item 表单项配置
     * @param {Object} index 表单项渲染下标
     * @param {Object} colClass 表单项配置
     * @return {String} col class
     */
    colClassRender(item, index, colClass) {
      if (colClass instanceof Function) {
        return colClass(item, index);
      } else {
        return colClass;
      }
    },
    /**
     * @description 根据表单项的key查询该值
     * @param {Object} item 表单项配置
     * @returns {Any} 返回值
     */
    itemValue(item) {
      if (this.itemKey) {
        // 如果存在itemKey，即当前项位于嵌套分组内，查询分组名下对应key的值
        const groupItem = this.model[this.itemKey] || {};
        return groupItem[item.key];
      } else {
        // 否则即意味着不在分组内，直接查询model下对应key的值
        return this.model[item.key];
      }
    },
    /**
     * @description 组件有值输入时的事件
     * @param {Object} data { value => 组件值; item => 表单项配置 }
     */
    onInput({ value, item }) {
      if (this.itemKey) {
        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], [item.key]: value } });
      } else {
        this.$emit('item-change', { [item.key]: value });
      }
      this.$emit('form-item-change', { [item.fullKey]: value });
    },
    /**
     * @description 当表单项有改动时的事件
     * @param {Any} 表单项值
     */
    onItemChange(value) {
      if (this.itemKey) {
        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], ...value } });
      } else {
        this.$emit('item-change', value);
      }
    },
    /**
     * @description 当表单项校验值有改动时的事件
     * @param {Any} 表单项校验值
     */
    onFormItemChange(value) {
      this.$emit('form-item-change', value);
    },
    /**
     * @description 当表单项有手动更新时的事件
     * @param {Any} 表单项值
     */
    onItemUpdate(value) {
      this.$emit('item-update', value);
    },
    /**
     * @description 绑定表单项事件
     * @param {Object} item 表单项配置
     * @returns {Function} 事件函数
     */
    bindItemEvent(item) {
      if (item.on) {
        if (typeof item.on === 'function') {
          return item.on({ model: this.value, update: e => this.$emit('item-update', e) });
        } else {
          return item.on;
        }
      } else {
        return undefined;
      }
    },
    /**
     * @description 绑定表单项显示状态
     * @param {Object} item 表单项配置
     * @param {String} type Vue显示类型，可选值：visible、show
     * @returns {Boolean} 显示状态
     */
    bindItemVisible(item, type) {
      const visible = item[type];
      if (typeof visible === 'function') {
        return visible(this.model, this.params || {});
      }
      return item[type] !== false;
    },
    /**
     * @description 格式化props属性
     * @param {Object|Function} props 属性或属性对象
     * @returns {Object} 格式化的属性
     */
    propsFormatter(props) {
      if (typeof props === 'function') {
        return props(this.model, this.params || {});
      }
      return props || {};
    },
  },
};
</script>