<template>
    <h1>FormButton 组件</h1>
    <el-form :ref="refForm" :model="formData" label-width="120px" label-suffix=":" label-position="left">
        <el-form-item prop="email" label="Email" :rules="[
            {
                required: true,
                message: 'Please input email',
                trigger: 'blur',
            },
            {
                type: 'email',
                message: 'Please input correct email address',
                trigger: ['blur', 'change'],
            },
        ]">
            <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item prop="username" label="Username" :rules="[
            {
                required: true,
                message: 'Please input username',
                trigger: 'blur',
            },
        ]">
            <el-input v-model="formData.username" />
        </el-form-item>

        <el-form-item>
            <FormButton :buttons="buttons" :submitCallback="submitCallback" ref-form="ref-form" />
        </el-form-item>
    </el-form>
    <hr>
    <el-form :ref="refForm1" :model="formData1" label-width="120px" label-suffix=":" label-position="left">
        <el-form-item prop="username" label="Username" :rules="[
            {
                required: true,
                message: 'Please input username',
                trigger: 'blur',
            },
        ]">
            <el-input v-model="formData1.username" />
        </el-form-item>

        <el-form-item>
            <FormButton :buttons="buttons1" :submitCallback="submitCallback1" ref-form="ref-form1" />
        </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
import type { TFormButtonButtons, TFormButtonSubmitParams } from "@qingbing/ts-v3-form-button";
import { reactive, ref } from 'vue'
import { FormButton } from "@qingbing/ts-v3-form-button";

const refForm = ref('ref-form')

const formData = reactive<{
    email: string
    username: string
}>({
    email: '',
    username: 'qingbing',
})
const buttons: TFormButtonButtons = [
    "submit",
    "cancel",
    "reset",
    {
        "label": "TEST",
        callback: () => {
            console.log(222);
        }
    }
];
const submitCallback = (params: TFormButtonSubmitParams) => {
    console.log(params);
    params.callFailure("哦河, 操作失败了")
}


const refForm1 = ref('ref-form1')
const formData1 = reactive<{
    username: string
}>({
    username: '',
})
const buttons1: TFormButtonButtons = [
    "submit",
    "cancel",
    {
        "label": "TEST",
        callback: () => {
            console.log(111);
        }
    }
];
const submitCallback1 = (params: TFormButtonSubmitParams) => {
    console.log(params);
    params.callSuccess("哦业, 操作成功了")
}

</script>