<template>
  <div>
    <div v-for="(item, index) in list" :key="'renderForm' + index" :style="item.outerStyleExtra">
      <div :style="divisionStyleExtra" v-if="border && index !== 0" class="division"></div>
      <component
        :labelPosition="labelPosition"
        v-model="value[item.prop]"
        :is="componentDict[item.type]"
        v-bind="item"
        v-on="item['event']"
        v-if="!item.slot"
      />
      <slot :name="item.slot" />
    </div>
  </div>
</template>

<script>
/*
 * @Author: yangxin
 * @Date: 2021-10-18 17:48:29
 * @Last Modified by: yangxin
 * @Last Modified time: 2021-10-25 15:35:22
 */
import WlColorSelect from "./components/WlColorSelect/index.vue";
import WlInput from "./components/WlInput/index.vue";
import WlPicSelect from "./components/WlPicSelect/index.vue";
import WlSelect from "./components/WlSelect/index.vue";
import WlSelectInput from "./components/WlSelectInput/index.vue";
const componentDict = {
  "color-select": "WlColorSelect",
  select: "WlSelect",
  "pic-select": "WlPicSelect",
  input: "WlInput",
  "select-input": "WlSelectInput"
};
export default {
  name: "WlRenderForm",
  components: { WlColorSelect, WlSelect, WlPicSelect, WlInput, WlSelectInput },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => {},
    },
    labelPosition: {
      type: String,
      default: "top",
    },
    border: {
      type: Boolean,
      default: true,
    },
    divisionStyleExtra: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      componentDict: componentDict,
    };
  },
};
</script>
<style lang="scss" scoped>
.division {
  height: j(1);
  transform: scaleY(0.5);
  background-color: #eeeeee;
  margin: 0 16px;
}
</style>
