<template>
	<view class="Record">
		<view class="record-top">
			<image src="/static/imgs/account-bg.png" mode="widthFix" class="record-bg" />
			<view class="record-top-nav">
				<view :class="['record-top-item',type==='year'?'selectTopItem':'']" 
				@click="selectType('year')">年账单</view>
				<view :class="['record-top-item',type==='month'?'selectTopItem':'']" 
				@click="selectType('month')">月账单</view>
				<view :class="['record-top-item',type==='day'?'selectTopItem':'']" 
				@click="selectType('day')">日账单</view>
			</view>
		
<!-- 			<view class="record-mouth-year">
				<view class="record-type-left">
					<u-picker mode="time" v-model="show" :params="params" 
					@confirm ='confirm' title ='筛选日期' start-year='2021' :end-year='currentYear'/>
					<view @click="show = true">
						{{date?date:'选择日期'}}
						<uni-icons type="arrowdown" color="#fff" size="12" />
					</view>
				</view>
			</view> -->
			<view class="record-mouth-year">
				<view class="record-type-left">
					<u-picker mode="time" v-model="show" :params="params" @confirm ='confirm' title ='筛选日期' start-year='2021' :end-year='currentYear'/>
					<view @click="show = true">
						{{date?date:'选择日期'}}
						<uni-icons type="arrowdown" color="#fff" size="12" />
					</view>
				</view>
				<view class="record-type-right">
					<view :class="['pay_type_item',cointype==='all'?'pay_type_item_select':'']" @click="selectCoinType('all')">全部</view>
					<view :class="['pay_type_item',cointype==='1'?'pay_type_item_select':'']" @click="selectCoinType('1')">待发放</view>
					<view :class="['pay_type_item',cointype==='0'?'pay_type_item_select':'']" @click="selectCoinType('0')">已发放</view>
				</view>
			</view>
			<view class="record-title">当前碎片个数</view>
			<view class="record-money">{{score || '0.00'}} <span>个</span></view>
		</view>
		
		<!-- 列表。。。 -->
		<view class="record-list" v-if="lists.length>0">
			<view class="record-list-item" v-for="(item,index) in lists" :key='index'>
				<image src="/static/imgs/record-icon.png" mode="widthFix" class="record-icon" />
				<view class="">
					<view class="record-list-item-top">
						<view class="title ellipsis-2">{{item.remark}}</view>
						<view class="money" >{{item.amount}}</view>
					</view>
					<view class="record-list-item-date">{{item.created_at}}</view>
				</view>
			</view>
		</view>
		<!-- 无列表 -->
		<no-list v-if="lists.length === 0" name='no-record' txt="没有任何碎片记录 ~ " />
		
		<!-- <u-toast ref="uToast" /> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {userAccoutScores} from '@/apis/interfaces/withdraws';
	export default {
		data() {
			return {
				lists:[],
				has_next_page:true,
				page:1,
				type:'year', // 统计类型day日，month月，year年
				date:new Date().toISOString().slice(0,4), // 日：Y-m-d，月Y-m，年Y
				params: {
					year: true,
					month: false,
					day: false
				},
				show: false, // 显示
				currentDay:new Date().toISOString().slice(0,10),
				currentMonth:new Date().toISOString().slice(0,7),
				currentYear:new Date().toISOString().slice(0,4),
				score:'',
				cointype:'all'
			}
		},
		onShow(){
			this.getList()
		},
		onReachBottom(){
			if (this.has_next_page) {
			  this.page = this.page + 1
			  this.getList()
			} else {
			  this.$refs.uToast.show({
			    title: '吼吼吼~我是有底的~',
			    type: 'primary',
			    duration: 3000
			  })
			}
		},
		methods: {
			// 获取列表
			getList(){
				let data = {
					page:this.page,
					type:this.type,
					date:this.date,
					frozen:this.cointype
				}
				userAccoutScores(data).then(res => {
					console.log(res)
					this.score = res.score
					this.lists = this.lists.concat(res.lists.data)
					this.has_next_page = res.lists.page.has_more
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'primary',
						duration: 3000
					})
				})
			},
			selectCoinType(type){
				if(this.cointype !== type){
					this.cointype = type
					this.reset()
				}
			},
			// 重置
			reset(){
				this.page = 1
				this.lists = []
				this.has_next_page = true
				this.getList()
			},
			// 选择 年  月  日 切换要重置数据
			selectType(type){
				if(this.type !== type){
					switch(type){
						case 'year':
							this.type = type
							this.params= {
								year: true,
								month: false,
								day: false
							}
							this.date = this.currentYear
							this.reset()
							break;
						case 'month':
							this.type = type
							this.params= {
								year: true,
								month: true,
								day: false
							}
							this.date = this.currentMonth
							this.reset()
							break;
						case 'day':
							this.type = type
							this.params= {
								year: true,
								month: true,
								day: true
							}
							this.date = this.currentDay
							this.reset()
							break;
					}
				}
			},
			// 点击确认按钮
			confirm(e){
				let type = this.type
				switch(type){
					case 'year':
						this.date = e.year
						this.reset()
						break;
					case 'month':
						this.date = e.year + '-' + e.month
						this.reset()
						break;
					case 'day':
						this.date = e.year + '-' + e.month + '-' + e.day
						this.reset()
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Record {
		width: 100%;
		min-height: 100vh;
		padding-top: 30rpx;
		background-color: #fff;
	}

	.record-list {
		padding: 20rpx 30rpx;

		.record-list-item {
			padding: 30rpx 0;
			border-bottom: solid 1rpx #f7f7f7;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			.record-icon{
				width: 60rpx;
				margin-right: 20rpx;
			}
			.record-list-item-top {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				width: 600rpx;

				.title {
					font-size: 28rpx;
					width: 600rpx;
					color: #444;
				}

				.money {
					color: #ee4c47;
					font-size: 40rpx;
					font-weight: bold;
					// padding-top: 20rpx;
					position: relative;
					top: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					box-sizing: border-box;
				}
			}

			.record-list-item-date {
				font-size: 26rpx;
				color: #a6a6a6;
				margin-top: 10rpx;
			}
		}
	}
	.record-top {
		width: calc(100% - 60rpx);
		// height: 360rpx;
		background-image: linear-gradient(to right, #7c52fc, #976dff);
		box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #976dff, $alpha: 0.4);
		margin: 0 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		position: relative;
		padding: 30rpx 30rpx 50rpx 50rpx;
		z-index: 1;

		.record-bg {
			position: absolute;
			width: 100%;
			bottom: 0;
			right: 0;
			z-index: 1;
			opacity: .5;
		}

		.record-top-nav {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;

			.record-top-item {
				margin: 40rpx 20rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #fff;
			}
			.selectTopItem{
				border-bottom: solid 4rpx #fff;
			}
		}

		.record-mouth-year {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
			color: #fff;
			font-size: 30rpx;
			// margin-top: 20rpx;

			.record-type-left {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;

				uni-icons {
					margin-left: 4rpx;
				}
			}

			.record-type-right {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				box-sizing: border-box;
				font-size: 24rpx;
			
				.pay_type_item {
					// margin: 0 10rpx;
					padding: 2rpx 20rpx;
					border-radius: 30rpx;
					border: solid 1rpx rgba($color: #000000, $alpha: 0);
				}
				.pay_type_item_select{
					border: solid 1rpx #f7f7f7;
				}
			}
		}

		.record-title {
			font-size: 28rpx;
			color: #fff;
			padding:0 0 20rpx 0;
			margin-top: 30rpx;
		}

		.record-money {
			color: #fff;
			font-size: 60rpx; 
			font-weight: bold;

			span {
				font-size: 24rpx;
				font-weight: 400;
				padding-left: 20rpx;
				margin-right: 4rpx;
			}
		}
	}



</style>
