<template>
  <div class="preview-group">
    <template v-if="item.label">
      <div class="group-title">{{ item.label }}</div>
      <el-divider></el-divider>
    </template>
    <form-item
      v-for="item in item.list"
      :key="item.id"
      :item="item"
      v-model="data[item.prop]"
    >
      <template #prefix>
        <slot :name="item.prop + ' prefix'"></slot>
      </template>
      <template #suffix>
        <slot :name="item.prop + ' suffix'"></slot>
      </template>
      <template #append>
        <slot :name="item.prop + ' append'"></slot>
      </template>
      <template>
        <slot :name="item.prop"></slot>
      </template>
    </form-item>
    <slot></slot>
  </div>
</template>

<script>
import bsaeItemVue from "./bsae-item.vue";
import FormItem from "./form-item.vue";
export default {
  name: "DilFomrGroup",
  components: { FormItem },
  mixins: [bsaeItemVue],
  props: {
    // 用户添加表单后提交的数据
    data: {
      default() {
        return {};
      }
    }
  },
};
</script>
