<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 formCreate from "@form-create/element-ui";
import { moduleById } from '@/api/application/module'
import formCreate  from '@/fcDesignerPro/render/element-plus/form-create.es.js'
const moduleInfo:any = ref({})
const props:any = defineProps({
  moduleInfo: {
    type: Object,
    default: ''
  }
})
watch(() => props.moduleInfo, val => { // 初始化数据
  moduleInfo.value = val
  getInit()
})

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(moduleInfo.value.id == null){
    return
  }
  moduleById(props.moduleInfo.id ).then(res => {
    if(res.code ==0){
      if(res.data.data.canvas_style_data != null && res.data.data.canvas_style_data != ""){
        option.value =  formCreate.parseJson(res.data.data.component_data)
        rule.value =  formCreate.parseJson(res.data.data.canvas_style_data)
      }
    }
  })
}
onMounted(() => {
  moduleInfo.value = props.moduleInfo
  getInit()
});
</script>