<template>
  <el-form v-bind="$attrs" v-on="$listeners" :label-width="labelWidth">
    <form-group
      v-for="item in list"
      :key="item.id"
      :item="item"
      :data="value"
    ></form-group>
  </el-form>
</template>

<script>
import formGroup from "./form-group.vue";
import Tool from "./common.js";
export default {
  name: "DilForm",
  components: { formGroup },
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    // 用户输入的值
    value: {
      default() {
        return {};
      }
    },
    // 表单唯一标识
    formId: {
      default: "",
      required: true
    },
    labelWidth: {
      default: "auto"
    }
  },
  data() {
    return {
      list: []
    };
  },
  created() {
    if (this.formId) {
      Tool.getFormData(this.formId, data => (this.list = data));
    } else {
      this.$alert("参数缺失 : formId");
    }
  },
  methods: {
    // 抛出事件
    change(val) {
      this.$emit("change", val);
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.change(val);
      }
    }
  }
};
</script>

<style></style>
