<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx;"></view>
		<view v-if="false" style="padding: 20rpx;background-color: #ffffff;padding: 20rpx;border-radius: 10rpx;">
			<view class="u-flex">
				<view style="width: 160rpx;font-size: 30rpx;">日期选择</view>
				<view @click="screen.showcalendar = true" style="color: #232323;">
					<text v-if="search.start_date">{{search.start_date}} - {{search.end_date}}</text>
					<text v-else>请选择日期</text>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view>
				<view style="font-size: 30rpx;">充电桩</view>
				<view style="height: 20rpx;"></view>
				<view class="u-flex" style="font-size: 30rpx;">
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.scene == 2 ? 'xkl_cur' : 'xkl_no'" @click="checkscene(2)">全部</view>
					<view style="width: 30rpx;"></view>
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.type == 21 ? 'xkl_cur' : 'xkl_no'" @click="checktype(21)">购买</view>
					<view style="width: 30rpx;"></view>
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.type == 22 ? 'xkl_cur' : 'xkl_no'" @click="checktype(22)">直推奖</view>
					<view style="width: 30rpx;"></view>
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.type == 23 ? 'xkl_cur' : 'xkl_no'" @click="checktype(23)">团队奖</view>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view>
				<view style="font-size: 30rpx;">服务费</view>
				<view style="height: 20rpx;"></view>
				<view class="u-flex" style="font-size: 30rpx;">
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.scene == 3 ? 'xkl_cur' : 'xkl_no'" @click="checkscene(3)">全部</view>
					<view style="width: 30rpx;"></view>
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.type == 31 ? 'xkl_cur' : 'xkl_no'" @click="checktype(31)">投资奖</view>
					<view style="width: 30rpx;"></view>
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.type == 32 ? 'xkl_cur' : 'xkl_no'" @click="checktype(32)">直推奖</view>
					<view style="width: 30rpx;"></view>
					<view style="background-color: #ffffff;border-radius: 12rpx; padding: 10rpx;"
						:class="search.type == 33 ? 'xkl_cur' : 'xkl_no'" @click="checktype(33)">团队奖</view>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="u-flex u-flex-y-center">
				<view style="font-size: 30rpx;">设备ID</view>
				<u--input placeholder="请输入设备id" border="bottom" v-model="search.device_id"></u--input>
			</view>
			<u-divider text=""></u-divider>
			<view class="u-flex">
				<u-button>重置</u-button>
				<u-button type="primary">确定</u-button>
			</view>
		</view>
		<!-- 	<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff;border-radius: 10rpx;">
			<u-grid :border="false" :col="2">
				<u-grid-item :customStyle="{padding:'20rpx 0'}">
					<view style="font-size: 30rpx;">￥100</view>
					<text class="grid-text-mini">收入</text>
				</u-grid-item>

				<u-grid-item :customStyle="{padding:'20rpx 0'}">
					<view style="font-size: 30rpx;">￥100</view>
					<text class="grid-text-mini">支出</text>
				</u-grid-item>
			</u-grid>
		</view> -->

		<view style="height: 20rpx;"></view>
		<!-- <u-subsection :list="tabData.list" keyName="name" :current="tabData.current"
			@change="sectionChange"></u-subsection>
		<view style="height: 20rpx;"></view> -->
		<view>
			<view v-for="(item,index) in walletItems" :key="index"
				style="padding: 20rpx;background-color: #ffffff;padding: 20rpx;border-radius: 10rpx;margin-bottom: 20rpx;">
				<view class="u-flex u-flex-between u-flex-y-center">
					<view style="color: #232323;font-size: 30rpx;">
						<view class="u-flex u-flex-between">
							<view>{{config.type[item.type]}}</view>
						</view>
						<view style="height: 10rpx;"></view>
						<view style="color: #999999;font-size: 26rpx;">{{item.note}}</view>
						<view style="height: 16rpx;"></view>
						<view class="u-flex">
							<view>{{item.created_at}}</view>
							<view style="width: 20rpx;"></view>
							<view style="color: #909399;">{{config.status[item.status]}}</view>
						</view>
						<view style="height: 16rpx;"></view>
					</view>
					<view style="font-size: 28rpx;">
						<text v-if="item.money > 0" style="color: #FF2727;">{{item.money}}</text>
						<text v-else>{{item.money}}</text>
					</view>
				</view>
				<view v-if="item.admin_note">
					<u-line></u-line>
					<view style="height: 14rpx;"></view>
					<view style="font-size: 26rpx;">{{item.admin_note}}</view>
				</view>
				<view v-if="item.account">
					<u-line></u-line>
					<view style="height: 14rpx;"></view>
					<view class="u-flex u-flex-between">
						<view>{{item.account.realname}} </view>
						<view>{{item.account.mobile}} </view>
					</view>
					<view style="height: 10rpx;"></view>
					<view>{{item.subname}}</view>
					<view>{{item.account.num}}</view>
					<view style="height: 10rpx;"></view>
					<view>{{item.account.idcard}}</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" />
		<view style="height: 400rpx;"></view>

		<u-calendar :show="screen.showcalendar" minDate="2024-03-01" mode="range" @confirm="confirmcalendar"
			@close="screen.showcalendar = false" :showTitle="false" :defaultDate="[]"></u-calendar>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				screen: {
					showcalendar: false,

				},
				walletItems: [],
				tabData: {
					list: [{
						"name": "全部",
						"symbol": ""
					}, {
						"name": "冻结",
						"symbol": ""
					}, {
						"name": "收入",
						"symbol": "+"
					}, {
						"name": "支出",
						"symbol": "-"
					}, ],
					current: 0
				},

				loadStatus: 'loadmore',
				search: {
					symbol: '',
					page: 1,
					status: 0,
					start_date: '',
					end_date: '',
					type: '',
					scene: '',
				},
				page: {
					current: 0,
					last_page: 1
				},
				config: null
			}
		},
		onLoad(option) {
			self = this;
			if (option && option.status) {
				self.search.status = option.status;
			}
			self.getWalletItems();
		},
		onPullDownRefresh() {
			self.search.page = 1;
			self.walletItems = [];
			self.getWalletItems();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (!self.pageStatus()) {
				return;
			}
			self.loadStatus = 'loading';
			self.search.page = ++self.search.page;
			self.getWalletItems();
		},
		methods: {
			checktype(type) {
				if (self.search.type == type) {
					self.search.type = '';
				} else {
					self.search.type = type;
				}
			},
			checkscene(scene) {
				if (self.search.scene == scene) {
					self.search.scene = '';
				} else {
					self.search.scene = scene;
				}
			},
			confirmcalendar(e) {
				self.search.start_date = e[0];
				self.search.end_date = e[e.length - 1];
				self.screen.showcalendar = false;
			},
			sectionChange(index) {
				self.tabData.current = index;
				self.search.symbol = self.tabData.list[index].symbol;
				self.search.page = 1;
				self.walletItems = [];
				self.getWalletItems();
			},
			pageStatus() {
				self.loadStatus = 'loadmore';
				if (self.search.page >= self.page.last_page) {
					self.loadStatus = 'nomore';
					return false;
				}
				return true;
			},
			getWalletItems() {
				self.$http.get('/shop/v10/wallet/items', self.search).then(({
					data,
					success
				}) => {

					self.walletItems = self.walletItems.concat(data.items.data);
					self.config = data.config;
					self.page.last_page = data.items.last_page;
					self.pageStatus();

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xkl_cur {
		border: 1px solid #26418A;
		color: #26418A;
	}

	.xkl_no {
		border: 1px solid #999999;
		color: #999999;
	}

	.xkl-com-bg {
		min-height: 100vh;
	}
</style>