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

const formConfig = reactive<BasicForm>({
  span: 8,
  formItems: [
    {
      label: '仓库管理',
      value: '',
      name: '',
      type: 'form-card',
      span: 24,
      props: {
        shadow: 'never',
        class: 'mb-2'
      },
      children: [
        {
          label: '用户名',
          value: '',
          name: 'name',
          type: 'input',
          rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
        },
        {
          label: '密码',
          value: '',
          name: 'password',
          type: 'input',
          props: {
            type: 'password'
          },
          rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        },
        {
          label: '字段名',
          value: '',
          name: 'field',
          type: 'input',
          slots: [
            {
              name: 'prepend',
              alias: 'prepend'
            }
          ]
        }
      ]
    },
    {
      label: '仓库管理',
      value: '',
      name: '',
      type: 'form-card',
      span: 24,
      props: {
        shadow: 'never',
        class: 'mb-2'
      },
      children: [
        {
          label: '用户名',
          value: '',
          name: 'name1',
          type: 'input'
        },
        {
          label: '密码',
          value: '',
          name: 'password1',
          type: 'input'
        },
        {
          label: '字段名',
          value: '',
          name: 'field1',
          type: 'input'
        }
      ]
    },
    {
      label: '仓库管理',
      value: '',
      name: '',
      type: 'form-card',
      span: 24,
      props: {
        shadow: 'never',
        class: 'mb-2'
      },
      children: [
        {
          label: '用户名',
          value: '',
          name: 'name2',
          type: 'input'
        },
        {
          label: '密码',
          value: '',
          name: 'password2',
          type: 'input'
        },
        {
          label: '字段名',
          value: '',
          name: 'field2',
          type: 'input'
        }
      ]
    },
    {
      label: '任务管理',
      value: '',
      name: '',
      type: 'form-card',
      span: 24,
      props: {
        shadow: 'never',
        class: 'mb-2'
      },
      children: [
        {
          label: '用户名',
          value: '',
          name: 'name3',
          type: 'input'
        },
        {
          label: '密码',
          value: '',
          name: 'password3',
          type: 'input'
        },
        {
          label: '字段名',
          value: '',
          name: 'field3',
          type: 'input'
        }
      ]
    },
    {
      label: '仓库管理',
      value: '',
      name: '',
      type: 'form-card',
      span: 24,
      props: {
        shadow: 'never',
        class: 'mb-2'
      },
      children: [
        {
          label: '用户名',
          value: '',
          name: 'name4',
          type: 'input'
        },
        {
          label: '密码',
          value: '',
          name: 'password4',
          type: 'input'
        },
        {
          label: '字段名',
          value: '',
          name: 'field4',
          type: 'input'
        }
      ]
    },
    {
      label: '任务管理',
      value: '',
      name: '',
      type: 'form-card',
      span: 24,
      props: {
        shadow: 'never'
      },
      children: [
        {
          label: '用户名',
          value: '',
          name: 'name5',
          hidden: true,
          type: 'input'
        },
        {
          label: '密码',
          value: '',
          name: 'password5',
          type: 'input'
        },
        {
          label: '字段名',
          value: '',
          name: 'field5',
          type: 'input'
        },
        {
          label: '自定义',
          value: '',
          name: 'custom',
          type: 'custom',
          notFormItem: true,
          slots: [
            {
              name: 'default',
              alias: 'customDefault'
            }
          ]
        }
      ]
    }
  ]
})

const formData = reactive({})

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

const proFormRef = ref<any>()
const handleSave = () => {
  proFormRef.value.submit()
}
</script>

<template>
  <div class="pb-60px">
    <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
      <template #prepend>test</template>
      <template #customDefault>
        <div>自定义组件</div>
      </template>
    </pro-form>
    <div
      class="fixed bottom-0 right-0 text-right bg-white px-16px py-5px form-footer"
      style="width: calc(100vw - var(--menu-width))"
    >
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.form-footer {
  box-shadow: rgb(0 0 0 / 8%) 0px -6px 16px -8px;
}
</style>
