<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-09-27 14:54:44
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2024-01-04 17:17:21
 * @FilePath: \housekeeping-uniapp\src\bundle\pages\withdraw_distributor_record\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <u-navbar title="" class="u-navbar">
        <view class="slot-wrap" @click="handleToggle">
            <text class="m-[5px]">收益记录</text>
            <u-icon name="arrow-down"></u-icon>
            <u-picker
                mode="time"
                v-model="show"
                :default-time="`${convertChineseMonthToDate(currentDate)}-${day}`"
                :params="params"
                @confirm="handleConfirm"
            ></u-picker>
        </view>
    </u-navbar>
    <view class="record" :style="`height:calc(100vh - ${navbarHeight}px)`">
        <z-paging
            auto-show-back-to-top
            ref="paging"
            v-model="dataList"
            @query="queryList"
            :fixed="false"
            height="100%"
        >
            <block v-for="(item, index) in dataList" :key="`${index} + 'unique'`">
                <card :item="item" />
            </block>
        </z-paging>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, unref, onMounted } from 'vue'
import { apiWithdrawLists } from '@/api/wallet'
import card from './components/card.vue'
import { useZPaging } from '@/hooks/useCoupon'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import { useToggle } from '@/hooks/useLockFn'
import { getDistributorWithDrawList } from '@/api/distributor_center'
import { convertChineseMonthToDate } from '@/utils/util'

const date = `${new Date().getFullYear()}年${new Date().getMonth() + 1}月`
const today = new Date().getDate()
const day = today < 10 ? String(today).padStart(2, '0') : today

const params = {
    year: true,
    month: true,
    day: false,
    hour: false,
    minute: false,
    second: false
}

const dataList = ref<any>([])
const currentDate = ref(date)
const monthTotalPeople = ref(0)

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { show, handleToggle } = useToggle()

const config = {
    initParams: {
        distributorId: unref(userInfo).distributorId,
        date: convertChineseMonthToDate(unref(currentDate))
    },
    requestApi: getDistributorWithDrawList
}
const { paging, queryList, refresh } = useZPaging(config.initParams, config.requestApi)

const getWithdrawRecord = async () => {
    try {
        const params = {
            distributorId: unref(userInfo).distributorId,
            date: convertChineseMonthToDate(unref(currentDate))
        }
        const data = await getDistributorWithDrawList(params)
        monthTotalPeople.value = Number(data) ?? 0
    } catch (error) {}
}

onMounted(getWithdrawRecord)
let navbarHeight = ref(95)
onMounted(() => {
    uni.createSelectorQuery()
        .select('.u-navbar')
        .boundingClientRect(data => {
            navbarHeight.value = (data?.height || 95) as number
        })
        .exec()
})

/**选择日期 */
const handleConfirm = res => {
    const { year, month } = res
    currentDate.value = `${year}年${month}月`
    refresh({ date: convertChineseMonthToDate(unref(currentDate)) })
    // getWithdrawRecord()
}
</script>
<style scoped lang="scss">
.slot-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    margin-left: 110rpx;
    height: 88rpx;
}
.total-money {
    position: fixed;
    left: 0;
    height: 86rpx;
    width: 100%;
}

.list {
    // height: calc(100vh - 88rpx);
    padding-top: 86rpx;
}
</style>
