<template>
  <el-form
    ref="formRef"
    class="custom-form"
    :model="model"
    inline
    :rules="rules"
    v-bind="$attrs"
  >
    <div v-for="(row, index) in config" :key="index" class="line">
      <template v-if="Array.isArray(row)">
        <el-row :gutter="20">
          <el-col
            v-for="(rowItem, ind) in row"
            :key="rowItem.label || ind"
            :span="rowItem.span || 24"
          >
            <el-form-item
              :label="rowItem.label"
              :prop="rowItem.prop"
              v-if="rowItem.componentIf ? rowItem.componentIf : true"
            >
              <slot :name="rowItem.prop" />
              <component
                ref="componentRef"
                :style="{ width: '100%' }"
                :is="rowItem.component"
                v-bind="rowItem['componentProps']"
                v-model="model[rowItem.prop]"
                :propName="rowItem.prop"
                @handleChange="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {
    model: Object,
    rules: Object,
    config: Array,
  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {},
  methods: {
    handleChange({ propName, value }) {
      this.model[propName] = value;
      this.$emit("update:model", this.model);
      // this.$emit('handleChange', value)
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
