<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"
                        >新增</el-button
                    >
                </el-row>
            </el-card>
        </base-header>
        <pure-table
            border
            class="base-main"
            :data="tableData"
            :columns="columns"
            size="large"
            v-loading="loading"
        />
        <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 { ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { getTableList } from '@/api/table';
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',
    },
];
const { loading, tableData, pagination, handleRequestDataFN, handleSearchFN, handlePaginationChangeFN, handleDeleteItemFN } = useTable({
    searchForm: form.value,
    requestDataFN: getTableList,
});
</script>

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