<script setup lang="ts">
import type { BasicForm } from '@/types/form'

const formData = reactive<any>({})

const create = (data: any) => {
  console.log(data)
}
const update = (data: any) => {
  console.log(data)
}

const proFormRef = ref<any>()
const handleSave = () => {
  proFormRef.value.submit()
}
const formConfig = reactive<BasicForm>({
  formItems: [
    {
      type: 'form-tabs',
      label: '',
      name: '',
      value: 'label1',
      span: 24,
      children: [
        {
          type: 'tab-pane',
          label: 'tab1',
          name: 'label1',
          value: '',
          children: [
            {
              type: 'input',
              label: '登录名',
              name: 'loginName',
              value: 'a',
              rules: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
              slots: [
                {
                  name: 'prepend',
                  alias: 'prepend'
                }
              ]
            },
            {
              type: 'input',
              label: '密码',
              name: 'password',
              value: ''
            },
            {
              label: '启用',
              value: '1',
              name: 'loginFlag',
              type: 'switch',
              props: {
                'active-value': '1',
                'inactive-value': '0'
              }
            }
          ]
        },
        {
          type: 'tab-pane',
          label: 'tab2',
          name: 'label2',
          value: '',
          children: [
            {
              type: 'input',
              label: '手机号',
              name: 'phone',
              value: ''
            },
            {
              label: '字段名',
              value: '',
              name: 'field3',
              type: 'cascader',
              props: {
                options: [
                  {
                    value: 'guide',
                    label: 'Guide',
                    children: [
                      {
                        value: 'disciplines',
                        label: 'Disciplines',
                        children: [
                          {
                            value: 'consistency',
                            label: 'Consistency'
                          },
                          {
                            value: 'feedback',
                            label: 'Feedback'
                          },
                          {
                            value: 'efficiency',
                            label: 'Efficiency'
                          },
                          {
                            value: 'controllability',
                            label: 'Controllability'
                          }
                        ]
                      },
                      {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [
                          {
                            value: 'side nav',
                            label: 'Side Navigation'
                          },
                          {
                            value: 'top nav',
                            label: 'Top Navigation'
                          }
                        ]
                      }
                    ]
                  },
                  {
                    value: 'resource',
                    label: 'Resource',
                    children: [
                      {
                        value: 'axure',
                        label: 'Axure Components'
                      },
                      {
                        value: 'sketch',
                        label: 'Sketch Templates'
                      },
                      {
                        value: 'docs',
                        label: 'Design Documentation'
                      }
                    ]
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  ]
})
</script>

<template>
  <div class="h-full bg-white p-16px overflow-auto">
    <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
      <template #prepend>test</template>
      <template #cprepend>testc</template>
      <template #lprepend>testl</template>
    </pro-form>
    <div class="text-center">
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
