<script>
import { ref, defineComponent, useAttrs } from 'vue';
import { formConf } from './formConfig';
import Render from './render.vue';
const ElFormItem = defineComponent({
  setup(props) {
    const $attrs = useAttrs();
    const { element } = $attrs;
    return () => {
      if (element.children?.length) {
        return (
          <div class="row-form-box">
            <div class="row-form-title">{element.componentName}</div>
            <div class="row-form-content">
              {element.children?.map((item) => (
                <ElFormItem element={item}></ElFormItem>
              ))}
            </div>
          </div>
        );
      } else {
        return (
          <el-form-item
            label-width={element.labelWidth ? `${element.labelWidth}px` : null}
            label={element.label}
            required={element.required}
          >
            <Render
              key={element.renderKey}
              conf={element}
              onInput={(event) => {
                {
                  element.defaultValue = event;
                }
              }}
            />
          </el-form-item>
        );
      }
    };
  },
});
const PreviewForm = defineComponent({
  props: ['formConfigData'],
  setup(props) {
    return () => (
      <el-from
        size={formConf.size}
        labelPosition={formConf.labelPosition}
        disabled={formConf.disabled}
        labelWidth={formConf.labelWidth + 'px'}
      >
        {props.formConfigData?.map((item) => (
          <ElFormItem element={item}></ElFormItem>
        ))}
      </el-from>
    );
  },
});
export default PreviewForm;
</script>
<style scoped lang="scss">
:deep(.row-form-box) {
  padding-left: 12px;
  .row-form-title {
    height: 32px;
    display: flex;
    align-items: center;
  }
}
</style>
