<template>
    <base-container>
        <base-header>
            <el-card>
                <el-form
                    :model="form"
                    :inline="true"
                >
                    <el-form-item label="姓名">
                        <el-input
                            v-model="form.firstName"
                            placeholder="请输入姓名"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="名称">
                        <el-input
                            v-model="form.lastName"
                            placeholder="请输入名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-input
                            v-model="form.birthday"
                            placeholder="请输入生日"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input
                            v-model="form.email"
                            placeholder="请输入邮箱"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        label="性别"
                        praceholder="请选择性别"
                        style="width: 150px"
                    >
                        <el-select v-model="form.sex">
                            <el-option
                                label="男"
                                value="male"
                            ></el-option>
                            <el-option
                                label="女"
                                value="female"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-row justify="end">
                    <el-button
                        type="primary"
                        @click="handleSearchFN"
                        >查询</el-button
                    >

                    <el-button
                        type="primary"
                        class="mr-5"
                        @click="doAdd"
                        >新增</el-button
                    >
                </el-row>
            </el-card>
        </base-header>
        <pure-table
            border
            class="base-main"
            :data="tableData"
            :columns="columns"
            size="large"
            v-loading="loading"
        >
            <template #action="{ row }">
                <el-button
                    type="danger"
                    link
                    @click="handleDeleteItemFN({ id: row.id })"
                    >删除</el-button
                >
            </template>
        </pure-table>
        <base-footer>
            <el-card>
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    v-bind="pagination"
                    @change="handlePaginationChangeFN"
                />
            </el-card>
        </base-footer>
    </base-container>
</template>

<script setup lang="jsx">
import { h, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { getTableList, addTableItem, deleteTableItem } from '@/api/table';
import Add from './components/add.vue';
import { addDialog } from '@/components/ReDialog';
import { message } from '@/utils/message';
defineOptions({
    name: 'TemplateLayout',
});
const form = ref({
    firstName: '',
    lastName: '',
    birthday: '',
    email: '',
    sex: '',
});

const columns = [
    {
        label: '序号',
        type: 'index',
        width: 70,
    },
    {
        label: '姓名',
        prop: 'firstName',
    },
    {
        label: '名称',
        prop: 'lastName',
    },
    {
        label: '生日',
        prop: 'birthday',
    },
    {
        label: '邮箱',
        prop: 'email',
    },
    {
        label: '性别',
        prop: 'sex',
    },
    {
        label: '操作',
        prop: 'action',
        slot: 'action',
        width: 80,
        fixed: 'right',
    },
];
const { loading, tableData, pagination, handleRequestDataFN, handleSearchFN, handlePaginationChangeFN, handleDeleteItemFN } = useTable({
    searchForm: form.value,
    requestDataFN: getTableList,
    deleteItemFN: deleteTableItem,
});

const AddRef = ref(null);
const doAdd = () => {
    addDialog({
        width: '550px',
        title: '新增',
        contentRenderer: () => h(Add, { ref: AddRef }),
        props: {},
        sureBtnLoading: true,
        beforeSure: (done, { options, closeLoading }) => {
            console.log(options);
            const { form, formRef } = AddRef.value;
            formRef.validate((valid) => {
                if (valid) {
                    addTableItem({ ...form })
                        .then(() => {
                            message('新增成功', { type: 'success' });
                            handleRequestDataFN();
                            done();
                        })
                        .catch(() => {
                            closeLoading();
                        });
                } else {
                    closeLoading();
                }
            });
        },
    });
};
</script>

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