<route lang="jsonc" type="page">{
    "needLogin": true,
    "layout": "default",
    "style": {
		"navigationStyle": "custom"
    }
}</route>

<template>
    <view class="pb-30rpx">
        <view class="order-list">
            <navbar layoutLeft  custom-class='!bg-[#F6F7F8]'>
                <template #left>
                    <view class="ml-24rpx flex items-center">
                        <view class="text-36rpx leading-50rpx text-[#303133] mr-24rpx">我的钱包</view>
                        <view class="text-24rpx leading-34rpx text-[#606266]">简单·便捷·安全</view>
                    </view>
                </template>
            </navbar>
        </view>

        <!-- 背景图 -->
        <view class="mt-20rpx mx-30rpx">
            <view class="wallet-bg">
                <view class="flex items-center ml-72rpx pt-10rpx">
                    <view class="mr-30rpx">平台余额</view>
                    <view class="flex items-center">
                        <view class="flex items-center mr-12rpx">
                            <wd-img width="32rpx" height="32rpx" :src="`${OSS}icon/icon_safe.png`"></wd-img>
                        </view>
                        <view class="font-400 text-24rpx leading-20rpx text-[#B6843C]">保障中</view>
                    </view>
                </view>

                <view class="mt-70rpx ml-68rpx mr-60rpx">
                    <view class="font-400 text-28rpx leading-40rpx text-[#303133]">余额</view>
                    <view class="flex justify-between items-center mt-24rpx">
                        <view>
                            <price-format color="#000" :first-size="48" :second-size="48" :subscript-size="28" :price="userMoney"></price-format>
                        </view>
                        <view class="w-200rpx h-80rpx bg-[#4C9F44] rounded-8rpx font-bold text-28rpx leading-80rpx text-center text-[#fff]" @click="Wallet.handleToRecharge">
                            充值
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 流水明细 -->
        <view class="bg-white rounded-16rpx px-30rpx py-40rpx mt-20rpx mx-30rpx">
            <view class="flex justify-between items-center">
                <view class="text-32rpx leading-44rpx text-[#303133] mb-20rpx">流水明细</view>
                <view class="border-2rpx border-solid border-[#E5E5E5] w-196rpx h-56rpx flex justify-center items-center rounded-8rpx">
                    <view class="text-24rpx leading-34rpx text-[#606266] wall-date">
                        <!-- 2019年5月 -->
                        <wd-datetime-picker v-model="value" :maxDate="Date.now()" type="year-month" @confirm="Wallet.handleConfirmDate"></wd-datetime-picker>
                    </view>
                    <view>
                        <wd-icon name="fill-arrow-down" size="32rpx" color="#BFC2CC"></wd-icon>
                    </view>
                </view>
            </view>
            
            <view>
                <!-- 最后一个元素不显示border -->
                <mescroll-body @init="mescrollInit" @down="downCallback" @up="Wallet.upCallback" :up="upOption">
                    <view 
                        v-for="item in list" :key="item.id"
                        class="h-144rpx leading-144rpx mt-18rpx border-b border-b-solid border-b-[#E5E5E5] flex flex-col justify-center"
                        @click="Wallet.handleToBillDetail(item)">
                        <view class="text-28rpx leading-40rpx text-[#303133] flex justify-between items-center">
                            <view>{{ item.remark }}</view>
                            <view>{{ item.action == 1 ? '+' : '-' }}{{ item.amount }}</view>
                        </view>
                        <view class="text-24rpx leading-34rpx text-[#909399] flex justify-between items-center mt-10rpx">
                            <view>{{ item.create_time }}</view>
                            <view>余额{{ item.after_amount }}</view>
                        </view>
                    </view>
                </mescroll-body>
            </view>
        </view>
    </view>
</template>


<script lang="ts" setup>
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
    import { useUserStore } from '@/store'
	import { getUserInfo, getUserMoneyLog } from '@/api/user'
import { router } from '@/utils/tools'

    const OSS = inject('OSS')
    const userStore = useUserStore()

    /* mescroll */
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
    const downOption = {
		auto: true
	}
	const upOption = {
		auto: true,
		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
	}
	const list = ref<Array<any>>([]) // 茶室列表
    const userMoney = ref<number>(0) // 用户余额
	const canReset = ref<boolean>(false) // 避免onShow重复加载

    // 日期过滤
    const value = ref<number>(Date.now())
    const selectTime = ref<string>('')

    onShow(() => {
        if (canReset.value) {
            list.value = []
            getMescroll().resetUpScroll();
		}
		canReset.value = true

        getUserInfo().then(res => {
            userMoney.value = Number(res.user_money)
        })
    })

    const Wallet = {
        /**
         * 上拉加载
         * @param mescroll 
         */
		upCallback: (mescroll) => {
            const filter = {
				page: mescroll.num, 
				size: mescroll.size,
				month: selectTime.value
			}

            getUserMoneyLog(filter).then((res) => {
				const curPageData = res.list || [] // 当前页数据
				if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
				list.value = list.value.concat(curPageData) //追加新数据
				mescroll.endSuccess(curPageData.length, Boolean(res.more))
			}).catch(() => {
				mescroll.endErr() // 请求失败, 结束加载
			})
		},

        /**
         * 日期筛选
         * @param date 
         */
        handleConfirmDate: (date: {value: number}) => {
            const d = new Date(date.value)
            const year = d.getFullYear()
            const month = d.getMonth() + 1
            selectTime.value = `${year}-${month < 10 ? '0' + month : month}`

            // 切换tab时,重置当前的mescroll
            list.value = []
            getMescroll().resetUpScroll();
        },

        /**
         * 去充值
         */
        handleToRecharge: () => {
            router.navigateTo('/bundle/wallet/recharge')
        },

        /**
         * 跳转对应账单详情
         */
        handleToBillDetail: (item: any) => {
            switch (item.change_type) {
                case 1: // 包间预定
                case 2: // 包间续订
                case 3: // 套餐购买
                case 4: // 开通会员
                    router.navigateTo(`/bundle/wallet/bill?id=${item.id}`)
                    break
                case 5: // 退款
                case 6: // 充值
                    router.navigateTo(`/bundle/wallet/pay-bill?id=${item.id}`)
                    break
            }
        }
    }
</script>

<style lang="scss">
    page {
	    background-color: $cz-page-background;
    }

    .wallet-bg {
        width: 690rpx;
        height: 316rpx;
        background-image: url(#{$OSS}images/wallet/wallet_image1.png);
        background-size: 100% 100%;
    }
    
    .wall-date {
        :deep() {
            .wd-cell {
                padding-left: 0 !important;
                background-color: transparent !important;
            }

            .wd-cell__wrapper {
                padding: 0 !important
            }

            .wd-datetime-picker__arrow {
                display: none !important;
            }
            
            .wd-datetime-picker__action--cancel {
                color: #606266 !important;
            }

            .wd-datetime-picker__action {
                color: #4C9F44;
            }
        }
    }
</style>
