<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"
        :style="{ top: navbarHeight + 'px' }"
    >
        <span>{{ `${currentDate}总分销金额：` }}</span>
        <span class="font-bold">{{ `${monthTotalMoney}元` }}</span>
    </div> -->
    <view class="list">
        <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'`">
                <orderCard :item="item" @navigate="handleNavigate" />
            </block>
        </z-paging>
    </view>
</template>

<script setup lang="ts">
import { ref, unref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import orderCard from './components/orderCard.vue'
import { useUserStore } from '@/stores/user'
import { useZPaging } from '@/hooks/useCoupon'
import { useToggle } from '@/hooks/useLockFn'
import { getDistributorOrder, getDistributorOrderByMonth } from '@/api/distributor_center'
import { convertChineseMonthToDate } from '@/utils/util'
import { router } 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 monthTotalMoney = 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: getDistributorOrder
}
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)) })
    getOrderByMonth()
}
/**跳转地址 */
const handleNavigate = (item: any) => {
    const { orderId } = item
    router(`/bundle/pages/dist_order/index?id=${orderId}`)
}
const getOrderByMonth = () => {
    const params = {
        distributorId: unref(userInfo).distributorId,
        date: convertChineseMonthToDate(unref(currentDate))
    }
    getDistributorOrderByMonth(params).then(res => {
        monthTotalMoney.value = res || 0
    })
}
getOrderByMonth()

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 - 95px);
    // padding-top: 86rpx;
}
</style>
