<template>
	<!-- 资金记录 -->
	<view class="record">
		<view class="head">
			<view class="head_l">
				<view class="head_l_1">余额（元）</view>
				<view class="head_l_2">{{countdata.gold}}</view>
			</view>
			<view class="head_r ali-c jus-c" @click="jump_cash">提现</view>
		</view>
		<view class="selecttimes flex ali-c " @tap="showpicker1">
			<text>{{resulttime?resulttime:"选择日期"}}</text>
			<image class="dopicons" src="/static/news/dopicon.png" mode=""></image>
		</view>
		<block v-for="(item,index) of list" :key="index">
			<view class="list">
				<view class="list_01">
					<view class="list_01_l">{{item.addtime}}</view>
					<view class="list_01_r">-{{item.money}}</view>
				</view>
				<view class="list_02">
					<view class="list_01_l">{{item.time}}</view>
					<!-- <view class="list_01_r" v-if="item.state==0">处理中</view>
					<view class=""  v-if="item.state==1">交易成功</view> -->
				</view>
			</view>
		</block>
		
		
		<w-picker
		    mode="yearMonth" 
		    startYear="2018"
		    endYear="2030"
		    :defaultVal="defaultVal1" 
			:selectList="selectList1"
		    :current="true" 
		    @confirm="onConfirm1" 
		    ref="picker1" 
		    themeColor="#ff6900"
		></w-picker>
		
		
		
		
	</view>
</template>

<script>
	import {storeCashList,storeIndex} from "@/utils/api/api.js";
	import wPicker from "@/components/w-picker/w-picker.vue";//下拉选择组件
	
	export default {
		components:{
			wPicker,
			
		},
		data() {
			return {
				list:[],
				isallshow:true,
				page:0,
				
				resulttime:"",//日期
				//时间选择
				defaultVal1:[],
				selectList1:[],
				//resulttime:"",//日期
				countdata:{},
			};
		},
		computed:{
			userinfo(){
				return this.$store.state.userInfo;
			}
		},
		onLoad() {
			this.storeCashListfun();
		},
		onShow() {
			//获取资金统计
			this.storeIndexfun();
			
			
		},
		//滚动到最底部
		onReachBottom(){
			if(this.isallshow){
				this.storeCashListfun();
			}
			
		},
		methods:{
			jump_cash(){
				uni.navigateTo({
					url: '/pages/yjWithdraw/yjWithdraw?type=2',
				});
			},
			async storeCashListfun(){
				this.page++;
				let res = await storeCashList({
					type:"shop",//默认
					mothtime:this.resulttime,
					page:1,//this.page,
				});
				if(res.code==0){
					if(res.data.list){
						if(res.data.list.length!=0){
							this.list = [...this.list,...res.data.list];
							
							this.resulttime = res.data.currentMoth;
						}else{
							this.isallshow = false;
							this.$api.msg("没有更多了哦~");
						}
					}else{
						this.isallshow = false;
						this.$api.msg("没有更多了哦~");
					}
					
				}else{
					this.$api.msg(res.msg);
				}
			},
			//日期选择点击后
			onConfirm1(e){
				this.resulttime = e.result;
				this.list = [];
				this.page = 0;
				this.isallshow = true;
				this.storeCashListfun();
			},
			showpicker1(){
				this.$refs.picker1.show();
			},
			colepicker1(){
				this.$refs.picker1.hide();
			},
			//获取首页的数据
			async storeIndexfun(){
				let res = await storeIndex({
					
				});
				if(res.code==0){
					this.countdata = res.data.counts;//统计的数据
					
				}else{
					this.$api.msg(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss">
.record{font-size: 28upx;
.selecttimes{
		color:#000000;
		font-size: 28upx;
		padding: 24upx;
	}
	.head{background-color: $base_color;padding:40upx 20upx;display: flex;justify-content: space-between;
		.head_l{color: #fff;
			.head_l_2{font-size: 44upx;padding-top: 20upx;}
		}
		.head_r{background-color: #fff;color: #FD6766;height: 60upx;line-height: 60upx;width: 180upx;text-align: center;
		border-radius: 40upx;margin-top: 30upx;}
	}
	.list{margin:30upx 20upx;box-shadow: 0px 0px 20upx #EDEDED;border-radius: 10upx;padding:30upx 20upx;
		.list_01{display: flex;justify-content: space-between;font-size: 32upx;font-weight: 600;padding-bottom: 20upx;}
		.list_02{display: flex;justify-content: space-between;color: #9A9A9A;
			.list_01_r{color: #FC4F50;}
		}
	}
}

	.dopicons{
		width: 48upx;
		height: 48upx;
		margin-left: 15upx;
	}
</style>
