<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap';
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import {reactive} from 'vue'
import { propTypes } from '@/utils/propTypes'
const { formRegister } = useForm()

const rules = reactive({

})

const props = defineProps({
  title:propTypes.string.def(""),
  branchName:propTypes.string.def(""),
  formSchema:propTypes.object.def({})
})

const systemUse = reactive({
  title:props.title,
  branchName:props.branchName,
  formSchema:props.formSchema
});


</script>


<template>
  <ContentWrap class="ContentWrap">
    <h3 v-if="systemUse.title">{{ systemUse.title }}</h3>
    <p v-if="systemUse.branchName">{{ systemUse.branchName }}</p>
    <Form :rules="rules" @register="formRegister" :schema="systemUse.formSchema" />
  </ContentWrap>
  
</template>
<style scoped>
  .ContentWrap{
    /* background-color: #d5f0f5; */
    min-width:1120px;
  }
  h3{
    color:rgb(3, 87, 143);
    text-align:center;
  }
  p{
    font-size:18px;
    color:rgb(3, 87, 143);
    border-bottom:1px solid #eee;
  }

</style>