<template>
	<z-paging
		:ref="paging"
		v-model="recordList"
		@query="queryList"
		:min-delay="300"
		use-page-scroll
	>
		<template #top>
			<view
				class="flex items-center justify-between px-50rpx pt-20rpx pb-40rpx"
			>
				<view
					@click="handleAll"
					class="flex justify-center items-center w-150rpx h-64rpx rounded-36rpx"
					:class="!isSelect ? 'bg-primary text-white' : 'bg-#f2f2f2 text-#000'"
				>
					全部
				</view>
				<view
					@click="datetimeShow = true"
					class="flex justify-center items-center w-250rpx h-64rpx rounded-36rpx"
					:class="isSelect ? 'bg-primary text-white' : 'bg-#f2f2f2 text-#000'"
				>
					{{ $u.timeFormat(datetime, 'yyyy-mm') }}
				</view>
			</view>
		</template>

		<view class="px-34rpx relative">
			<view
				class="flex justify-between pb-20rpx border-b-#E5E5E5 border-b-1px mb-20rpx"
				v-for="item in recordList"
				:key="item.id"
			>
				<view class="flex flex-col text-28rpx">
					<text class="">提现金额</text>
					<text class="text-24rpx text-#999">{{
						$u.timeFormat(item.createTime, 'yyyy年mm月dd')
					}}</text>
				</view>
				<view class="text-#FF3939">-{{ item.price || 0 }}</view>
				<!-- <u-text
					text="+100"
					mode="price"
					margin="0 5px 0 0"
					type="tips"
					color="#FF3939"
				></u-text> -->
			</view>
		</view>

		<u-datetime-picker
			:show="datetimeShow"
			v-model="datetime"
			@confirm="handleDatePickerConfirm"
			@cancel="datetimeShow = false"
			:minDate="new Date('2023-01-01').getTime()"
			:maxDate="new Date('2030-12-31').getTime()"
			mode="year-month"
			confirmColor="#FF8CA6"
			@close="datetimeShow = false"
			closeOnClickOverlay
		></u-datetime-picker>
	</z-paging>
</template>

<script setup>
const instance = getCurrentInstance()
const { $u, $api } = instance.proxy
const datetimeShow = ref(false)
const datetime = ref(new Date().getTime())
const recordList = ref([])
const isSelect = ref(false)
const paging = ref(null)
const handleDatePickerConfirm = ({ value }) => {
	datetime.value = $u.timeFormat(value, 'yyyy-mm')
	datetimeShow.value = false
	isSelect.value = true
	getRecordList()
}

const handleAll = () => {
	isSelect.value = false
	getRecordList()
}

const getRecordList = async (pageNum = 1, pageSize = 10) => {
	const res = await $api.cashSubmitRecord({
		time: isSelect.value ? datetime.value : '',
		pageNum,
		pageSize
	})
	if (res.success) {
		recordList.value = res.page?.list || []
		paging.value?.complete(res.page?.list || [])
	} else {
		paging.value?.complete(false)
	}
}

const queryList = (pageNo, pageSize) => {
	getRecordList(pageNo, pageSize)
}

queryList(1, 100)
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
</style>
