<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 {Message} from "@arco-design/web-vue";
import {debounce} from "lodash";

const columns = [
    {
        title: 'ID',
        dataIndex: 'uid',
    },
    {
        title: '身份',
        dataIndex: 'type_text',
    },
    {
        title: '提现方式',
        dataIndex: 'ac_type_text',
    },
    {
        title: '姓名',
        dataIndex: 'realname',
    },
    {
        title: '卡号',
        dataIndex: 'account',
    },
    {
        title: '金额',
        dataIndex: 'money',
    },
    {
        title: '申请日期',
        dataIndex: 'createtime',
    },
    {
        title: '状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '到账日期',
        dataIndex: 'finshtime',
    },
    {
        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, fetchData} = useTableQuery({
    parameter: po,
    api: Api.admin.getWithdrawllogList,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

const withdrawallogTranfer = debounce(async (item) => {
    try {
        const {msg} = await Api.admin.withdrawallogTranfer({
            id: item.id
        });
        Message.success(msg);
    } catch (_e) {
        await fetchData();
    }
}, 1000);

const changeWithdrawalLogAddRemark = async (content, item) => {
    const {msg} = await Api.admin.withdrawalLogAddRemark({
        id: item.id,
        content: content,
    });
    Message.success(msg);
    await fetchData();
}
</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="{record}">
                <div v-if="record.status===2" class="status success">{{ record.status_text }}</div>
                <div v-if="record.status===0" class="status warning">{{ record.status_text }}</div>
                <div v-if="record.status===-1" class="status danger">{{ record.status_text }}</div>
                <div v-if="record.status===1" class="status primary">{{ record.status_text }}</div>
            </template>
            <template v-slot:action="{record}">
                <a-link :hoverable="false" @click="withdrawallogTranfer(record)">打款</a-link>
            </template>
            <template v-slot:remark="{record}">
                <a-input @change="changeWithdrawalLogAddRemark($event, record)" v-model:model-value="record.remark"
                         class="w-full"
                         placeholder="请输入备注信息"></a-input>
            </template>
        </a-table>
    </a-card>
</template>

<style lang="scss" scoped>
.status {
    @apply flex whitespace-nowrap items-center gap-[6px];
    &::before {
        content: '';
        @apply block size-[6px] rounded-[50%];
    }
}

.success {
    &::before {
        @apply bg-[rgb(var(--green-6))];
    }
}

.danger {
    &::before {
        @apply bg-[rgb(var(--red-6))];
    }
}

.warning {
    &::before {
        @apply bg-[rgb(var(--orange-6))];
    }
}

.primary {
    &::before {
        @apply bg-[rgb(var(--arcoblue-6))];
    }
}

#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>
