<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,num)"
          />
        </el-form-item>
      </el-col>
    </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: {
    outOperation(val, index, formItems, num) {
      // console.log('val, index, formItems, num', val, index, formItems, num);

      if (formItems.onchange) {
        const changeFn = new Function('value', 'oldValue', formItems.onchange);
        changeFn.call(this, val, index, formItems, num);
      }

      this.$emit('outOperation', val, index, formItems, num);
    },
    // 提交时验证表单，直接在父级调用
    submitForm() {
      let formValidate = Boolean;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          formValidate = true;
        } else {
          this.$message.warning('请把信息填写完整！');
          formValidate = false;
        }
      });
      return formValidate;
    },
    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: 12px;
}
::v-deep.el-form-item .el-form-item__content {
  width: 100%;
}
</style>
