<template>
	<view>
		<z-paging ref="paging" :refresher-enabled="showLoading" v-model="dataList" @query="queryList">
			<wd-navbar title="钱包" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
			<view class="p30">
				<image src="/static/qianBeiAs.png" mode="widthFix" style="position: absolute; top: 0; left: 0; width: 100%; z-index: -1"></image>
				<view style="position: relative">
					<image src="/static/qianbaoBei.png" style="width: 690rpx; height: 382rpx; position: absolute; top: 0; left: 0; z-index: -1"></image>
					<view style="padding: 24rpx 30rpx; font-size: 36rpx; font-weight: bold; margin-bottom: 24rpx">我的钱包</view>
					<view style="display: flex; align-items: center; margin-bottom: 14rpx; padding: 0 30rpx">
						<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
						<view style="font-size: 24rpx; color: #666a6d; margin: 0 10rpx">我的余额（元）</view>
						<image @click="toeas" :src="`/static/icons/yan${toeasTrue ? 's' : ''}.png`" style="width: 35rpx; height: 35rpx"></image>
					</view>
					<view
						style="
							font-size: 58rpx;
							font-weight: bold;
							color: #69a24a;
							padding: 0 30rpx;
							margin-bottom: 25rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
						"
					>
						{{ toeasTrue ? '****' : userInfo.money }}
						<view
							@click="toZhuan"
							style="
								color: #8ec287;
								padding: 8rpx 30rpx;
								border-radius: 30rpx;
								font-size: 28rpx;
								background-color: rgba(255, 255, 255, 0.8);
								font-weight: 400;
								display: flex;
								align-items: center;
							"
						>
							<image src="/static/icons/huazhuan.png" style="width: 35rpx; height: 35rpx"></image>
							<text style="margin-left: 10rpx">划转</text>
						</view>
					</view>
					<view
						style="
							width: 690rpx;
							height: 110rpx;
							background: #e9f2e7;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 30rpx;
							margin-bottom: 35rpx;
						"
					>
						<view class="block_wall">
							<view class="block_wall_tit" style="font-size: 24rpx">
								<view>业绩奖励</view>
								<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
							</view>
							<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.performanceReward || 0 }}</view>
						</view>
						<view class="block_wall">
							<view class="block_wall_tit" style="font-size: 24rpx">
								<view>直推奖励</view>
								<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
							</view>
							<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.directReferralReward || 0 }}</view>
						</view>
						<view class="block_wall">
							<view class="block_wall_tit" style="font-size: 24rpx">
								<view>间推奖励</view>
								<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
							</view>
							<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.indirectReferralReward || 0 }}</view>
						</view>
						<view class="block_wall">
							<view class="block_wall_tit" style="font-size: 24rpx">
								<view>特殊奖励</view>
								<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
							</view>
							<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.specialReward || 0 }}</view>
						</view>
					</view>
				</view>

				<!-- 报单业绩 -->
				<view class="wallet-section" v-if="userInfo.branchCompany">
					<view class="section-title">
						<view>
							<text>市场报单业绩</text>
							<text style="font-size: 24rpx; font-weight: 500">(元）</text>
							<image src="/static/icons/wen.png" @click="tishi" style="width: 28rpx; height: 28rpx"></image>
						</view>
						<view style="font-size: 26rpx">合计：{{ rewardReportInfo.total_monthly_performance }}元</view>
					</view>

					<view class="wallet-cards">
						<view class="wallet-item" v-for="(item, index) in rewardReportInfo.money_count" :key="index">
							<text class="amount red">{{ item.money || 0 }}</text>
							<text class="label">{{ item.name }}</text>
							<text class="desc">已招募{{ item.count || 0 }}个</text>
						</view>
						<!-- 						<view class="wallet-item">
							<text class="amount">{{ userInfo.performanceReward || 0 }}</text>
							<text class="label">总代理</text>
							<text class="desc">已招募{{ rewardReportInfo.money_count.generalAgent || 0 }}个</text>
						</view>
						<view class="wallet-item">
							<text class="amount">{{ userInfo.directReferralReward || 0 }}</text>
							<text class="label">加盟店</text>
							<text class="desc">已招募{{ rewardReportInfo.money_count.franchise || 0 }}个</text>
						</view> -->
						<view class="wallet-item">
							<text class="amount">{{ rewardReportInfo.restock_reward || 0 }}</text>
							<text class="label">团队补货</text>
						</view>
					</view>
				</view>

				<view>
					<view style="display: flex; align-items: center; justify-content: space-between">
						<image style="width: 74rpx; height: 34rpx" mode="widthFix" src="/static/icons/zhangdan.png"></image>

						<wd-picker
							@close="showLoading = true"
							@open="showLoading = false"
							:columns="columns"
							v-model="queryPrams.bizType"
							use-default-slot
							@confirm="handleConfirm"
						>
							<view style="display: flex; align-items: center; font-size: 28rpx">
								{{ typeName || '筛选' }}
								<image style="margin-left: 15rpx; width: 35rpx; height: 35rpx" src="/static/icons/xia.png"></image>
							</view>
						</wd-picker>
					</view>

					<view class="wall_list" v-for="(item, index) in dataList" :key="index">
						<view>
							<view style="margin-bottom: 25rpx; font-size: 28rpx">{{ item.title }}</view>
							<view style="font-size: 24rpx; color: #999">
								{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}
							</view>
						</view>
						<view style="font-size: 32rpx; font-weight: bold; color: #799675">￥{{ item.money }}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import api from '@/api/index';
import { Store } from '@/store';
import { onShow } from '@dcloudio/uni-app';
const rewardReportInfo = ref({});

const store = Store();
const paging = ref(null);
const dataList = ref([]);

const columns = ref([]);
const showLoading = ref(true);

const typeName = ref('');

const toeasTrue = ref(false);

const queryPrams = ref({
	bizType: ''
});

const userInfo = computed(
	() =>
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			}
		}
);

onShow(async () => {
	if (userInfo.value.branchCompany) {
		api.rewardReport().then((res) => {
			rewardReportInfo.value = res;
		});
	}
});

import { timeFormat } from '@/utils/fun.js';

const queryList = (pageNo, pageSize) => {
	api.moneyRecord({ pageNo, pageSize, ...queryPrams.value })
		.then((res: any) => {
			columns.value = Object.entries(res.bizType).map(([value, label]) => ({
				value,
				label
			}));
			columns.value.unshift({
				label: '全部',
				value: ''
			});
			paging.value.complete(res.list);
		})
		.catch((res) => {
			paging.value.complete(false);
		});
};

const handleConfirm = (e) => {
	if (!e.value) {
		typeName.value = '';
	} else {
		typeName.value = e.selectedItems.label;
	}
	paging.value.reload();
};

const back = () => {
	uni.navigateBack();
};

const tishi = () => {
	uni.showModal({
		title: '提示',
		content: '每月初结算上月业绩，“团队补货”为团队补货回款，例：本月整个团队总补货回款为20W，则月度团队补货收益为20W×12%=24000元',
		showCancel: false
	});
};

const toeas = () => {
	toeasTrue.value = !toeasTrue.value;
};

const toZhuan = () => {
	uni.navigateTo({
		url: '/pages/wallet/zhaun'
	});
};
</script>

<style lang="scss" scoped>
.block_wall {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	&_tit {
		display: flex;
		align-items: center;
	}
}

.wall_list {
	width: 690rpx;
	height: 118rpx;
	background: #ffffff;
	box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 88, 219, 0.06);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	margin-top: 30rpx;
}

/* 钱包区域 */
.wallet-section {
	background-color: white;
	margin: 0rpx 0 20rpx;
	padding: 30rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 0 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	border-bottom: 1px solid #eee;
	margin-bottom: 20rpx;
}

.wallet-cards {
	display: flex;
	justify-content: space-between;
}

.wallet-item {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
	color: #333;
}

.label {
	font-size: 28rpx;
	color: #666;
}

.amount {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	color: #799675;
}

.desc {
	font-size: 20rpx;
	color: #999;
	margin-top: 6rpx;
}


</style>
