import formBuilderMap from "./formBuilderMap";
import { CreateElement, VNode } from "vue";
import moment from "moment";
import { getToken } from "@/utils/auth";
import { deepCopy } from "@/utils/index";
/**
 * @param {String} device 'desktop' or 'mobile'
 * @param {Object} info field参数
 * @param {CreateElement} h
 * @param {Object} row 子表单的row
 * @param {Boolean} pWrite 主表单中子表单字段是否可写
 * @param {Boolean} pReadable
 * @return {VNode} 主表单包含el-form-item 子表单表单组件
 **/
export default function formBuilder(device, info, h, row, pWrite = false,pReadable = false) {
  let formItem;
  //下拉选项
  if (info?.selection_model) {
    options = info.selection_model_items;
  } else if (info?.stub) {
    options = info?.stub?.split(/\n/) || [];
  }
  let options;
  if (device === "desktop") {
    //  可写并且不为查看和子表单下
    if (
      info._writeable ||
      (info.type === "relation" && info._readable) ||
      pWrite
    ) {
      switch (info.type) {
        case "text":
          formItem = h(formBuilderMap(device).get(info.type), {
            props: {
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
            },
            attrs: {
              placeholder: info.help_text,
            },
            on: {
              input: (e) => {
                row
                  ? this.$set(row, info.name, e)
                  : this.$set(this.form, info.name, e);
              },
            },
          });
          break;
        case "textarea":
          formItem = h(formBuilderMap(device).get(info.type), {
            props: {
              type: "textarea",
              autosize: {
                minRows: 2,
              },
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
            },
            attrs: {
              placeholder: info.help_text,
            },
            on: {
              input: (e) => {
                row
                  ? this.$set(row, info.name, e)
                  : this.$set(this.form, info.name, e);
              },
            },
          });
          break;
        case "date":
          formItem = h(formBuilderMap(device).get(info.type), {
            props: {
              type: "date",
              "value-format": "yyyy-MM-dd",
              format: "yyyy年MM月dd日",
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
              "picker-options": {
                shortcuts: [
                  {
                    text: "一年前",
                    onClick(picker) {
                      picker.$emit(
                        "pick",
                        moment().subtract(1, "years").toDate()
                      );
                    },
                  },
                  {
                    text: "一月前",
                    onClick(picker) {
                      picker.$emit(
                        "pick",
                        moment().subtract(1, "months").toDate()
                      );
                    },
                  },
                  {
                    text: "一周前",
                    onClick(picker) {
                      picker.$emit(
                        "pick",
                        moment().subtract(1, "weeks").toDate()
                      );
                    },
                  },
                  {
                    text: "今天",
                    onClick(picker) {
                      picker.$emit("pick", new Date());
                    },
                  },
                  {
                    text: "一周后",
                    onClick(picker) {
                      picker.$emit("pick", moment().add(1, "weeks").toDate());
                    },
                  },
                  {
                    text: "一月后",
                    onClick(picker) {
                      picker.$emit("pick", moment().add(1, "months").toDate());
                    },
                  },
                  {
                    text: "一年后",
                    onClick(picker) {
                      picker.$emit("pick", moment().add(1, "years").toDate());
                    },
                  },
                ],
              },
            },
            attrs: {
              placeholder: info.help_text,
            },
            style: {
              width: "100%",
            },
            on: {
              input: (e) => {
                row
                  ? this.$set(row, info.name, e)
                  : this.$set(this.form, info.name, e);
              },
            },
          });
          break;
        case "datetime":
          formItem = h(formBuilderMap(device).get(info.type), {
            props: {
              type: "datetime",
              "value-format": "yyyy-MM-dd",
              format: "yyyy年MM月dd日",
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
              "picker-options": {
                shortcuts: [
                  {
                    text: "一年前",
                    onClick(picker) {
                      picker.$emit(
                        "pick",
                        moment().subtract(1, "years").toDate()
                      );
                    },
                  },
                  {
                    text: "一月前",
                    onClick(picker) {
                      picker.$emit(
                        "pick",
                        moment().subtract(1, "months").toDate()
                      );
                    },
                  },
                  {
                    text: "一周前",
                    onClick(picker) {
                      picker.$emit(
                        "pick",
                        moment().subtract(1, "weeks").toDate()
                      );
                    },
                  },
                  {
                    text: "今天",
                    onClick(picker) {
                      picker.$emit("pick", new Date());
                    },
                  },
                  {
                    text: "一周后",
                    onClick(picker) {
                      picker.$emit("pick", moment().add(1, "weeks").toDate());
                    },
                  },
                  {
                    text: "一月后",
                    onClick(picker) {
                      picker.$emit("pick", moment().add(1, "months").toDate());
                    },
                  },
                  {
                    text: "一年后",
                    onClick(picker) {
                      picker.$emit("pick", moment().add(1, "years").toDate());
                    },
                  },
                ],
              },
            },
            style: {
              width: "100%",
            },
            attrs: {
              placeholder: info.help_text,
            },
            on: {
              input: (e) => {
                row
                  ? this.$set(row, info.name, e)
                  : this.$set(this.form, info.name, e);
              },
            },
          });
          break;
        case "select":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                value: row ? row[info.name] : this.form[info.name],
                clearable: true,
                placeholder: info.help_text,
                multiple: !!info.multiple,
                'multiple-limit': info.multiple,
              },
              style: {
                width: "100%",
              },
              attrs: {
                placeholder: info.help_text,
              },
              on: {
                input: (e) => {
                  row
                    ? this.$set(row, info.name, e)
                    : this.$set(this.form, info.name, e);
                },
              },
            },
            options.map((option) =>
              h("el-option", {
                props: {
                  label: typeof option === "object" ? option.name : option,
                  value: typeof option === "object" ? option.id : option,
                },
              })
            )
          );
          break;
        case "radio":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                value: row ? row[info.name] : this.form[info.name],
              },
              attrs: {
                placeholder: info.help_text,
              },
              on: {
                input: (e) => {
                  row
                    ? this.$set(row, info.name, e)
                    : this.$set(this.form, info.name, e);
                },
              },
            },
            options.map((option) =>
              h(
                "el-radio",
                {
                  props: {
                    label: typeof option === "object" ? option.id : option,
                  },
                },
                typeof option === "object" ? option.name : option
              )
            )
          );
          break;
        case "file":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                action: process.env.VUE_APP_UPLOAD_API,
                headers: {
                  Authorization: `Bearer ${getToken()}`,
                },
                accept:
                  "application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                multiple: true,
                fileList: this.file[info.name],
                beforeUpload: (file) => {
                  if (file.size / 1024 / 1024 > 20) {
                    this.$message({
                      type: "warning",
                      message: "上传图片大小超过20Mb！",
                    });
                    return false;
                  }
                },
                onSuccess: (response, file, fileList) => {
                  fileList.forEach((file) => {
                    if (file.response?.data && !file.response?.code) {
                      file.response = file.response.data;
                    }
                  });
                  this.file[info.name] = fileList;
                },
                onRemove: (file, fileList) => {
                  this.file[info.name] = fileList;
                },
                onError: (err, file, fileList) => {
                  this.file[info.name] = fileList;
                  this.$message({
                    type: "warning",
                    message: err,
                  });
                },
              },
              scopedSlots: {
                file: (scope) => {
                  let { file } = scope;
                  return [
                    h("div", {}, [
                      h("i", {
                        class: {
                          "el-icon-circle-check": file.status === "success",
                          "el-icon-loading": file.status === "uploading",
                        },
                        style: {
                          color: file.status === "success" ? "green" : "",
                        },
                      }),
                      h(
                        "a",
                        {
                          attrs: {
                            href: file.url,
                            download: file.name,
                          },
                          class: {
                            "uploaded-a": file.status === "success",
                          },
                          style: {
                            padding: "0 4px",
                          },
                        },
                        file.name
                      ),
                    ]),
                    h("i", {
                      class: "el-icon-close",
                      on: {
                        ["click"]: () => {
                          this.$set(
                            this.file,
                            info.field,
                            this.file[info.field].filter(
                              (item) => item !== file
                            )
                          );
                        },
                      },
                    }),
                  ];
                },
              },
            },
            [
              h(
                "el-button",
                {
                  slot: "trigger",
                  props: {
                    size: "small",
                    type: "primary",
                  },
                },
                "选取文件"
              ),
              h(
                "div",
                {
                  class: "el-upload__tip",
                  slot: "tip",
                },
                "文件不超过20Mb"
              ),
            ]
          );
          break;
        case "label":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                type: "primary",
              },
            },
            info.label
          );
          break;
        case "static":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                type: "primary",
              },
              attrs: {
                href: row ? row[info.name] : this.form[info.name],
                target: "_blank",
              },
            },
            info.label
          );
          break;
        case "hr":
          formItem = h(formBuilderMap(device).get(info.type), {}, info.label);
          break;
        case "choice":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                value: row ? row[info.name] : this.form[info.name],
                clearable: true,
                placeholder: info.help_text,
                multiple: !!info.multiple,
                'multiple-limit': info.multiple,
              },
              attrs: {
                placeholder: info.help_text,
              },
              style: {
                width: "100%",
              },
              on: {
                input: (e) => {
                  row
                    ? this.$set(row, info.name, e)
                    : this.$set(this.form, info.name, e);
                },
              },
            },
            options.map((option) =>
              h("el-option", {
                props: {
                  label: typeof option === "object" ? option.name : option,
                  value: typeof option === "object" ? option.id : option,
                },
              })
            )
          );
          break;
        case "choices":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                value: row ? row[info.name] : this.form[info.name],
                clearable: true,
                placeholder: info.help_text,
                multiple: true,
              },
              attrs: {
                placeholder: info.help_text,
              },
              style: {
                width: '100%'
              },
              on: {
                input: (e) => {
                  row
                    ? this.$set(row, info.name, e)
                    : this.$set(this.form, info.name, e);
                },
              },
            },
            options.map((option) =>
              h("el-option", {
                props: {
                  label: option,
                  value: option,
                },
              })
            )
          );
          break;
        case "relation":
          formItem = h(
            "vxe-table",
            {
              ref: `subForm-${info.name}`,
              style: {
                "margin-top": "10px",
              },
              props: {
                "min-height": "200px",
                border: true,
                stripe: true,
                data: this.form[info.name],
                "keep-source": true,
                "column-config": { resizable: true },
                "show-overflow": true,
                "edit-config": info._writeable
                  ? {
                      trigger: "click",
                      mode: "row",
                      showStatus: false,
                      isHover: true,
                      autoClear: false,
                    }
                  : {},
              },
              on: {
                "edit-closed": ({ row, column }) => {
                  const $table = this.$refs[`subForm-${info.name}`];
                  if ($table) {
                    this.$set(
                      this.form,
                      info.name,
                      this.$refs[`subForm-${info.name}`].tableData
                    );
                  }
                },
              },
            },
            [
              info._writeable
                ? h(
                    "vxe-column",
                    {
                      props: {
                        width: 56,
                        align: "center",
                      },
                      scopedSlots: {
                        default: ({ row }) => {
                          return h("el-button", {
                            slot: "default",
                            style: {
                              padding: "9px",
                            },
                            props: {
                              type: "danger",
                              size: "small",
                              icon: "el-icon-minus",
                            },
                            on: {
                              click: async (_) => {
                                const $table =
                                  this.$refs[`subForm-${info.name}`];
                                if ($table) {
                                  await $table.remove(row);
                                }
                              },
                            },
                          });
                        },
                      },
                    },
                    [
                      h("el-button", {
                        slot: "header",
                        style: {
                          padding: "9px",
                        },
                        props: {
                          type: "primary",
                          size: "small",
                          icon: "el-icon-plus",
                        },
                        on: {
                          click: async (_) => {
                            const $table = this.$refs[`subForm-${info.name}`];
                            if ($table) {
                              const record = {};
                              const { row: newRow } = await $table.insert(
                                record
                              );
                              await this.$nextTick();
                              await $table.setEditRow(newRow);
                            }
                          },
                        },
                      }),
                    ]
                  )
                : "",
              ...this.subForm
                .get(info.sub_custom_model_id)
                ?.customModel?.fields?.map((subField, subIndex) =>
                  h("vxe-column", {
                    props: {
                      field: subField.name,
                      title: subField.label,
                      align: "center",
                      "edit-render": {},
                    },
                    scopedSlots: {
                      edit: ({ row }) => {
                        return formBuilder.bind(this)(
                          device,
                          subField,
                          h,
                          row,
                          info._writeable,
                          info._readable,
                        );
                      },
                    },
                  })
                ),
            ]
          );
          break;
      }
    } else if (info._readable) {
      switch (info.type) {
        case "date":
          formItem = h(
            "span",
            {
              style: {
                color: "#333",
              },
            },
            moment(this.form[info.name]).format("YYYY年MM月DD日")
          );
          break;
        case "datetime":
          formItem = h(
            "span",
            {
              style: {
                color: "#333",
              },
            },
            moment(this.form[info.name]).format("YYYY年MM月DD日 HH时mm分ss秒")
          );
          break;
        case "select":
          let findValue = options.find((i) =>
            typeof i === "object"
              ? i.id === this.form[info.name]
              : i === this.form[info.name]
          );
          formItem = h(
            "span",
            {
              style: {
                color: "#333",
              },
            },
            typeof findValue === "object" ? findValue.name : findValue
          );
          break;
        case "file":
          formItem = h(
            formBuilderMap(device).get(info.type),
            {
              props: {
                action: process.env.VUE_APP_UPLOAD_API,
                headers: {
                  Authorization: `Bearer ${getToken()}`,
                },
                disabled: true,
                accept:
                  "application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                multiple: true,
                fileList: this.file[info.name],
              },
              scopedSlots: {
                file: (scope) => {
                  let { file } = scope;
                  return [
                    h("div", {}, [
                      h("i", {
                        class: "el-icon-circle-check",
                        style: {
                          color: "green",
                        },
                      }),
                      h(
                        "a",
                        {
                          attrs: {
                            href: file.url,
                            download: file.name,
                          },
                          class: {
                            "uploaded-a": file.status === "success",
                          },
                          style: {
                            padding: "0 4px",
                          },
                        },
                        file.name
                      ),
                    ]),
                  ];
                },
              },
            },
            [
              h(
                "span",
                {
                  slot: "trigger",
                },
                `数量：${this.file[info.name].length}`
              ),
            ]
          );
          break;
        default:
          formItem = h(
            "span",
            {
              style: {
                color: "#333",
              },
            },
            this.form[info.name]
          );
      }
    }

    if (formItem) {
      return row
        ? formItem
        : h(
            "el-form-item",
            {
              props: {
                prop: info.name,
                label: info.label,
              },
              style: {
                "grid-column-start": info.gs_x + 1,
                "grid-column-end": info.gs_x + 1 + info.gs_width,
                "grid-row-start": info.gs_y + 1,
                "grid-row-end": info.gs_y + 1 + info.gs_height,
              },
            },
            [formItem]
          );
    }
  }
  if (device === "mobile") {
    if (info._writeable || pWrite) {
      switch (info.type) {
        case "text":
          formItem = h(formBuilderMap(device).get(info.type), {
            props: {
              name: info.name,
              label: info.label,
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
            },
            attrs: {
              placeholder: info.help_text,
            },
            on: {
              input: (e) => {
                row
                  ? this.$set(row, info.name, e)
                  : this.$set(this.form, info.name, e);
              },
            },
          });
          break;
        case "textarea":
          formItem = h(formBuilderMap(device).get(info.type), {
            props: {
              name: info.name,
              label: info.label,
              type: "textarea",
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
            },
            attrs: {
              placeholder: info.help_text,
            },
            on: {
              input: (e) => {
                row
                  ? this.$set(row, info.name, e)
                  : this.$set(this.form, info.name, e);
              },
            },
          });
          break;
        case "date":
          formItem = h("van-field", {
            props: {
              readonly: true,
              clickable: true,
              name: info.name,
              label: info.label,
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
            },
            attrs: {
              placeholder: info.help_text,
            },
            on: {
              click: (_) => {
                this.vanCalendarOption.forFormName = info.name;
                this.vanCalendarOption.originalObj = row;
                this.$set(this.vanCalendarOption, "isShow", true);
              },
            },
          });
          break;
        case "datetime":
          formItem = h("van-field", {
            props: {
              readonly: true,
              clickable: true,
              name: info.name,
              label: info.label,
              value: row ? row[info.name] : this.form[info.name],
              clearable: true,
              placeholder: info.help_text,
            },
            on: {
              click: (_) => {
                this.vanTimePickerOption.forFormName = info.name;
                this.vanTimePickerOption.originalObj = row;
                this.$set(this.vanTimePickerOption, "isShow", true);
              },
            },
          });
          break;
        case "select":
          let findValue = options.find((i) =>
            typeof i === "object"
              ? i.id === (row ? row[info.name] : this.form[info.name])
              : i === (row ? row[info.name] : this.form[info.name])
          );
          formItem = h("van-field", {
            props: {
              readonly: true,
              clickable: true,
              name: info.name,
              label: info.label,
              value: typeof findValue === "object" ? findValue.name : findValue,
              clearable: true,
              placeholder: info.help_text,
            },
            on: {
              click: (_) => {
                this.vanPopupOption.forFormName = info.name;
                this.vanPopupOption.originalObj = row;
                this.$set(this.vanPopupOption, "columns", options);
                this.$set(this.vanPopupOption, "isShow", true);
              },
            },
          });
          break;
        case "file":
          formItem = h('van-cell',{
            props: {
              title: info.label,
            }
          },[
            h(
              formBuilderMap(device).get(info.type),
              {
                props: {
                  action: process.env.VUE_APP_UPLOAD_API,
                  headers: {
                    Authorization: `Bearer ${getToken()}`,
                  },
                  accept:
                    "application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                  multiple: true,
                  fileList: this.file[info.name],
                  beforeUpload: (file) => {
                    if (file.size / 1024 / 1024 > 20) {
                      this.$message({
                        type: "warning",
                        message: "上传图片大小超过20Mb！",
                      });
                      return false;
                    }
                  },
                  onSuccess: (response, file, fileList) => {
                    fileList.forEach((file) => {
                      if (file.response?.data && !file.response?.code) {
                        file.response = file.response.data;
                      }
                    });
                    this.file[info.name] = fileList;
                  },
                  onRemove: (file, fileList) => {
                    this.file[info.name] = fileList;
                  },
                  onError: (err, file, fileList) => {
                    this.file[info.name] = fileList;
                    this.$message({
                      type: "warning",
                      message: err,
                    });
                  },
                },
                scopedSlots: {
                  file: (scope) => {
                    let { file } = scope;
                    return [
                      h("div", {}, [
                        h("i", {
                          class: {
                            "el-icon-circle-check": file.status === "success",
                            "el-icon-loading": file.status === "uploading",
                          },
                          style: {
                            color: file.status === "success" ? "green" : "",
                          },
                        }),
                        h(
                          "a",
                          {
                            attrs: {
                              href: file.url,
                              download: file.name,
                            },
                            class: {
                              "uploaded-a": file.status === "success",
                            },
                            style: {
                              padding: "0 4px",
                            },
                          },
                          file.name
                        ),
                      ]),
                      h("i", {
                        class: "el-icon-close",
                        on: {
                          ["click"]: () => {
                            this.$set(
                              this.file,
                              info.field,
                              this.file[info.field].filter(
                                (item) => item !== file
                              )
                            );
                          },
                        },
                      }),
                    ];
                  },
                },
              },
              [
                h(
                  "el-button",
                  {
                    slot: "trigger",
                    props: {
                      size: "mini",
                      type: "primary",
                    },
                  },
                  "选取文件"
                ),
                h(
                  "div",
                  {
                    class: "el-upload__tip",
                    slot: "tip",
                  },
                  "文件不超过20Mb"
                ),
              ]
            )
          ])
          break;
        case "relation":
          let copySubForm = deepCopy(this.form[info.name][0])
          formItem = h("div", [
            h("van-cell", {
              props: {
                "arrow-direction": "down",
                title: info.label,
              },
            },[
              h('van-button',{
                props: {
                  type: 'info',
                  icon: 'plus',
                  size: 'small'
                },
                on: {
                  'click':_ => {
                    this.form[info.name].push(copySubForm)
                  }
                }
              },'新增')
            ]),
            h(
              "div",
              this.form[info.name].map((sForm, sIndex) =>
                h(
                  "van-cell-group",
                  {
                    props: {
                      inset: false
                    }
                  },
                  [
                    h("van-cell", {
                      props: {
                        title: info.label + "-" + (sIndex + 1)
                      }
                    },[
                      h('van-button',{
                        props: {
                          size: 'mini',
                          type: 'danger',
                          icon: 'minus'
                        },
                        on: {
                          click: _ => {
                            this.form[info.name].splice(sIndex, 1)
                          }
                        }
                      },'删除')
                    ]),
                    h(
                      "van-form",
                      {
                        props: {
                          "scroll-to-error": true,
                        },
                        style: {
                          margin: '0 10px'
                        }
                      },
                      Array.from(this.subForm)
                        .map((i) => i[1]?.customModel?.fields)
                        ?.flat()
                        .map((subField) =>
                          formBuilder.bind(this)(
                            device,
                            subField,
                            h,
                            sForm,
                            info._writeable,
                          )
                        )
                    ),
                  ]
                )
              )
            ),
          ]);
          break;
      }
    } else if(info._readable || pReadable) {
      switch (info.type) {
        case "date":
          formItem = h(
            "van-cell",
            {
              props: {
                title: info.label,
                value: this.form[info.name] ? moment(this.form[info.name]).format("YYYY年MM月DD日") : ''
              }
            }
          );
          break;
        case "datetime":
          formItem = h(
            "van-cell",
            {
              props: {
                title: info.label,
                value: this.form[info.name] ? moment(this.form[info.name]).format("YYYY年MM月DD日 HH时mm分ss秒") : ''
              }
            },
          );
          break;
        case "select":
          let findValue = options.find((i) =>
            typeof i === "object"
              ? i.id === this.form[info.name]
              : i === this.form[info.name]
          );
          formItem = h(
            "van-cell",
            {
              props: {
                title: info.label,
                value: typeof findValue === "object" ? findValue.name : findValue
              }
            },
          );
          break;
        case 'file':
          formItem = h(
            "van-cell",
            {
              props: {
                title: info.label,
              }
            },
            this.file[info.name].map(file => h("div", {}, [
              h(
                "a",
                {
                  attrs: {
                    href: file.url,
                    download: file.name,
                  },
                  class: {
                    "uploaded-a": file.status === "success",
                  },
                  style: {
                    padding: "0 4px",
                  },
                },
                file.name
              ),
            ]))
          );
          break
        case 'relation':
          formItem = h("div", [
            h("van-cell", {
              props: {
                "arrow-direction": "down",
                title: info.label,
              },
            }),
            h(
              "div",
              this.form[info.name].map((sForm, sIndex) =>
                h(
                  "van-cell-group",
                  {
                    props: {
                      inset: false
                    }
                  },
                  [
                    h("van-cell", {
                      props: {
                        title: info.label + "-" + (sIndex + 1)
                      }
                    }),
                    h(
                      "van-form",
                      {
                        props: {
                          "scroll-to-error": true,
                        },
                        style: {
                          margin: '0 10px'
                        }
                      },
                      Array.from(this.subForm)
                        .map((i) => i[1]?.customModel?.fields)
                        ?.flat()
                        .map((subField) =>
                          formBuilder.bind(this)(
                            device,
                            subField,
                            h,
                            sForm,
                            info._writeable,
                            info._readable
                          )
                        )
                    ),
                  ]
                )
              )
            ),
          ]);
          break;
        default:
          formItem = h('van-cell',{
            props: {
              title: info.label,
              value: row ? row[info.name] : this.form[info.name]
            }
          })
      }
    }
    return formItem;
  }
}