<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-right">
					<view class="record-title">可提现额度
						<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-money">{{account || '0.00'}} </view>
				</view>

			</view>
			<!-- <view class="record-title">碎片个数</view>
			<view class="record-money"><span>￥</span>{{account || '0.00'}}</view> -->
		</view>

		<!-- 列表。。。 -->
		<view class="ew_lists" v-if="lists.length>0">
			<view style="padding-top: 30rpx;" v-for="(item,index) in lists " :key="index">
				<view class="receiptCode">
					<image class="logo" src="/static/imgs/record-icon.png" mode="widthFix" />
					<view class="title">{{item.way}}</view>
					<span class='status'> {{item.status.status_text}}</span>
				</view>
				<view class="item">
					<view class="left">
						<span>
							提现:￥{{item.quantity}}
							<span class='left-des'>实际到账:￥{{item.take}} 手续费：{{item.tax}}</span>
						</span>
						<span>{{item.create_at}}</span>
					</view>
					<!-- <view class="right">
						<span> {{item.create_at}}</span>
						<span> -</span>
					</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 {
		withdrawsIndexLists
	} 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),
				account: ''
			}
		},
		onLoad() {
			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,
				}
				withdrawsIndexLists(data).then(res => {
					console.log(res)
					this.account = res.all
					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;
					word-break: break-all;
				}

				.money {
					color: #ee4c47;
					font-size: 40rpx;
					font-weight: bold;
					// padding-top: 20rpx;
					position: relative;
					top: 20rpx;
				}
			}

			.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, #e93340, #e93340);
		box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #e93340, $alpha: 0.4);
		margin: 0 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		position: relative;
		padding: 10rpx 50rpx 20rpx 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: column;
				align-items: flex-start;
				justify-content: flex-start;
				box-sizing: border-box;
				font-size: 24rpx;
				flex: 1;

				.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;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			justify-content: space-between;
			box-sizing: border-box;
		}

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

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

	.ew_lists {
		padding: $padding;
		border-top: solid 4rpx #f8f8f8;

		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			border-bottom: solid 1rpx #f8f8f8;
			background-color: #fff;
			padding: 0 0 $padding*0.8 50rpx;

			.left,
			.right {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				box-sizing: border-box;
				margin-top: 10rpx;
			}

			.left {
				font-size: 30rpx;
				padding-top: 10rpx;
				color: $text-price;

				.left-des {
					color: #999;
					font-size: 26rpx;
					margin-left: 20rpx;
				}

				span:nth-child(2) {
					color: #C0C0C0;
					font-weight: normal;
					font-size: 26rpx;
					padding-top: $padding *0.5;
				}
			}

			.right {
				font-size: $title-size-m;
				align-items: flex-end;
				color: #999;

				span:nth-child(1) {
					padding-bottom: $padding*0.5;
				}
			}
		}

		.receiptCode {
			font-size: 32rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;

			.title {
				flex: 1;
			}

			.logo {
				width: 40rpx;
				margin-right: 10rpx;
			}

			.status {
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>
