<template>
	<view>
		<u-navbar  :background="{ background: '#efefef'}"  :border-bottom="true" :is-back="false">
					<view style=" display: flex;flex-direction: row;justify-content: space-between;align-items: center; flex: 1; padding: 0 30rpx; ">
						<view style="width: 150rpx;" @click="goBack()">
							<u-icon name="close" :size="32"></u-icon>
						</view>
						<view @click="addRecord()"  style="color:#404133;font-size: 34rpx;font-weight: bold;text-align: center;">
							<text>账单</text>
						</view>
						<view style="width: 150rpx;">
							<text style="font-size: 34rpx;color: #000000;" @click="serviceCenter()">客服中心</text>
						</view>
					</view>	
		</u-navbar>
		<view>
			<view class="u-flex u-row-between u-col-center u-border-bottom" 
				  style="padding:34rpx 30rpx;">
				<view  @click="openTradeTypePop()" style="background-color:#e3e3e3;height:60rpx;line-height: 50rpx; border-radius: 30rpx;padding: 0rpx 16rpx;">
						<u-icon name="arrow-down-fill" size="16" color="#666666" 
							label="全部账单" label-size="26rpx" label-pos="left" margin-right="6rpx">
						</u-icon>
				</view>
				<view @click="toBillStatistics()">
					<u-icon name="arrow-right"  color="#acb0b7"
							label="统计" label-color="#acb0b7" label-pos="left"></u-icon>
				</view>
			</view>
			<view  style="padding:34rpx 30rpx;background-color:#efefef;width:100%;"
					class="u-flex u-row-between u-col-center">
				<view >
					<u-icon name="arrow-down" size="24" color="#333333"  @click="openTimePicker"
						:label="activeMonthObj.currentYear+'年'+activeMonthObj.currentMonth+'月'" 
						label-color="#333333"  
						label-size="30rpx" label-pos="left" 
						margin-right="6rpx">
					</u-icon>
				</view>
				<view class="u-flex u-row-left u-col-center" style="color:#acb0b7;" @click="openUpdateModel()">
					<view class="u-m-r-16">支出¥{{Number(activeMonthObj.outputAmount).toFixed(2)}}</view>
					<view>收入¥{{Number(activeMonthObj.inputAmount).toFixed(2)}}</view>
				</view>
			</view>		
		</view>
		<view style="background-color:#ffffff;width: 100%;">
			<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
						 :style="'width: 100%;height:'+scrollviewHeight+'px'"
						 :scroll-into-view="scrollIntoViewId"
						 @scrolltoupper="scrolltoUpper"
						 @scrolltolower="scrolltolower">
				<template v-if="activeMonthObj.recordList&&activeMonthObj.recordList.length>0">
					<view   v-for="(record,index) in activeMonthObj.recordList" :key="index" 
							:id="'record_'+index"
							class="u-flex u-row-between u-col-center" 
							style="width: 100%;">
							<view   style="width: 18%;padding: 30rpx 20rpx 30rpx 30rpx;">
								<u-image :src="record.tradeIcon" width="90rpx" height="90rpx"
										  shape="circle" bg-color="#909399"></u-image>
							</view>
							<view  style="width: 82%;padding: 30rpx 30rpx 30rpx 0rpx" 
									class="u-flex u-row-between u-col-center u-border-bottom">
								<view 	@click="showUpdatePop(record,index)">
									<view style="font-size: 34rpx;font-weight: 500;width:400rpx" class="u-line-1">{{record.tradeTitle}}</view>
									<view style="font-size: 28rpx;color: #909399;margin-top:6rpx;">{{formatTimeStr(record.createTime)}}</view>
								</view>
								<view class="u-p-b-40" @click="toDetail(record)">
									<text v-if="record.tradeDirection=='out'" 
											style="color: #000000;font-weight: bold;font-size: 32rpx;">{{"-"+Number(record.tradeValue).toFixed(2)}}</text>
									<text v-if="record.tradeDirection=='in'"
										 style="color: #f29100;font-weight: bold;font-size: 32rpx;">{{"+"+Number(record.tradeValue).toFixed(2)}}</text>
								</view>
							</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<!-- 当前月份统计信息修改 -->
		<u-popup   v-model="currentMonthPopFlag" mode="center" :mask-close-able="false" negative-top="200" closeable>
			<view class="u-p-30">
				<view class="u-m-t-30">
					<u-form :model="activeMonthObj" ref="activeMonthObj" label-width="150rpx">
						<u-form-item label="当前年度">
							<u-input v-model="activeMonthObj.currentYear" type="number" placeholder="月份"/>
						</u-form-item>
						<u-form-item label="当前月份">
							<u-input v-model="activeMonthObj.currentMonth" type="number" placeholder="月份"/>
						</u-form-item>
						<u-form-item label="当月收入">
							<u-input  v-model="activeMonthObj.inputAmount" type="number" placeholder="本月收入"/>
						</u-form-item>
						<u-form-item label="当月支出">
							<u-input  v-model="activeMonthObj.outputAmount" type="number" placeholder="本月支出"/>
						</u-form-item>
					</u-form>
				</view>
				<view class="u-p-30">
					<view>
						<u-button type="success" @click="submitUpdate">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		 <!-- 月份查询筛选-->
		<u-picker mode="time" v-model="timePickerShow" :params="timeParams"
			confirm-color="#3c2e55" confirm-text="确定" @confirm="timePickerConfirm"
			:show-time-tag="false"></u-picker>
			
		<!-- 新增或者修改时间选择器 -->
		<!-- 消费类型 -->	
		<u-popup v-model="tradeTypePopFlag" mode="bottom"
				 :border-radius="16" close-icon-color="#000000"
				 :closeable="true" 	close-icon-pos="top-left">
				<view style="width: 100%;padding: 20rpx;background-color: #f0f0f0;">
					<view style="margin-top: 20rpx;  text-align: center;font-weight: bold;">选择筛选项</view>
					<view style="margin-top: 50rpx;text-align: center;padding: 0rpx 20rpx;margin-bottom: 100rpx;">
						<u-row>
							<u-col :span="4" v-for="(tradeTypeItem,index) in tradeTypeList" :key="index">
								<view  v-if="index==4" 
									 class="trade-type trade-type-4" 
									 :class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-4 trade-type-active':'trade-type trade-type-4'"
									 @click="selectTradeType(tradeTypeItem)">
									{{tradeTypeItem.title}}
								</view>
								<view v-else @click="selectTradeType(tradeTypeItem)"
									:class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-active':'trade-type'">
									{{tradeTypeItem.title}}
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
		</u-popup>	
	</view>
</template>

<script>
	import billList from '@/util/billList';
	export default {
		data() {
			return {
				scrollviewHeight:0,
				scrollIntoViewId:'',
				currentMonthIndex:new Date().getMonth()+1, //当前月份
				currentYearIndex: new Date().getFullYear(),//当期年份
				currentMonthPopFlag:false,//当前月份信息修改弹窗控制器
				//当前月份数据
				activeMonthObj:{
					currentYear:2022,
					currentMonth:5,
					outputAmount:0.00,
					inputAmount:0.00,
					recordList:[]
				},
				timePickerShow:false, //时间选择器开关
				//时间参数
				timeParams:{
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				tradeTypePopFlag:false,
				tradeTypeList:[
					{"title":"全部",value:"0"},{"title":"红包",value:"1"},{"title":"转账",value:"2"},
					{"title":"群收款",value:"3"},{"title":"二维码收付款",value:"4"},{"title":"商户消费",value:"5"},
					{"title":"充值提现",value:"6"},{"title":"信用卡还款",value:"7"},{"title":"有退款",value:"8"},	
				],
				currentTradeType:{title:'全部',value:"0"}
			};
		},
		onLoad:function(){
			let that=this;
			this.scrollviewHeight= that.$u.sys().windowHeight*0.76; // 0.828
			this.getRecordList();
		},
		methods:{
			goBack(){
				uni.navigateBack();	
			},
			openTimePicker:function(){
				let that=this;
				that.timePickerShow=true;	
			},
			timePickerConfirm:function(obj){
				let year=obj.year;
				let monthStr=obj.month;
				let month= (new Date(obj.timestamp*1000)).getMonth()+1;
				console.log("选择的月份",month);
				this.currentMonthIndex=month;
				this.currentYearIndex=year;
				this.getRecordList();
			},
			//获取缓存记录
			getRecordList:function(){
				this.activeMonthObj.recordList=[];
				this.activeMonthObj.inputAmount=0.00;
				this.activeMonthObj.outputAmount=0.00;
				this.activeMonthObj.currentMonth=this.currentMonthIndex;
				this.activeMonthObj.currentYear=this.currentYearIndex;
				let month=this.currentMonthIndex<10?("0"+this.currentMonthIndex):this.currentMonthIndex;
				let param={
					timeDuring:this.currentYearIndex+"-"+month,
					tradeType:this.currentTradeType.value=='0'?'':this.currentTradeType.value,
				}
				console.log("获取账单记录参数",param);
				this.activeMonthObj=JSON.parse(JSON.stringify(billList.tempBillList[0]));
				console.log("this.activeMonthObj",this.activeMonthObj);
				this.$forceUpdate();
				return;
				/* this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
					if(res.code==200&&res.data){
						this.activeMonthObj.recordList=res.data.recordList;
						this.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
						this.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
						console.log("获取账单记录结果",this.activeMonthObj);
					}else{
						
					}
				}) */
			},
			//打开修改弹窗
			openUpdateModel:function(){
				this.currentMonthPopFlag=true;	
			},
			//提交修改
			submitUpdate:function(){
				this.currentMonthPopFlag=false;	
			},
			//打开新增记录弹窗
			addRecord:function(){
				let that=this;
				that.addPopFlag=true;
			},
			serviceCenter(){
				this.$u.route({
					url:'/pages/tabbar/my/service/my-bill-question',
				});
			},
			toDetail:function(record){
				let that=this;
				this.$u.route({
					url:'/pages/tabbar/my/service/my-bill-detail',
					params:{
						record:encodeURIComponent(JSON.stringify(record))
					}
				});
			},
			scrolltoUpper:function(){
				this.currentMonthIndex=new Date().getMonth()+1; //当前月份
				this.currentYearIndex=new Date().getFullYear();//当期年份
				this.getRecordList();
			},
			//监听滚动
			scrolltolower:function(){
				let that=this;
				console.log("监听到页面滚动到底部");
				this.currentMonthIndex=this.currentMonthIndex-1;
				let month=this.currentMonthIndex<10?"0"+this.currentMonthIndex:this.currentMonthIndex;
				let param={
					timeDuring:this.currentYearIndex+"-"+month,
					tradeType:this.currentTradeType.value=='0'?'6':this.currentTradeType.value,
				}
				console.log("获取上一个月的账单记录参数",param);
				that.getRecordList();
				return;
				this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
					console.log("获取上一个月的账单记录结果",res);
					if(res.code==200&&res.data){
						let recordList=res.data.recordList;
						if(recordList!=null&&recordList.length>0){
							that.activeMonthObj.recordList=that.activeMonthObj.recordList.concat(recordList);
							that.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
							that.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
							that.activeMonthObj.currentMonth=this.currentMonthIndex;
						}
					}else{
						this.currentMonthIndex=this.currentMonthIndex+1;
					}
				})
			},
			formatTimeStr:function(timeStr){
				//console.log("timeStr",timeStr);
				timeStr=timeStr.replace(/-/g,"/");
				let cdate=new Date(timeStr);
				let month= cdate.getMonth()+1;
				//console.log("month",month);
				let day=cdate.getDate();
				let hour= cdate.getHours();
				let min=cdate.getMinutes();
				let monthStr=month+"月";
				let dayStr=day+"日";
				let hourStr=hour+":";
				let minStr=min;
				/* if(month<10){
					monthStr="0"+month+"月";
				}
				if(day<10){
					dayStr="0"+day+"日";
				} */
				if(hour<10){
					hourStr="0"+hour+":";
				}
				if(min<10){
					minStr="0"+min;
				}
				let formatStr=monthStr+dayStr+" "+hourStr+minStr;
				//console.log("formatStr",formatStr);
				return formatStr;
			},
			openTradeTypePop:function(){
				let that=this;
				that.tradeTypePopFlag=true;
			},
			selectTradeType:function(tradeItem){
				this.currentTradeType=tradeItem;
				this.tradeTypePopFlag=false;
				this.getRecordList();
			},
			toBillStatistics:function(){
				this.$u.route({
					url:'/pages/tabbar/my/service/my-bill-statistics',
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-picker-view{
		background-color: #f3f4f6;
	}
	.trade-type{
		height: 120rpx;
		padding:40rpx 30rpx 0rpx 30rpx;
		margin-bottom: 16rpx;
		background-color: #e2e2e2;
		border-radius: 10rpx;
		text-align: center;
		color: #000000;
	}
	.trade-type-4{
		padding:25rpx 30rpx 0rpx 30rpx;
	}
	.trade-type-active{
		background-color: rgb(232,248,238);
		border:1rpx solid #18b566;
		font-weight: bold;
		color:#18b566;
	}
	
</style>
<style>
	page{
		background-color: #efefef;
	}

</style>