<script setup>
import {reactive, ref, watch} from 'vue';
import XNav from "../../components/XNav.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
import dropDown from "../../static/icons/drop-down.svg";
import XDateTime from "../../components/XDateTime.vue";
import XTag from "../../components/XTag.vue";
import dayjs from "dayjs";
import XConfirmModal from "../../components/XConfirmModal.vue";

const showModal = ref(false);
const po = reactive({
    type: 0,
    time: dayjs().format("YYYY-MM"),
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
    month_money: 0,
    all_money: 0,
});
const {loading, pagination, initFetchData} = useTableQuery({
    api: Api.system.getUserIncome,
    parameter: po,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

watch(
    () => [po.type, po.time],
    () => initFetchData(),
    {deep: true}
)
</script>

<template>
    <!--收益记录-->
    <x-nav></x-nav>

    <view class="!flex justify-around bg-[#fff] h-[100rpx]">
        <view :class="['top-filter transition-[500ms] !flex items-center', po.type === 0 ? 'top-filter-cur' : '']"
              @click="po.type=0">
            个人收益
        </view>
        <view :class="['top-filter transition-[500ms] !flex items-center', po.type === 1 ? 'top-filter-cur' : '']"
              @click="po.type=1">
            团队收益
        </view>
        <view :class="['top-filter transition-[500ms] !flex items-center', po.type === 2 ? 'top-filter-cur' : '']"
              @click="() => {po.type=2; showModal=true}">
            活动收益
        </view>
    </view>

    <x-confirm-modal
        width="500rpx"
        title="拉新奖励"
        info="邀请新用户并完成首个任务，可以获得拉新奖励"
        :cancel="false"
        confirmText="知道了"
        v-model:show="showModal">
    </x-confirm-modal>

    <scroll-view
        scroll-y
        @refresherpulling="initFetchData()"
        @scrolltolower="pagination.page++"
        class="h-[calc(100vh-200rpx)]">
        <view class="!flex flex-col gap-[20rpx] p-[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">
                        <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 v-for="item in vo.rows">
                <view class="p-[20rpx] rounded-[12rpx] bg-[#fff] !flex justify-between items-center">
                    <view class="!flex flex-col gap-[24rpx]">
                        <view class="!flex items-center gap-[16rpx]">
                            <view>个人收益</view>
                        </view>
                        <view class="text-[#86909C] test-24r">收益日期:{{
                                dayjs(item.createtime).format('YYYY-MM-DD HH:mm:ss')
                            }}
                        </view>
                    </view>
                    <view class="test-36r font-bold HarmonyOS">
                        +{{ item.money.toFixed(2) }}
                    </view>
                </view>
            </view>

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

<style lang="scss" scoped>
.top-filter-cur {
    color: var(--primary-color);
    position: relative;

    &::after {
        content: '';
        display: block;
        height: 4rpx;
        background-color: var(--primary-color);
        width: 100%;
        position: absolute;
        bottom: 0;
    }
}
</style>
