<template>
  <el-form
    ref="ruleForm"
    :model="formData"
    class="demo-ruleForm"
    inline
  >
    <el-row>
      <el-col
        v-for="(formItems, index) in formArr"
        v-show="!formItems.notShow"
        :key="index"
        :span="formItems.span"
      >
        <el-form-item
          :label="null"
          :prop="formItems.prop"
          :rules="formItems.rules"
        >
          <FormItem
            v-if="formItems.prop"
            v-model="formData[formItems.prop]"
            :form-items="formItems"
            :form-data="formData"
            @outOperation="(val,num) => outOperation(val, index, formItems.prop,num)"
            @getRequestData="getRequestData(index,formItems.prop)"
          />
        </el-form-item>
      </el-col>
      <slot />
    </el-row>
  </el-form>
</template>

<script>
import FormItem from './formItem.vue';
export default {
  components: {
    FormItem,
  },
  props: {
    formArr: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  watch: {},
  created() {},
  methods: {
    // select 请求接口
    // val返回值，index表单上第几个组件，prop组件名，num一行的组件里的第几个值
    outOperation(val, index, prop, num) {
      this.$emit('outOperation', val, index, prop, num);
    },
    // 提交时验证表单，直接在父级调用
    submitForm() {
      let formValidate = Boolean;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          formValidate = true;
        } else {
          this.$message.warning('请把信息填写完整！');
          formValidate = false;
        }
      });
      return formValidate;
    },
    getRequestData(index, prop) {
      if (prop === 'selectLazyLoading') {
        this.$emit('getRequestData', index, true);
      }
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
form {
  overflow: hidden;
}
::v-deep.el-form-item {
  width: 100%;
  // margin-bottom: 12px;
  margin-bottom: 17px;
}
::v-deep.el-form-item .el-form-item__content {
  width: 100%;
}
</style>
