<template>
    <div :id="id" :class="className" :style="{ height, width }">
        <!-- 数据表格 -->
        <el-table
            ref="dataTableRef"
            v-loading="loading"
            :data="recordList"
            @sort-change="handleSortChange"
            highlight-current-row
            border
        >
            <el-table-column
                label="会员名称"
                prop="username"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="手机号"
                prop="mobilePhone"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="邮箱"
                prop="email"
                align="center"
                sortable="custom"
            />
            <el-table-column
                label="注册时间"
                prop="registrationTime"
                align="center"
                sortable="custom"
            />
        </el-table>

        <!-- 分页工具条 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNumber"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { inviteSecondRecord } from "@/api/invitation/index";
import {
    SecondRecordQueryParam,
    SecondRecordItem,
} from "@/types/api/invitation/index";
import { ElTable } from "element-plus";
const dataTableRef = ref(ElTable);

const state = reactive({
    loading: true,
    queryParams: {
        pageNumber: 1,
        pageSize: 50,
        id: 0,
    } as SecondRecordQueryParam,
    recordList: [] as SecondRecordItem[],
    total: 0,
});

const { loading, queryParams, recordList, total } = toRefs(state);

/**
 * 排序
 */
function handleSortChange(column: any) {
    var sortingType = column.order;
    state.queryParams.property = column.prop;
    if (sortingType === "ascending") {
        state.queryParams.direction = "1";
    } else if (sortingType === "descending") {
        state.queryParams.direction = "0";
    } else {
        state.queryParams.property = "id";
        state.queryParams.direction = "1";
    }
    handleQuery();
}

const props = defineProps({
    id: {
        type: String,
        default: "0",
    },
    className: {
        type: String,
        default: "sr-body",
    },
    width: {
        type: String,
        default: "200px",
        required: true,
    },
    height: {
        type: String,
        default: "200px",
        required: true,
    },
});

const handleQuery = () => {
    state.loading = true;
    inviteSecondRecord(state.queryParams).then(({ data }) => {
        state.recordList = data.content;
        state.total = data.totalElements;
        state.loading = false;
    });
};

onMounted(() => {
    state.queryParams.id = props.id;
    handleQuery();
});
</script>

<style lang="scss" scoped>
.sr-body {
    margin: 10px auto;
}
</style>
