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

const columns = [
    {
        title: '动账日期',
        dataIndex: 'value'
    },
    {
        title: '动账时间',
        dataIndex: 'value'
    },
    {
        title: '交易流水号',
        dataIndex: 'value'
    },
    {
        title: '动账渠道',
        dataIndex: 'value'
    },
    {
        title: '状态',
        dataIndex: 'value'
    },
    {
        title: '动账用途',
        dataIndex: 'value'
    },
    {
        title: '动账金额(元)',
        dataIndex: 'value'
    },
    {
        title: '付款人账户',
        dataIndex: 'value'
    },
    {
        title: '关联任务ID',
        dataIndex: 'value'
    },
    {
        title: '子任务ID',
        dataIndex: 'value'
    },
    {
        title: '钱包余额(元) ',
        dataIndex: 'value'
    },
    {
        title: '任务款余额(元)',
        dataIndex: 'value'
    },
    {
        title: '资产合计(元)',
        dataIndex: 'value'
    },
];
const FilterConfig = computed(() => [
    {
        key: 'wd',
        type: 'select',
        label: '动账渠道',
        placeholder: '全部',
        api: async () => ({
            data: [
                {
                    name: '选项一',
                    id: 1,
                },
                {
                    name: '选项二',
                    id: 2,
                },
                {
                    name: '选项三',
                    id: 3,
                },
            ]
        })
    },
    {
        key: 'wd',
        type: 'select',
        label: '动账用途',
        placeholder: '全部',
        api: async () => ({
            data: [
                {
                    name: '选项一',
                    id: 1,
                },
                {
                    name: '选项二',
                    id: 2,
                },
                {
                    name: '选项三',
                    id: 3,
                },
            ]
        })
    },
    {
        key: 'wd',
        type: 'input',
        label: '关联ID',
        placeholder: '请输入任务ID',
    },
    {
        key: 'wd',
        type: 'datetime',
        label: '动账日期',
        placeholder: '全部',
    },
]);
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const po = reactive({
    wd: null,
});

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

<template>
    <!-- 动账明细 -->
    <div class="mb-[20px]">
        <a-breadcrumb
            :routes="[{path: '/home/my-wallet', label: '我的钱包'}, {path: '/', label: '动账明细'},]">
        </a-breadcrumb>
    </div>

    <div class="mock-card mb-[20px]">
        <Filter
            title="查询动账明细"
            v-model:from="po"
            :config="FilterConfig"
            @search="initFetchData">
        </Filter>
    </div>

    <a-card>
        <div class="title">动账明细</div>

        <a-table
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :data="vo.rows"
            :loading="loading"
            class="flex-grow"
            :columns="columns">
        </a-table>
    </a-card>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 20px;
}
</style>
