<template>
  <div>
    <van-form @submit="onSubmit" ref="formEle">
      <van-cell-group inset>
        <div v-text="item.title" :style="item.title_style"></div>
        <template v-for="(v, index) in item.child_list" :key="index">
          <van-field
            :required="v.attr.isRequired"
            v-model="from[v.attr.key]"
            :label="v.attr.label"
            :placeholder="v.attr.placeholder"
            v-if="v.type === 'van-field'"
          >
            <template #input v-if="v.child_list">
              <component
                :is="components[o.type]"
                :item="{ ...o, key: v.attr.key }"
                v-for="(o, index_p) in v.child_list"
                :key="'formSon' + index_p"
                @setKey="setKey"
              />
            </template>
          </van-field>
          <div :style="v.style" v-if="v.type === 'van-buttom'">
            <van-button
              block
              type="danger"
              native-type="submit"
              v-text="v.text"
            >
            </van-button>
          </div>
        </template>
      </van-cell-group>
    </van-form>
    <br />
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';
import { showToast } from 'vant';
import { uploadData } from '../api/index';
import localRadioGroup from './radioGroup.vue';
import localUpload from './upload.vue';
const components = {
  'van-radio-group': localRadioGroup,
  'van-uploader': localUpload,
};

const props = defineProps({
  item: {
    type: Object,
  },
});
const from = ref({});
const formEle = ref(null);
const setKey = obj => {
  from.value[obj.key] = obj.value;
};
const onSubmit = () => {
  // 上报参数 from
  uploadData({
    ...from.value,
    operateId: props.item.operateId,
    formId: props.item.formId,
  }).then(() => showToast('提交成功'));
};
</script>
