<template>
	<view class="credit_search">
		<view class="time-wrapper">
			<view v-for="(v, i) in pageData.timeList" :key="i" class="timelistbox">
				<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value == pageData.selected }">
					{{v.label}}
				</view>
				<view class="xian" v-if="v.value == pageData.selected "> </view>
			</view>
		</view>
		<view class="search_status" @tap="pageData.showStatus = !pageData.showStatus" >
			<view class="title">{{pageData.statusTitle}}</view>
			<view class="select">
				<text style="margin-right: 12rpx;">筛选</text>
				<up-icon name="arrow-down-fill" color="#666" :size="14"></up-icon>
			</view>
		</view>
	</view>
	<view :style="{height:pageData.showStatus?statusHeight:0}" class="tranistion statusList  overflow-hide">
		<view @tap="changeNowStatusIndex(index,item)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
			v-for="(item,index) in pageData.statusList" :key="index">
			<view :class="{'color-main':pageData.statusIndex===index}">{{item.label}}</view>
		</view>
	</view>
	
	<view class="content">
		<view class="statistics">
			<view class="statistics_cell" v-for="(item,index) in pageData.payCountList" :key="index">
				<view class="statistics_cell_value"><text style="font-size: 24rpx;">￥</text>{{item.amount}}</view>
				<view class="statistics_cell_label" v-if="index == 0">{{item.label}}<text style="color: #318AFE;">{{item.count}}</text>笔</view>
				<text class="statistics_cell_label" v-else>{{item.label}}</text>
				<text class="statistics_cell_xian" v-if="index < 3"></text>
			</view>
		</view>
		<view class="content_list" v-if="pageData.list.length > 0">
			<view class="list_cell" v-for="(item,index) in pageData.list" :key="item.id">
				<view class="amount">
					<view><view class="payAmount"><text>￥</text>{{item.payAmount || '0'}}</view><text class="amount_label">应付金额</text></view>
					<view><view class="paidAmount"><text>￥</text>{{item.paidAmount || '0'}}</view><text class="amount_label">已付款金额</text></view>
					<view><view class="unpaidAmount"><text>￥</text>{{item.unpaidAmount || '0'}}</view><text class="amount_label">待付款金额</text></view>
				</view>
				<view class="cell_list">
					<view><text class="cell_label">创建日期</text><text class="cell_value">{{item.createTime || '-'}}</text></view>
					<view><text class="cell_label">订单号</text><text class="cell_value">{{item.orderId || '-'}}</text></view>
					<view><text class="cell_label">备注</text><text class="cell_value">{{item.remark || '-'}}</text></view>
					<view><text class="cell_label">付款时间</text><text class="cell_value">{{item.lastPaymentTime || '-'}}</text></view>
				</view>
				<view class="bottomBox">
					<view class="btn record" @tap="toUrl('PAGES_CREDIT_BUYER_REPAYMENTRECORD',{id: pageData.query.creditBuyerId, orderId: item.orderId})">账单付款记录</view>
					<view class="btn payment" @tap="repaymentOpen(item)" :style="{ backgroundColor: pageData.repaymentMethod == 'total' ? '#999' :''}">付款</view>
				</view>
			</view>
		</view>
		<view v-else style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 300rpx;">
			<image src="./bg.png" style="width: 325rpx;height: 335rpx;" mode=""></image>
			<view style="font-size: 28rpx;color: #999;margin-top: 20rpx;">暂无数据</view>
		</view>
	</view>
	<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
	<my-repayment ref="repayment" @affirm="affirm"></my-repayment>
	<view class="shade" v-show="pageData.showStatus" @tap="pageData.showStatus=false"></view>
</template>
<script setup>
	import { onLoad, onShow, onReachBottom  } from '@dcloudio/uni-app';
	import { reactive, ref, computed } from 'vue';
	import go from '@/commons/utils/go.js';
	import myRepayment from './components/my-repayment';
	import datePickerview from './components/my-date-pickerview.vue'
	import dayjs from 'dayjs' //时间格式库
	import { creditBuyerOrderList, creditBuyerOrderSummary } from '@/http/api/buyer.js';
	const pageData = reactive({
		showStatus: false,
		statusList:[
			{ label: '全部状态', value: '' },
			{ label: '未付款', value: 'unpaid' },
			{ label: '部分支付', value: 'partial' },
			{ label: '已付款', value: 'paid' }
		],
		payCountList: [
		    { label: '总交易', amount: 0, count: 0 },
		    { label: '已支付金额', amount: 0 },
		    { label: '待支付金额', amount: 0 },
		    { label: '待支付笔数', amount: 0 }
		],
		timeList: [
			{ label: '今天', value: 'today' },
			{ label: '昨天', value: 'yesterday' },
			{ label: '本周', value: 'circumference' },
			{ label: '本月', value: 'moon' },
			{ label: '自定义', value: 'custom' }
		],
		statusIndex: 0,
		statusTitle: '全部状态',
		selected: '',
		query: {
			page: 1,
			size: 10,
			creditBuyerId: null,
			orderId: null,
			status: ''
		},
		start: "",
		end: "",
		repaymentMethod: 'order',
		list: []
	})
	let statusHeight = computed(() => {
		return 30 * pageData.statusList.length + 40 + 'px'
	})
	let repayment = ref(null)
	const datePicker = ref()
	onLoad((options) => {
		if ( options.id ) {
			pageData.query.creditBuyerId = options.id;
		}
		if ( options.repaymentMethod ) {
			pageData.repaymentMethod = options.repaymentMethod;
		}
		
		getList()
	})
	// 监听，触底事件。 查询下一页
	onReachBottom(() => {
		console.log(pageData.query.page)
		if( pageData.query.page * pageData.query.size < pageData.totalElements) {
			pageData.query.page++
			getList();
		}
	});
	
	
	/**
	 * 获取还款记录列表
	 */
	async function getList() {
		let beginDate, endDate;
		if (pageData.selected == 'today') {
			beginDate = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
			endDate = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
		} else if (pageData.selected == 'yesterday') {
			beginDate = formatTime() + ' 00:00:00'
			endDate = formatTime() + ' 23:59:59'
		} else if (pageData.selected == 'circumference') {
			var now = new Date();
			var nowTime = now.getTime();
			var day = now.getDay();
			var oneDayTime = 24 * 60 * 60 * 1000;
			//显示周一
			var MondayTime = nowTime - (day - 1) * oneDayTime;
			//显示周日
			var SundayTime = nowTime + (7 - day) * oneDayTime;
			beginDate = dayjs(MondayTime).format('YYYY-MM-DD 00:00:00')
			endDate = dayjs(SundayTime).format('YYYY-MM-DD 23:59:59')
		} else if (pageData.selected == 'moon') {
			beginDate = dayjs().startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
			endDate = dayjs().endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
		} else if (pageData.selected == 'custom') {
			let s = pageData.start.substring(0, pageData.start.indexOf(' '))
			let e = pageData.end.substring(0, pageData.end.indexOf(' '))
			beginDate = s + ' 00:00:00'
			endDate = e + ' 23:59:59'
		}
		
		let params = {
			creditBuyerId: pageData.query.creditBuyerId,
			status: pageData.query.status,
			size: pageData.query.size,
			page: pageData.query.page
		}
		if ( beginDate && endDate) {
			params.beginDate = beginDate.substring(0, 10);
			params.endDate = endDate.substring(0, 10);
		}
		creditBuyerOrderList(params).then(res => {
			pageData.list = [...pageData.list,...res.records]
			pageData.totalElements = res.totalRow
		})
		creditBuyerOrderSummary(params).then(res => {
			pageData.payCountList[0].amount = res.payAmountTotal
			pageData.payCountList[0].count = res.count
			pageData.payCountList[1].amount = res.paidAmountTotal
			pageData.payCountList[2].amount = res.unpaidAmountTotal
			pageData.payCountList[3].amount = res.unpaidCount
		})
	}
	function changeTime(e) {
		pageData.selected = e
		if (e == 'custom') {
			datePicker.value.toggle()
		} else {
			pageData.query.page = 1;
			pageData.list = [];
			getList()
		}
	}
	function datePickerConfirm(e) {
		pageData.start = e.start
		pageData.end = e.end
		pageData.query.page = 1;
		pageData.list = [];
		getList()
	}
	
	/**
	 * 状态选择
	 */
	function changeNowStatusIndex(i,item) {
		pageData.statusIndex = i
		pageData.showStatus = false
		pageData.statusTitle = item.label
		pageData.query.status = item.value
		pageData.query.page = 1;
		pageData.list = [];
		getList()
	}
	let repaymentOpen = (item) => {
		if ( pageData.repaymentMethod == 'total' ) {
			return;
		}
		repayment.value.open({creditBuyerId:pageData.query.creditBuyerId,order:item});
	}
	let affirm = (item) => {
		pageData.query.page = 1;
		pageData.list = [];
		getList()
	}
	let toUrl = (url, d) => {
		go.to(url, d)
	}
	// 获取当前时间
	function getdate() {
		const dt = new Date();
		const y = dt.getFullYear();
		const m = (dt.getMonth() + 1 + "").padStart(2, "0");
		const d = (dt.getDate() + "").padStart(2, "0");
		const hh = (dt.getHours() + "").padStart(2, "0");
		const mm = (dt.getMinutes() + "").padStart(2, "0");
		const ss = (dt.getSeconds() + "").padStart(2, "0");
		return `${y}-${m}-${d}`;
	}
	// 获取昨天时间
	const formatTime = () => {
		let strDate = getdate()
		let dateFormat = new Date(strDate);
		dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
		dateFormat = new Date(dateFormat);
		let y = dateFormat.getFullYear()
		let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
		let d = dateFormat.getDate().toString().padStart(2, '0')
		return `${y}-${m}-${d}`
	}
</script>
<style>
	page{
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.credit_search {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 32rpx 0 12rpx 0;
		position: fixed;
		top: 0rpx;
		left: 0;
		z-index: 9;
		.search_status{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			padding: 0 28rpx;
			.title{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
			.select{
				width: 116rpx;
				text-align: center;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #666666;
			}
		}
		
		
		.time-wrapper {
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;
			padding: 16rpx 28rpx 0 28rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #F0F0F0;
			.timelistbox {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
		
				.time-item {
					font-size: 28rpx;
					text-align: center;
					padding-bottom: 22rpx;
					font-weight: 400;
					
				}
		
				.xian {
					width: 40rpx;
					height: 4rpx;
					background-color: #318AFE;
					// position: absolute;
					// left: 16rpx;
					// bottom: 0;
				}
				.time-selected {
					color: #318afe;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		
			
		}
	}
	.statusList {
		position: fixed;
		top: 212rpx;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
		>view{
			margin-bottom: 16rpx;
		}
	}
	.shade{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		margin: auto;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.content {
		padding: 245rpx 28rpx 32rpx 28rpx;
		.statistics{
			padding: 38rpx 0;
			background-color: #fff;
			border-radius: 18rpx;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.statistics_cell{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				.statistics_cell_value{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 5rpx;
				}
				.statistics_cell_label{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.statistics_cell_xian{
					width: 0rpx;
					height: 38rpx;
					border: 1rpx solid #E5E5E5;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					margin: auto;
				}
			}
		}
		.content_list{
			.list_cell{
				display: flex;
				flex-direction: column;
				margin-bottom: 32rpx;
				background-color: #fff;
				border-radius: 18rpx;
				padding: 32rpx 24rpx;
				.amount{
					display: flex;
					align-items: center;
					justify-content: space-around;
					background: #F9F9F9;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-bottom: 32rpx;
					padding: 32rpx 0;
					>view{
						display: flex;
						flex-direction: column;
						align-items: center;
						font-weight: bold;
						font-size: 28rpx;
						.payAmount{
							color: #333333;
						}
						.paidAmount{
							color: #318AFE;
						}
						.unpaidAmount{
							color: #F02C45;
						}
						>view>text{
							font-size: 24rpx;
						}
						.amount_label{
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-top: 5rpx;
						}
					}
				}
				.cell_list{
					display: flex;
					flex-direction: column;
					>view{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 32rpx;
					}
				}
				.bottomBox{
					padding-top: 24rpx;
					border-top: 1rpx solid #E5E5E5;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.btn{
						padding: 8rpx 32rpx;
						font-weight: 400;
						font-size: 24rpx;
					}
					.record{
						border-radius: 28rpx 28rpx 28rpx 28rpx;
						border: 2rpx solid #3189FD;
						color: #3189FD;
						margin-right: 24rpx;
					}
					.payment{
						color: #FFFFFF;
						background: #3189FD;
						border-radius: 28rpx 28rpx 28rpx 28rpx;
					}
				}
			}
			
		}
	}
</style>