<script setup>
import Filter from "../../../../components/Filter/index.vue";
import {reactive} from "vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import EditWithdrawalModal from "./components/EditWithdrawalModal.vue";

const columns = [
    {
        title: 'ID',
        dataIndex: 'key',
    },
    {
        title: '身份',
        dataIndex: 'person_type_text',
    },
    {
        title: '身份ID',
        dataIndex: 'person_code',
    },
    {
        title: '提现方式',
        dataIndex: 'platform_type_text',
    },
    {
        title: '卡号',
        dataIndex: 'account',
    },
    {
        title: '姓名',
        dataIndex: 'realname',
    },
    {
        title: '身份证',
        dataIndex: 'id_card',
    },
    {
        title: '电话',
        dataIndex: 'mobile',
    },
    {
        title: '费率',
        dataIndex: 'ratio',
    },
    {
        title: '添加日期',
        dataIndex: 'createtime',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 70,
    },
];
const FilterConfig = [
    {
        key: 'person',
        type: 'select',
        label: '身份',
        placeholder: '请选择身份',
        api: async () => Api.admin.getWithdrawalPerson(),
    },
    {
        key: 'code',
        type: 'input',
        label: '身份ID',
        placeholder: '请输入身份ID',
    },
    {
        key: 'id_card',
        type: 'input',
        label: '身份证号',
        placeholder: '请输入身份证号',
    },
    {
        key: 'account',
        type: 'input',
        label: '卡号',
        placeholder: '请输入卡号',
    },
    {
        key: 'mobile',
        type: 'input',
        label: '电话号',
        placeholder: '请输入电话号',
    },
    {
        key: 'platform',
        type: 'select',
        label: '提现方式',
        placeholder: '请选择提现方式',
        api: async () => Api.admin.getWithdrawalPlatform()
    },
];

const po = reactive({
    wd: null,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

const {loading, pagination, initFetchData, fetchData} = useTableQuery({
    parameter: po,
    api: Api.admin.getWithdrawalList,
    callback: (data) => {
        Object.assign(vo, data);
    }
});
</script>

<template>
    <!-- 提现信息 -->
    <a-card>
        <Filter
            @search="initFetchData"
            v-model:from="po"
            :config="FilterConfig">
        </Filter>

        <a-table
            :data="vo.rows"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :loading="loading"
            :columns="columns"
            class="flex-grow">
            <template v-slot:action="{record}">
                <EditWithdrawalModal :id="record.id" @success="fetchData"></EditWithdrawalModal>
            </template>
        </a-table>
    </a-card>
</template>

<style scoped>

</style>
