<script setup>
import ZFBICON from '../../static/icons/ZFBICON.png';
import dropDown from '../../static/icons/drop-down.svg';
import XNav from "../../components/XNav.vue";
import XTag from "../../components/XTag.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
import {reactive} from "vue";
import XDateTime from "../../components/XDateTime.vue";
import dayjs from "dayjs";
import ZFENUM from "../../enum/ZFENUM.js";
import TXJLENUM from "../../enum/TXJLENUM.js";
import XModal from "../../components/XModal.vue";
import WithdrawAgainModal from "../../components/WithdrawAgainModal.vue";

const po = reactive({
    time: dayjs().format('YYYY-MM'),
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
    month_money: 0,
    all_money: 0,
});
const {loading, pagination, initFetchData, fetchData} = useTableQuery({
    api: Api.system.getWithdrawLog,
    uuid: true,
    parameter: po,
    callback: (data) => {
        Object.assign(vo, data);
    }
});
</script>

<template>
    <!--提现记录-->
    <x-nav></x-nav>

    <scroll-view
        scroll-y
        @refresherpulling="initFetchData()"
        @scrolltolower="pagination.page++"
        class="p-[20rpx] h-[calc(100vh-100rpx)]">
        <view class="!flex flex-col gap-[20rpx]">
            <view class="bg-[var(--primary-color)] p-[32rpx] rounded-[12rpx] !flex items-center">
                <view class="!flex-grow text-[#fff]">
                    <view class="test-36r font-bold">{{ vo?.month_money.toFixed(2) }}</view>
                    <view class="test-24r">该月提现收益</view>
                </view>
                <view class="!flex-grow text-[#fff]">
                    <view class="test-36r font-bold">{{ vo?.all_money.toFixed(2) }}</view>
                    <view class="test-24r">累计提现收益</view>
                </view>
                <view class="flex-shrink-0">
                    <x-date-time v-model:model-value="po.time" fields="month" type="3" @success="initFetchData">
                        <view
                            class="rounded-full bg-[#E8F3FF] text-[var(--primary-color)] px-[32rpx] py-[8rpx] !flex items-center gap-[14rpx]">
                            {{ po.time }}
                            <image class="!w-[18rpx]" mode="widthFix" :src="dropDown"></image>
                        </view>
                    </x-date-time>
                </view>
            </view>

            <view class="p-[20rpx] bg-[#fff] rounded-[8rpx] card" v-for="v in vo.rows" :key="v.id">
                <view class="!flex">
                    <image class="!size-[80rpx]" mode="aspectFill" :src="ZFENUM[v.type]"></image>
                    <view class="!ml-[60rpx] !flex gap-[60rpx]">
                        <view>
                            <view class="test-32r font-bold">{{ v.money.toFixed(2) }}</view>
                            <view class="text-[#86909C] test-24r">提现金额</view>
                        </view>
                        <view>
                            <view class="test-32r font-bold">{{ v.real_money.toFixed(2) }}</view>
                            <view class="text-[#86909C] test-24r">到账金额</view>
                        </view>
                    </view>
                    <view class="!ml-auto">
                        <x-tag :type="TXJLENUM[v.status]">
                            {{ v.status_text }}
                            <WithdrawAgainModal :id="v.id" @success="fetchData">
                                <tui-icon v-if="v.status===-1" :size="15" color="#F53F3F" name="about"></tui-icon>
                            </WithdrawAgainModal>
                        </x-tag>
                    </view>
                </view>
                <view
                    class="!mt-[20rpx] py-[10rpx] px-[20rpx] test-24r !flex justify-between items-center bg-[#F2F3F5] rounded-[8rpx]">
                    <view>提现时间：{{ dayjs(v.createtime).format('YYYY-MM-DD HH:mm') }}</view>
                    <view>手续费：{{ v.ratio }}%</view>
                </view>
            </view>

            <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
        </view>
    </scroll-view>
</template>

<style lang="scss" scoped>
.card {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
</style>
