<template>
  <form-create
    v-model="formData"
    v-model:api="fapi"
    :rule="rule"
    :field="field"
    :option="option"
    @submit="onSubmit"
  ></form-create>
</template>

<script lang="ts" setup>
import {onMounted,ref,watch} from "vue";
import { useRoute } from 'vue-router'


// import formCreate from "@form-create/element-ui";
import { moduleById } from '@/api/data-visualization/module'
import formCreate  from '@/data-collect/render/element-plus/form-create.es.js'
const props = defineProps({
  appId: {
    required: true,
    type: String
  }
})

const route = useRoute()
const appId:any = ref(props.appId)
const field = ref([]) 


const  option :any = ref({});
const  rule :any = ref([]);
const fapi = ref(null);
const formData = ref({});

const onSubmit =  (formData:any) => {
  //todo 提交表单
console.log(formData);
}
function getInit(){
  if(appId.value == null){
    return
  }
  moduleById(appId.value ).then(res => {
    if(res.code ==0){
      if(res.data.canvas_style_data != null && res.data.canvas_style_data != ""){
        option.value =  formCreate.parseJson(res.data.component_data)
        rule.value =  formCreate.parseJson(res.data.canvas_style_data)
      }
    }
  })
}
onMounted(() => {
  getInit()
});
</script>