<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";

const columns = [
    {
        title: 'ID',
        dataIndex: 'key',
    },
    {
        title: '身份',
        dataIndex: 'key',
    },
    {
        title: '提现方式',
        dataIndex: 'key',
    },
    {
        title: '姓名',
        dataIndex: 'key',
    },
    {
        title: '卡号',
        dataIndex: 'image',
        slotName: 'image',
    },
    {
        title: '金额',
        dataIndex: 'key',
    },
    {
        title: '申请日期',
        dataIndex: 'key',
    },
    {
        title: '状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '到账日期',
        dataIndex: 'key',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 80,
    },
    {
        title: '备注',
        dataIndex: 'remark',
        slotName: 'remark',
        width: 250,
    },
];
const FilterConfig = [
    {
        key: 'uid',
        type: 'input',
        label: 'ID',
        placeholder: '请输入ID',
    },
    {
        key: 'nealname',
        type: 'input',
        label: '姓名',
        placeholder: '请输入姓名',
    },
    {
        key: 'account',
        type: 'input',
        label: '卡号',
        placeholder: '请输入卡号',
    },
    {
        key: 'type',
        type: 'select',
        label: '身份',
        placeholder: '请选择身份',
        api: async () => Api.admin.getWithdrawalPerson()
    },
    {
        key: 'rangeTime',
        start: 'start_time',
        end: 'end_time',
        type: 'datetime',
        label: '申请时间',
    },
    {
        key: 'status',
        type: 'select',
        label: '状态',
        placeholder: '请选择状态',
        api: async () => Api.admin.getWithdrawllogStatus()
    },
];

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

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

<template>
    <!-- 打款管理 -->
    <div class="mock-card mb-[20px]">
        <div class="title mb-[16px]">打款商户</div>

        <div class="grid grid-cols-6 gap-[20px]" id="statistic-card">
            <div
                class="bg-[rgb(var(--arcoblue-1))] hover:bg-[rgb(var(--arcoblue-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    show-group-separator
                    :value="5436.24"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        商户1剩余
                    </template>
                </a-statistic>
            </div>
            <div
                class="bg-[rgb(var(--arcoblue-1))] hover:bg-[rgb(var(--arcoblue-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    show-group-separator
                    :value="12790.58"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        商户2剩余
                    </template>
                </a-statistic>
            </div>
        </div>
    </div>

    <div class="mock-card mb-[20px]">
        <Filter
            @search="initFetchData"
            v-model:from="po"
            :config="FilterConfig">
        </Filter>
    </div>

    <a-card>
        <a-table
            :data="vo.rows"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :loading="loading"
            :columns="columns"
            class="flex-grow">
            <template v-slot:status>
                状态
            </template>
            <template v-slot:action>
                <a-link :hoverable="false">打款</a-link>
            </template>
            <template v-slot:remark>
                <a-input class="w-full" placeholder="请输入备注信息"></a-input>
            </template>
        </a-table>
    </a-card>
</template>

<style lang="scss" scoped>
#statistic-card {
    .statistic-item {
        cursor: pointer;

        &:hover {
            :deep(.arco-statistic) {
                .arco-statistic-title,
                .arco-statistic-content > .arco-statistic-value {
                    color: #fff;
                }
            }
        }

        :deep(.arco-statistic) {
            .arco-statistic-title,
            .arco-statistic-content > .arco-statistic-value {
                transition: 500ms;
            }
        }

        @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
                :deep(.arco-statistic) .arco-statistic-value {
                    color: rgb(var(--arcoblue-6));
                }
            }
        }
    }
}

.title {
    color: rgb(29, 33, 41);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
}
</style>
