<template>
	<view class="myBalance-contx">
		 <!-- 知味豆 -->
		<view class="myBalance-contx-h-title flex j-evenly bg-color-white" v-if="opt.type == 'zhiweidou'">
			<block v-for="(item, idx) in heartitleList" :key="idx">
				<view class="my-interest-h-title-tx "  @click="selectTitle(idx)">
					<text>{{item}}</text>
					<view v-if="sleIndex == idx"  class="actives" :style="{'background-color': t('color1')}"></view>
				</view>
			</block>
		</view>
		<scroll-view class="myBalance-contx-box overflow-hd" scroll-y @scrolltolower="scrollData" v-if="opt.type == 'zhiweidou'">
			<view v-if="sleIndex == 0">
				<view class="myBalance-contx-box-h flex flex-colum j-around">
					<view class="flex ">
						<block v-for="(item, tnx) in scrollHearList" :key="tnx">
							<view class="box-h-t color-white border-rius-5" :style="boxHearIndex == tnx ? 'background-color:' + t('color1'):'background-color:#999'" @click="selectHrad(tnx)">{{item}}</view>
						</block>
					</view>
					<view class="flex j-between al-item-center">
						<view class="uni-title flex al-item-center" @click="pickShow">{{y}}年{{m}}月<text class="iconfont icon-xia" style="font-size: 30rpx; position: static;"></text></view>
						<view  class="font-w">本月共收获 <text :style="{'color': t('color1')}">{{' ' + rechargeCount + ' '}}</text>使用<text :style="{'color': t('color1')}">{{' ' + consumeCount}}</text></view>
					</view>
				</view>
				<view style="height:170rpx;width: 100%;"></view>
				<view class="overflow-hd">
					<block v-for="(item, inx) in zwDouList" :key="item.id" >
						<view class="myBalance-contx-box-t flex j-between al-item-center bg-color-white border-rius-5">
							<view class="myBalance-contx-box-tt flex flex-colum">
								<view class="font-w " style="word-break: break-all;">{{item.remark}}</view>
								<view class="fs12 color-gray" style="padding-top: 10rpx;">{{item.createtime}}</view>
							</view>
							<text class="flex1" :style="{'color': t('color1')}" style="text-align: right;">{{item.score > 0 ? '+' + item.score:item.score }}</text>
						</view>
					</block>
				</view>
			</view>
			<view v-else>
				<view class="myBalance-contx-box-h contx-h-2 flex j-between" style="height: auto;">
					<view class="font-w"></view>
					<view class="flex al-item-center" @click="showTimRum">
						<text class="fs12" :style="{'color': t('color1')}">{{timeTex}}</text>
						<text class="iconfont icon-xia" style="font-size: 30rpx; position: static;"></text>
					</view>
				</view>
				<view style="height:50rpx;width: 100%;"></view>
				<view class="">
					<block v-for="(item, inx) in forRecordList" :key="item.id">
						<view v-for="(data,idx) in item.prolist" :key="idx" class="myBalance-contx-tx flex al-item-center bg-color-white border-rius-5">
							<view class="flex" style="width:120rpx;height: 120rpx;" @tap="goto" :data-url="'/activity/scoreshop/product?id=' + data.proid">
								<image class="cosu-img" :src="data.pic" mode=""></image>
							</view>
							<view class="flex flex-colum" style="padding-left: 20rpx;">
								<text class="font-w text-overflow-line">{{data.name}}</text>
								<text class="pt-txt fs12 color-gray">价格：{{data.score_price}}积分</text>
								<text class="pt-txt fs12 color-gray">兑换时间：{{data.createtime}}</text>
							</view>
						</view>
					</block>
				</view>
			</view>
		<nomore v-if="!isData"></nomore>
		</scroll-view>
		 <!-- 余额 -->
		<scroll-view class="myBalance-contx-box " scroll-y @scrolltolower="scrollData" v-if="opt.type == 'balance'">
			<view >
				<view class="myBalance-contx-box-h flex flex-colum j-around">
					<view class="flex ">
						<block v-for="(item, tnx) in scrollHearList" :key="tnx">
							<view class="box-h-t color-white border-rius-5" :style="boxHearIndex == tnx ? 'background-color:' + t('color1'):'background-color:#999'" @click="selectHrad(tnx)">{{item}}</view>
						</block>
					</view>
					<view class="flex j-between al-item-center">
						<view class="uni-title flex al-item-center" @click="pickShow">{{y}}年{{m}}月<text class="iconfont icon-xia" style="font-size: 30rpx; position: static;"></text></view>
						<view class="font-w color-gray">本月共充值 <text>{{' ' + rechargeCount + ' '}}</text>消费<text >{{' ' + consumeCount}}</text></view>
					</view>
				</view>
				<view style="height:170rpx;width: 100%;"></view>
				<view class="overflow-hd">
					<block v-for="(item, inx) in balanceList" :key="item.id">
						<view class="myBalance-contx-box-t flex j-between al-item-center bg-color-white border-rius-5">
							<view class="myBalance-contx-box-tt flex flex-colum">
								<view class="font-w" style="word-break: break-all;">{{item.remark}}</view>
								<view class="fs12 color-gray" style="padding-top: 10rpx;">{{item.createtime}}</view>
							</view>
							<text class="flex1" :style="{'color': t('color1')}" style="text-align: right;">{{item.money > 0 ? '+' + item.money:item.money }}</text>
						</view>
					</block>
				</view>
			</view>
			<nomore v-if="!isData"></nomore>
		</scroll-view>
		
		<!-- 知味豆记录弹框 -->
		<view class="selTim-box bg-color-white border-rius-5" v-show="showTimSe">
			<view class="conm-time-slt ">
				<view class="flex flex-w j-between">
					<block v-for="(item, ndx) in timeTexList" :key="ndx">
						<view class="tet-l border-rius-5" :style="{'background':timeTexIndx == ndx ? t('color1'):'','color':timeTexIndx == ndx ? '#fff':''}" @click="selcTimTxe(item, ndx)">{{item.name}}</view>
					</block>
				</view>
				<view class="cus-time  border-rius-5" :style="{'background-color':timeTexIndx == 5 ? t('color1') : '' , 'color':timeTexIndx == 5 ? '#fff' : ''}">自定义时间</view>
				<view class="flex al-item-center j-between" style="color: #7b7b7b;" >
					<!-- <text class="tet-l border-rius-5">{{timeTex ? timeTex.substr(0, 10) : '开始时间'}}</text> <text class="he-t"></text> <text class="tet-l border-rius-5">{{timeTex ? timeTex.substr(-10, 10) : '结束时间'}}</text> -->
					<view class="example-body" style="margin-top: 30rpx;" @click="dateShow">
							<uni-datetime-picker
							@chang="submit"
								v-model="range"
								type="daterange"
								rangeSeparator="-"
							/>
					</view>
				</view>
			</view>
		</view>
		<!-- 年月弹框 -->
		<view class="pick-box" v-if="showPick"  @touchmove.stop.prevent="moveHandle">
			<view class="pick-t-btn bg-color-white flex j-between">
				<text @click="pickCnl">取消</text>
				<text@click="pickSub">确定</text>
			</view>
			<picker-view v-if="visible" :indicator-style="indicatorStyle"  :value="value" @change="bindChange" class="picker-view">
			            <picker-view-column>
			                <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			            </picker-view-column>
			            <picker-view-column>
			                <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			            </picker-view-column>
			<!--            <picker-view-column>
			                <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			            </picker-view-column> -->
			</picker-view>
		</view>
		<!-- 日历 -->
<!-- 		<mr-calendar ref="calendar" :visible.sync="show" :disabledDate="disabledDate" v-model="dates" type="range"
			:custom-date="customDate" :drawer="drawer" format="YYYY-MM-DD hh:mm:ss" @click="calclick" @change="daychange"
			@submit="submit" title="请选择开始时间和结束时间">
		</mr-calendar> -->
		<loading v-if="loading"></loading>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	 // import mrCalendar from '@/components/mr-calendar/mr-calendar';
	var app = getApp()
	export default {
		// components: {
		// 	mrCalendar
		// },
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				opt: {},
				loading:false,
				isData: true,
				sleIndex: 0, // 头部选中的项
				boxHearIndex:0, // 内容选中的项
				heartitleList: null,
				scrollHearList: null,
				balanceList:[], // 余额数据
				zwDouList: [],  // 知味豆数据
				timeTexList:['本月','上月','去年','今年'],
				timeTex: '本月',
				timeTexIndx: 0,
				showTimSe: false,  // 选项弹框
				pages: 1,
				rechargeCount: '', // 充值
				consumeCount: '', // 消费
				
				// 日历
				show: false,
				drawer: true,
				dates: '',
				customDate: [{
					cellClass: 'custom-cell',
					date: '2022-01-24 22:15:45',
					top: [{
							class: 'custom-cell-top-1',
							text: '①'
						},
						// {
						//  class: 'custom-cell-top-2',
						//  text: '6'
						// }
					]
				}],
				
				// 月份选择
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				showPick: false,
				y: year,
				m: month,
				isnum: false,
				
				
				// 记录
				range:'',
				startTime: '',
				endTime: '',
				forRecordList: [],
			}
		},
		onLoad(options) {
			this.opt = options
			// this.opt.type = 'zhiweidou'
			// console.log(app, ';sdfosdi---')
			if (this.opt.type == 'balance') {
				this.heartitleList = ['收支明细','使用记录']
				this.scrollHearList = ['全部', '充值', '消费']
				this.getMoneylog()
			}else {
				this.heartitleList = ['收支明细','兑换记录']
				this.scrollHearList = ['全部', '已收获', '已使用']
				uni.setNavigationBarTitle({
					title:'我的知味豆'
				})
				this.getScorelog()
			}
			this.setTime()
			this.startTime = this.timeTexList[0].stime.substr(0,10)
			this.endTime = this.timeTexList[0].etime.substr(0,10)
			this.timeTex = this.startTime +" 至 "+ this.endTime
			this.range = [this.startTime,this.endTime]
		},
		watch: {
				datetimesingle(newval) {
					console.log("单选:", this.datetimesingle);
				},
				range(newval) {
					console.log("范围选1:", this.range);
					this.submit(newval)
				},
				datetimerange(newval) {
					console.log("范围选:2", this.datetimerange);
				},
		},
		methods: {
			moveHandle(){
				return true
			},
			pickShow() {
				this.showPick = true
			},
			pickCnl() {
				this.isnum = false
				this.showPick = false
			},
			pickSub() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				if(this.isnum) {
					this.y = this.year
					this.m = this.month
				}else {
					this.y = year
					this.m = month
				}
				this.pages = 1
				this.isData = true
				this.balanceList = []
				this.zwDouList = []
				if( this.opt.type == 'balance') {
					this.getMoneylog()
				}else if(this.opt.type == 'zhiweidou')  {
					this.getScorelog()
				}
				// console.log(this.y,this.m, 'dsjf9999999999999999')
				this.isnum = false
				this.showPick = false
			},
	            bindChange: function (e) {
					this.isnum = true
					// console.log(e, '--------')
	                const val = e.detail.value
	                this.year = this.years[val[0]]
	                this.month = this.months[val[1]]
	                this.day = this.days[val[2]]
	            },
			// 收支 记录切换
			selectTitle(num) {
				this.sleIndex = num
				this.pages = 1
				this.isData = true
				this.forRecordList = []
				// this.boxHearIndex = 0
				this.showTimSe = false
				if(this.opt.type == 'zhiweidou')  {
					if(this.sleIndex == 0) {
						// this.getScorelog()
					}else if(this.sleIndex == 1) {
						this.getForRecord()
					}
				}
			},
			// 内容切换
			selectHrad(num) {
				this.pages = 1
				this.isData = true
				this.balanceList = []
				this.zwDouList = []
				this.boxHearIndex = num
				if( this.opt.type == 'balance') {
					this.getMoneylog()
				}else if(this.opt.type == 'zhiweidou')  {
					this.getScorelog()
				}
				// console.log(this.boxHearIndex, this.opt.type, 'skjdhfkjsdhk')
			},
			// 下拉加载
			scrollData(){
				if(this.isData && this.opt.type == 'balance') {
					this.getMoneylog()
				}else if(this.isData && this.opt.type == 'zhiweidou')  {
					if(this.sleIndex == 0) {
						this.getScorelog()
					}else if(this.sleIndex == 1) {
						this.getForRecord()
					}
					
				}
			},
			// 选中按时间的文本
			selcTimTxe(data, num) {
				this.timeTexIndx = num
				this.forRecordList = []
				this.pages = 1
				this.isData = true
				this.range = [data.stime.substr(0,10),data.etime.substr(0,10)]
				this.timeTex = data.stime.substr(0,10) +" 至 "+ data.etime.substr(0,10);
				// this.endTime = data.etime
				// this.startTime = data.stime
				this.showTimSe = false
				// this.getForRecord()
				// console.log(data,this.endTime,this.startTime, 'hshsh111111117')
			},
			
			// 点击按时间
			showTimRum() {
				this.showTimSe = !this.showTimSe
			},
			
			// 点击显示日历
			dateShow() {
				this.timeTexIndx = 5
				// this.show  = true
			},
			disabledDate() {
				return false
			},
			// 点击确定选中日期
			submit(e) {
				this.forRecordList = []
				this.pages = 1
				this.isData = true
				this.timeTex = e[0] +' 至 '+ e[1]
				this.startTime = e[0] +' 00:00:00'
				this.endTime = e[1] + ' 23:59:59'
				this.showTimSe = false
				this.getForRecord()
				this.showTimSe = false
				// console.log(e, 'eeeequedddd-0-0-0--222222222220')
			},
			calclick(e) {
				// console.log(e, 'calclick')
			},
			daychange(e) {
				// console.log(e, 'daychange')
			},
			
			// 知味豆明细
			getScorelog() {
				this.loading = true
				app.post('ApiMy/scorelog',{pagenum: this.pages,type: this.boxHearIndex, y: this.y,m: this.m}, res => {
					this.loading = false
					this.rechargeCount = res.rechargeCount
					this.consumeCount = res.consumeCount
					// console.log(res, '000055555555')
					if(res.data.length > 0) {
						this.zwDouList = [...this.zwDouList, ...res.data]
						this.pages++
					}else {
						this.isData = false
					}
				})
			},
			// 余额明细
			getMoneylog() {
				this.loading = true
				app.post('ApiMy/moneylog',{pagenum: this.pages,st: this.boxHearIndex, y: this.y,m: this.m}, res => {
					this.loading = false
					this.rechargeCount = res.rechargeCount
					this.consumeCount = res.consumeCount
					if(res.data.length > 0) {
						this.balanceList = [...this.balanceList, ...res.data]
						this.pages++
					}else {
						this.isData = false
					}
					// console.log(res, '000056666666666666666665')
				})
			},
			// 知味豆兑换记录
			getForRecord() {
				app.post('ApiScoreshop/orderlist',{pagenum: this.pages, startTime: this.startTime,endTime: this.endTime}, res => {
					this.loading = false
					if(res.datalist.length > 0) {
						this.forRecordList = [...this.forRecordList, ...res.datalist]
						this.pages++
					}else {
						this.isData = false
					}
					// console.log(res, '000033333333333333332222')
				})
			},
			setTime() {
			        let arr = []
			        let time  = this.numTotime(Number(new Date()))
			        arr.push({name:'本月',stime:time.substr(0,8)+'01 00:00:00',etime:time.substr(0,8)+'30 23:59:59' })
			        time  = this.numTotime(Number(new Date())-2592000000)
			        arr.push({name:'上月',stime:time.substr(0,8)+'01 00:00:00',etime:time.substr(0,8)+'30 23:59:59' })
					time  = this.numTotime(Number(new Date()))
					arr.push({name:'今年',stime:time.substr(0,5)+'01-01 00:00:00',etime:time.substr(0,5)+'12-30 23:59:59' })
					time  = this.numTotime(Number(new Date())-31104000000)
					arr.push({name:'去年',stime:time.substr(0,5)+'01-01 00:00:00',etime:time.substr(0,5)+'12-30 23:59:59' })
					// arr.push({name:'自定义',stime:'',etime:'' })
					this.timeTexList = arr
			},
			numTotime(timestamp) {
				var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			},

		}
	}
</script>

<style lang="scss">
	.flex {display: flex;}
	.flex1 {flex: 1;}
	.j-center {justify-content: center;}
	.j-between {justify-content: space-between;}
	.j-around {justify-content: space-around;}
	.j-evenly {justify-content: space-evenly;}
	.flex-colum{flex-direction: column;}
	.flex-w{flex-wrap: wrap;}
	.al-item-center {align-items: center;}
	.font-w {font-weight: bold;}
	.fs12 {font-size: 24rpx;}
	.color-gray {color: #999;}
	.color-white{color: #fff;}
	.bg-color-white {background-color: #fff;}
	.border-rius-r {border-radius: 800rpx;}
	.border-rius-5 {border-radius: 10rpx;}
	.border-rius-10 {border-radius: 20rpx;}
	.overflow-hd {overflow: hidden;}
	.text-overflow-tx {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
	.text-overflow-line { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;word-wrap: break-word;word-break: break-all;}
	
	.myBalance-contx {
		
		.myBalance-contx-h-title {
				height: 80rpx;
				padding: 20rpx 0;
				.my-interest-h-title-tx {
					padding: 0 10rpx;
					position: relative;
				}
				.actives {
					width: 100%;
					height: 6rpx;
					display: block;
					position: absolute;
					border-radius: 2rpx;
					bottom: -10rpx;
					left: 0;
					// background-color: #EFBD6F;
				}
		}
		
		.myBalance-contx-box {
			padding: 0 20rpx 20rpx;
			width:100%;
			height: calc(100vh - 80rpx);
			position: relative;
			
			.myBalance-contx-box-h {
				padding: 20rpx;
				width: 100%;
				height: 170rpx;
				position: fixed;
				left: 0;
				background-color: #f6f6f6;
				z-index: 22;
				.box-h-t:first-child {
					margin-left: 0;
				}
				.box-h-t {
					width: 130rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					margin-left: 26rpx;
				}
			}
			
			.contx-h-2 {
				height: 80rpx;
			}

			.myBalance-contx-box-t {
				padding: 20rpx;
				box-shadow: 0 0 10rpx 0 #efefef;
				margin-top: 30rpx;
			}
			.myBalance-contx-box-t:first-child {
				margin-top: 0 ;
			}
			
			.myBalance-contx-box-tt {
				width: 55%;
			}
			.myBalance-contx-tx {
				padding: 20rpx;
				box-shadow: 0 0 10rpx 0 #efefef;
				margin-top: 30rpx;
				.cosu-img {
					width: 120rpx;
					height: 120rpx;
				}
				
				.pt-txt {
					padding-top: 6rpx;
				}
			}
		}
		
		// 弹框
		.conm-time-slt {
			padding: 20rpx 20rpx 40rpx;
			
			.tet-l {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f6f6f6;
				margin-top: 30rpx;
				
			}
			
			.cus-time {
				width: 190rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				margin-top: 40rpx;
				background-color: #f6f6f6;
			}
		}
		
		.selTim-box {
			width: 400rpx;
			position: fixed;
			top: 150rpx;
			right: 20rpx;
			z-index: 33;
			box-shadow: 0 0 10rpx 0 #efefef;
			
			.he-t {
				width: 16rpx;
				height: 2rpx;
				margin-top: 30rpx;
				background-color: #ccc;
			}
		}
		
		.teitDate {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0, .4);
			z-index: 888;
		}
		
		.pick-box{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 888;
			background-color: rgba(0,0,0, .4);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			
			.pick-t-btn {
				padding: 20rpx;
				border-radius: 20rpx 20rpx 0 0;
				border-bottom: 2rpx solid #eaeaea;
			}
		}
	}
	
	// pick 组件样式
	uni-picker-view {
	  display: block;
	 
	}
	uni-picker-view .uni-picker-view-wrapper {
	  display: flex;
	  position: relative;
	  overflow: hidden;
	  height: 100%;
	  background-color: white;
	}
	uni-picker-view[hidden] {
	  display: none;
	}
	picker-view {
	  width: 100%;
	  // height: 600upx;
	  height: 560rpx;
	  // margin-top: 20upx;
	   background-color: #FFFFFF;
	}
	.item {
	  line-height: 100upx;
	  text-align: center;
	}
	
</style>
