<template>
	<view class="ldDetailed-container">
		<!-- 筛选菜单 -->
		<u-dropdown ref="uDropdown" class="filter-dropdown">
			<u-dropdown-item v-model="queryParam.changeType" :title="titType" :options="optionsType" @change="searchHandle()"></u-dropdown-item>
			<u-dropdown-item v-model="timeScope" :title="titScope" :options="optionsScope" @change="searchHandle()"></u-dropdown-item>
		</u-dropdown>
		<scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
			<!-- 列表数据 -->
			<view class="cell-item-con">
				<view class="cell-item" v-for="(item, index) in listdata" :key="index">
					<text class="cell-item-month" v-if="timeScope == 'threeMonth'">{{item.month}}</text>
					<view class="cell-item-main" v-for="(subItem, ind) in item.monthDataList" :key="ind">
						<text :class="['cell-item-pic']">
							<u-image mode="scaleToFill" v-if="subItem.changeType == 'ADD'" shape="circle" width="90rpx" height="90rpx" :src="`/static/tudi.png`"></u-image>
							<u-image mode="scaleToFill" v-else shape="circle" width="90rpx" height="90rpx" :src="`/static/bued.png`"></u-image>
						</text>
						<view class="cell-item-c">
							<text class="cell-item-des">{{subItem.remarks||'--'}}</text>
							<text class="cell-item-date">{{subItem.createDate}}</text>
						</view>
						<view :class="['cell-item-score', subItem.changeType == 'ADD' ? 'black' : 'red']">
							<text>{{subItem.changeType == 'ADD' ? '+'+subItem.changeNum : '-'+subItem.changeNum}}</text>
							<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
						</view>
					</view>
					<view class="nodata" v-if="item.monthDataList.length==0 && status!='loading'">
						<u-empty :text="noDataText" mode="list"></u-empty>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="listdata.length==0 && status!='loading'">
				<u-empty :text="noDataText" mode="list"></u-empty>
			</view>
			<view class="loadmore">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {ldUsedQuery} from '@/api/user.js'
	import getDate from '@/libs/getDate'
	import moment from 'moment'
	export default {
		data() {
			return {
				listdata: [],
				pageNo: 1,  //  当前页码
				pageSize: 10,  //  每页条数
				total: 0,  //  数据总条数
				noDataText: '暂无数据',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				timeScope: 'threeMonth', // 时间类别 1：近三个月 2：本月 3：本月前一月 4：本月前2月
				queryParam: {  //  过滤条件
					changeType: '', // 金币变更类型
				},
				optionsType: [
					{ label: '所有记录', value: '', },
					{ label: '获取记录', value: 'ADD', },
					{ label: '使用记录', value: 'SUB', }
				]
			}
		},
		onShow() {
			this.searchHandle()
		},
		onLoad() {
			this.timeScope = 'threeMonth'
			this.queryParam.changeType = ''
		},
		computed: {
			// 时间过滤条件
			optionsScope(){  //  过滤条件  近3个月
				let arr = [
					{ label: '近3个月', value: 'threeMonth' },
					{ label: '本月', value: 'thisMonth' }
				]
				arr[2] = { label: new Date().getMonth() + '月', value: 'lastMonth' }
				arr[3] = { label: new Date().getMonth()-1 + '月', value: 'lastTwoMonth' }
				return arr
			},
			titType(){  //  过滤条件 所有记录 title
				const row = this.optionsType.find(item => item.value == this.queryParam.changeType)
				return row ? row.label : this.optionsType[0].label
			},
			titScope(){  //  过滤条件 近3个月 title
				const row = this.optionsScope.find(item => item.value == this.timeScope)
				return row ? row.label : this.optionsScope[0].label
			},
			// 查询时间段
			queryDate() {
				var dt = new Date();
				const threeTime = dt.setMonth( dt.getMonth()-2 )
				const quickType = {
				  threeMonth: [moment(getDate.getThreeMonthDays().starttime), moment(getDate.getThreeMonthDays().endtime)],
				  lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)],
				  thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)],
				  lastTwoMonth: [moment(getDate.getLastTwoMonthDays().starttime), moment(getDate.getLastTwoMonthDays().endtime)],
				}
				let queryTime = {
					beginDate: quickType[this.timeScope][0].format('YYYY-MM-DD'),
					endDate: quickType[this.timeScope][1].format('YYYY-MM-DD')
				}
				return queryTime
			},
			
		},
		methods:{
			// 搜索查询
			searchHandle () {
				this.status = "loading"
				let params = Object.assign(this.queryParam,this.queryDate)
				console.log(params,'pppppppp')
				ldUsedQuery(params).then(res => {
					console.log(res,'pppppppp')
					if (res.status == 200) {
						let list = res.data
						// 查询3个月时 数据处理
						if (this.timeScope == 'threeMonth') {
							list.map(item=>{
								let m = moment(item.month).month()+1
								item.month = (m == moment().month()+1) ? '本月' : m+'月'
							})
						}
						this.listdata = list
					} else {
						this.noDataText = res.message
						this.listdata = []
						this.total = 0
					}
					this.status = "loadmore"
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listdata.length < this.total){
					this.pageNo += 1
					this.searchHandle()
				}else{
					uni.showToast({ title: '已经到底了', icon: 'none' })
					this.status = "nomore"
				}
			}
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
		background-color: #fff;
	}
	.ldDetailed-container{
		width: 100%;
		height: 100%;
		.nodata{
			margin: 50upx 0;
		}
		// 筛选菜单
		.filter-dropdown{
			background-color: #fff!important;
			.u-dropdown__menu__item{
				background-color: #fff!important;
			}
		}
		//  列表
		.scroll-con{
			height: calc(100% - 40);
			overflow: auto;
		}
		//  列表样式
		.cell-item-con{
			.cell-item{
				background-color: #fff;
				color: #606266;
				.cell-item-month{
					display: block;
					color: #909399;
					font-size: 26rpx;
					padding: 16rpx 30rpx;
					background-color: #f8f8f8;
				}
				.cell-item-main{
					display: flex;
					align-items: center;
					padding: 20rpx 30rpx;
					border-bottom: 1rpx solid #e9e9e9;
					.cell-item-pic{
						flex-shrink: 0;
						margin-right: 20rpx;
						width: 90rpx;
						height: 90rpx;
						line-height: 90rpx;
						background-color: #FFFFFF;
						border-radius: 50%;
						text-align: center;
					}
					.cell-item-c{
						flex-grow: 1;
						.cell-item-des{
							display: block;
							color: #606266;
							font-size: 30rpx;
							margin-bottom: 10rpx;
						}
						.cell-item-date{
							display: block;
							color: #909399;
							font-size: 24rpx;
						}
					}
					.cell-item-score{
						flex-shrink: 0;
						font-size: 40rpx;
						display: flex;
						align-items: center;
					}
					.black{
						color: #01c9b2;
					}
					.red{
						color: red;
					}
					.orange{
						background-color: #fcbd71;
						color: #fff;
					}
				}
				.cell-item-main:last-child{
					border: none;
				}
			}
		}
	}
</style>
