<template>
    <u-navbar title="" class="u-navbar">
        <view class="slot-wrap" @click="handleToggle">
            <!-- {{ currentDate }}份分销用户 -->
            <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>
    <div class="total-money bg-[#FDF6EC] text-[#ef2c2c] px-4 text-2xl py-2">
        <span>{{ `${currentDate}总新增用户：` }}</span>
        <span class="font-bold">{{ `${monthTotalPeople}人` }}</span>
    </div>
    <view class="list" :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'`">
                <userCard :item="item" />
            </block>
        </z-paging>
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref, unref } from 'vue'
import { storeToRefs } from 'pinia'
import userCard from './components/userCard.vue'
import { useUserStore } from '@/stores/user'
import { useZPaging } from '@/hooks/useCoupon'
import { useToggle } from '@/hooks/useLockFn'
import { getDistributorBindingUser, getDistributorUserByMonth } 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: getDistributorBindingUser
}
const { paging, queryList, refresh } = useZPaging(config.initParams, config.requestApi)

/**选择日期 */
const handleConfirm = res => {
    const { year, month } = res
    currentDate.value = `${year}年${month}月`
    refresh({ date: convertChineseMonthToDate(unref(currentDate)) })
    getUserByMonth()
}
/**每月获取总分销用户 */
const getUserByMonth = async () => {
    try {
        const params = {
            distributorId: unref(userInfo).distributorId,
            date: convertChineseMonthToDate(unref(currentDate))
        }
        const data = await getDistributorUserByMonth(params)
        monthTotalPeople.value = Number(data) ?? 0
    } catch (error) {}
}
onMounted(getUserByMonth)

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