<template>
  <Form
    ref="renderFormRef"
    :scroll-to-error="true"
    :show-error="true"
    v-bind="$attrs"
  >
    <div
      v-for="item in columns"
      :key="item.key ?? item.label"
      :style="formItemStyle"
      :class="formItemClass"
    >
      <template v-if="componentName[item.type]">
        <component
          :is="componentName[item.type]"
          :item="item"
          v-model:value="formData[item.key]"
          v-bind="item"
          v-on="item.on ?? {}"
        >
          <template v-if="item?.slots?.length">
            <slot
              v-for="slotName in item.slots"
              v-bind="data"
              :key="slotName"
              :name="slotName"
            />
          </template>
        </component>
      </template>
      <template v-else>
        <slot />
      </template>
    </div>
  </Form>
</template>

<script lang="ts">
export default {
  name: "BCRenderFormNew",
};
</script>

<script lang="ts" setup>
import { Form } from "vant";
import { CSSProperties } from "vue";
import Store from "@mobileUI/store";
import { watchEffect, ref, defineAsyncComponent, markRaw } from "vue";
const componentDict = {
  input: markRaw(
    defineAsyncComponent(() => import("./components/RfInput/index.vue")),
  ),
  select: markRaw(
    defineAsyncComponent(() => import("./components/RfSelect/index.vue")),
  ),
  date: markRaw(
    defineAsyncComponent(() => import("./components/RfDateSelect/index.vue")),
  ),
  content: markRaw(
    defineAsyncComponent(() => import("./components/RfContent/index.vue")),
  ),
  textarea: markRaw(
    defineAsyncComponent(() => import("./components/RfTextArea/index.vue")),
  ),
  picSelect: markRaw(
    defineAsyncComponent(() => import("./components/RfPicSelect/index.vue")),
  ),
  mulSelect: markRaw(
    defineAsyncComponent(() => import("./components/RfMulSelect/index.vue")),
  ),
  colorSelect: markRaw(
    defineAsyncComponent(() => import("./components/RfColorSelect/index.vue")),
  ),
  selectInput: markRaw(
    defineAsyncComponent(() => import("./components/RfSelectInput/index.vue")),
  ),
  companySearch: markRaw(
    defineAsyncComponent(
      () => import("./components/RfCompanySearch/index.vue"),
    ),
  ),
};

type TComponentType = typeof componentDict;

const componentName = ref<TComponentType>(componentDict);

type Props = {
  data: any;
  columns: any[];
  envData?: TEnv.TEnvData;
  formItemStyle?: CSSProperties;
  formItemClass?: string;
};

const props = withDefaults(defineProps<Props>(), {
  data: () => {},
  columns: () => [],
  envData: null,
  formItemStyle: null,
  formItemClass: "",
});

Store.sid = props.envData?.sid;
Store.app_id = props.envData?.app_id;
Store.user_id = props.envData?.user_id;
Store.corp_id = props.envData?.corp_id;
Store.node_env = props.envData?.node_env;

const formData = ref({});

const renderFormRef = ref(null);

watchEffect(() => {
  formData.value = props.data;
});

const submit = () => {
  renderFormRef.value.submit();
};

defineExpose({
  submit,
  renderFormRef,
});
</script>
