<template>
	<view v-if="loading" class="skeleton-container">
		<!-- 收入概览区域骨架 -->
		<view class="income-container" style="padding-top: 80rpx">
			<view class="income-overview">
				<view class="" style="display: flex; align-items: center; justify-content: space-between">
					<view class="">
						<view class="skeleton-income-title"></view>
						<view class="" style="display: flex; align-items: center">
							<view class="skeleton-income-amount"></view>
						</view>
					</view>
					<view class="skeleton-withdraw-button"></view>
				</view>
			</view>

			<!-- 收入明细区域骨架 -->
			<view class="detail-header">
				<view class="skeleton-detail-title"></view>
			</view>
			<!-- 时间选择标签骨架 -->
			<view class="time-tabs">
				<view class="skeleton-tab-item" v-for="(item, index) in 4" :key="index"></view>
			</view>
			<!-- 明细列表骨架 -->
			<view class="detail-list" v-for="(item, index) in 3" :key="index">
				<view class="detail-content">
					<view class="skeleton-icon-placeholder"></view>
					<view class="detail-info">
						<view class="skeleton-order-id"></view>
						<view class="skeleton-order-time"></view>
					</view>
					<view class="">
						<view class="skeleton-order-amount"></view>
						<view class="skeleton-order-balance"></view>
					</view>
				</view>
			</view>
			<!-- 加载更多骨架 -->
			<view class="skeleton-load-more"></view>
		</view>
	</view>

	<!-- 收入概览区域 -->
	<view v-else class="income-container" style="padding-top: 80rpx">
		<view v-if="!istrought" class="">
			<view class="income-overview">
				<view class="" style="display: flex; align-items: center; justify-content: space-between">
					<view class="">
						<text class="income-title">账户余额</text>
						<view class="" style="display: flex; align-items: center">
							<text class="income-amount">¥{{ riderAcc.account }}</text>
						</view>
					</view>
					<u-button class="withdraw-button" @click="Service.GoPage('/pages/order/withdraw')"
						type="primary">立即提现</u-button>
				</view>
			</view>

			<!-- 收入明细区域 -->
			<view class="detail-header">
				<text class="detail-title">收支明细</text>
			</view>
			<!-- 时间选择标签 -->
			<view class="time-tabs">
				<text v-for="(item, index) in timeList" :key="index" @click="changeTab(index)"
					:class="{ active: currentTime == index }" class="tab-item">{{
			    item
			  }}</text>
			</view>
			<view class="detail-list" v-for="(item, index) in accList" :key="index">
				<view class="detail-content">
					<view class="icon-placeholder">
						<image :src="Service.GetIconImg('/static/index/income/order.png')"
							style="width: 55rpx; height: 55rpx" mode=""></image>
					</view>
					<view class="detail-info">
						<text class="order-id">{{ item.name }}</text>
						<text class="order-time">{{ Service.formatDate(item.addTime, 1) }}</text>
					</view>
					<view class="" style="">
						<view class="order-amount" style="text-align: right">
							{{ item.code == '收入' ? '+' : '-' }}{{ item.amount }}
						</view>
						<view class="order-time"> 账户余额 {{ item.balance }} </view>
					</view>
				</view>
			</view>
			<up-loadmore :status="status" />
		</view>
	</view>
	<view v-if="istrought" style=" margin-top: 20rpx; text-align: center; font-weight: bold; font-size: 34rpx;"
		class="">
		信息审核中·请等待审核
	</view>

	<calender ref="calendar" :range="true" :insert="false" @confirm="dataConfirm" />
</template>

<script setup lang="ts">
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	import { ref, onMounted } from 'vue'
	import * as echarts from 'echarts'
	import { Service } from '@/Service/Service'
	import { CNRiderDataService } from '@/Service/CN/CNRiderDataService'
	import { CNRiderOrderService } from '@/Service/CN/CNRiderOrderService'
	import calender from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar'

	let loading = ref(true)
	let calendar = ref(null)
	let timeList = ref(['今日', '本周', '本月', '自定义'])

	let currentTime = ref(0)

	let status = ref('nomore')
	let page = ref(1)
	let riderAcc = ref<any>({})

	let accList = ref<Array<any>>([])

	let timeString = ref('')

	let istrought = ref(false)

	onLoad(() => { })

	onShow(() => {
		getData()
		getIncome()
	})
	
	onReachBottom(()=>{
		getIncomeList()
	})

	onMounted(() => { })

	const getData = () => {
		CNRiderDataService.GetRiderAccInfo().then((res) => {
			loading.value = false
			if (res.code == 0) {
				riderAcc.value = res.data.riderAcc
				istrought.value = false
			}
			else if (res.code == 1008) {
				istrought.value = true
			}
			else {
				Service.Msg(res.msg)
			}
		})
	}

	// 收入列表
	const getIncome = () => {
		status.value = 'loadmore'
		page.value = 1
		accList.value = []
		getIncomeList()
	}

	const getIncomeList = () => {
		if (status.value == 'nomore' || status.value == 'loading') {
			return
		}
		status.value == 'loadmore'
		CNRiderOrderService.GetRiderAccLog(
			currentTime.value == 0 ? '' : currentTime.value == 3 ? timeString.value : String(currentTime.value),
			page.value
		).then((res) => {
			accList.value = [...accList.value, ...res.data.accLog]
			status.value = res.data.accLog == 10 ? 'loadmore' : 'nomore'
			page.value++
		})
	}

	const changeTab = (index : number) => {
		currentTime.value = index
		if (index == 3) {
			calendar.value.open()
			return
		}
		getIncome()
	}

	const dataConfirm = (e) => {
		timeString.value = e.range.data[0] + '_' + e.range.data.slice(-1)
		if (e.range.data.length == 0) {
			timeString.value = e.fulldate
			getIncome()
			return
		}
		getIncome()
	}
</script>

<style scoped>
	.income-container {
		padding: 20rpx;
	}

	/* 收入概览区域 */
	.income-overview {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.income-title {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
	}

	.income-amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #ff4d4f;
	}

	/* 时间标签 */
	.time-tabs {
		display: flex;
		margin-bottom: 10rpx;
	}

	.tab-item {
		font-size: 28rpx;
		color: #666;
		margin-right: 40rpx;
		padding-bottom: 10rpx;
	}

	.tab-item.active {
		color: #1890ff;
		border-bottom: 3rpx solid #1890ff;
	}

	.month-total {
		font-size: 30rpx;
		color: #666;
	}

	/* 收入构成区域 */
	.income-composition {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	/* 饼图占位 */
	.pie-chart-placeholder {
		display: flex;
		align-items: center;
	}

	.pie-chart {
		width: 200rpx;
		height: 200rpx;
		margin-right: 30rpx;
		position: relative;
		overflow: hidden;
	}

	.chart-legend {
		flex: 1;
	}

	.legend-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.legend-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.legend-dot.blue {
		background-color: var(--nav-mian);
	}

	.legend-dot.orange {
		background-color: var(--nav-vice);
	}

	.legend-dot.green {
		background-color: var(--nav-diluted);
	}

	.legend-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 钱包区域 */
	.wallet-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.wallet-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.wallet-title {
		font-size: 28rpx;
		color: #333;
	}

	.wallet-amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff4d4f;
	}

	.withdraw-button {
		margin: 0;
		width: fit-content;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		border-radius: 40rpx;
		background-color: #1890ff;
		color: #fff;
	}

	.withdraw-tip {
		display: block;
		font-size: 22rpx;
		color: #999;
		text-align: center;
	}

	/* 收入明细区域 */
	.income-detail {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.detail-header {
		margin-bottom: 20rpx;
	}

	.detail-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.detail-content {
		display: flex;
		align-items: center;
	}

	.detail-list {
		margin: 15rpx 0 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
	}

	/* 图标占位符 - 黑边白底 */
	.icon-placeholder {
		width: 70rpx;
		height: 70rpx;
		background-color: #e6f7ff;
		border-radius: 8rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.detail-info {
		flex: 1;
	}

	.order-id {
		display: block;
		font-size: 26rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.order-time {
		font-size: 24rpx;
		color: #999;
	}

	.order-amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff4d4f;
	}

	/* 没有更多记录 */
	.no-more {
		text-align: center;
		padding: 40rpx 0;
	}

	.no-more-text {
		font-size: 24rpx;
		color: #999;
	}

	/* 骨架屏样式 */
	.skeleton-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 收入概览骨架 */
	.skeleton-income-title {
		width: 120rpx;
		height: 28rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		margin-bottom: 10rpx;
	}

	.skeleton-income-amount {
		width: 240rpx;
		height: 48rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 8rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	.skeleton-withdraw-button {
		width: 160rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 30rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	/* 明细标题骨架 */
	.skeleton-detail-title {
		width: 150rpx;
		height: 34rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 8rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	/* 时间标签骨架 */
	.skeleton-tab-item {
		width: 80rpx;
		height: 28rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		margin-right: 40rpx;
	}

	/* 明细列表骨架 */
	.skeleton-icon-placeholder {
		width: 70rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 8rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		margin-right: 20rpx;
	}

	.skeleton-order-id {
		width: 200rpx;
		height: 26rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		margin-bottom: 5rpx;
	}

	.skeleton-order-time {
		width: 150rpx;
		height: 24rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	.skeleton-order-amount {
		width: 120rpx;
		height: 32rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		text-align: right;
	}

	.skeleton-order-balance {
		width: 180rpx;
		height: 24rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		text-align: right;
		margin-top: 5rpx;
	}

	/* 加载更多骨架 */
	.skeleton-load-more {
		height: 80rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 40rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		margin: 20rpx;
	}

	/* 骨架屏动画 */
	@keyframes skeleton-loading {
		0% {
			background-position: -100% 0;
		}

		100% {
			background-position: 100% 0;
		}
	}
</style>