<template>
    <div class="app-container">
        <!-- 搜索区域 -->
        <el-form :inline="true" :model="state.queryParams" class="search-form">
            <el-form-item label="邮箱">
                <el-input
                    v-model="state.queryParams.email"
                    placeholder="请输入邮箱关键字"
                    clearable
                    style="width: 240px"
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table
            v-loading="state.loading"
            border
            :data="state.tableData"
            style="width: 100%"
        >
            <el-table-column
                align="center"
                label="验证码类型"
                prop="codeType"
                width="160"
            />
            <el-table-column
                align="center"
                label="邮箱"
                prop="email"
                min-width="220"
            />
            <el-table-column
                align="center"
                label="验证码"
                prop="code"
                width="130"
            />
            <el-table-column
                align="center"
                label="过期时间"
                prop="expireTime"
                width="180"
            />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                v-if="state.total > 0"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.total"
                :page-sizes="[20, 50, 100]"
                v-model:current-page="state.queryParams.pageNo"
                v-model:page-size="state.queryParams.pageSize"
                @size-change="handleQuery"
                @current-change="handleQuery"
            />
        </div>
    </div>
</template>

<script lang="ts">
name: "emailCode";
</script>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { emailCodeList } from "@/api/messageCenter/index";

const state = reactive({
    loading: false,
    tableData: [] as any[],
    total: 0,
    queryParams: {
        email: "",
        pageNo: 1,
        pageSize: 20,
    },
});

const handleQuery = () => {
    state.loading = true;
    emailCodeList(state.queryParams)
        .then((res: any) => {
            if (res.code == 0 && res.data) {
                state.tableData = res.data.records || [];
                state.total = res.data.total || 0;
            }
        })
        .finally(() => {
            state.loading = false;
        });
};

const resetQuery = () => {
    state.queryParams.email = "";
    state.queryParams.pageNo = 1;
    handleQuery();
};

onMounted(() => handleQuery());
</script>

<style lang="scss" scoped>
.search-form {
    margin-bottom: 16px;
}
.pagination-container {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
</style>
