<template>
	<JeepayBackground :bgColorStyle="{ background: 'linear-gradient(270deg,#238FFC 0%, #1A66FF 100%)' }">
		<view>
			<JeepayCustomNavbar title="统计报表" textColor="#fff" bgDefaultColor="linear-gradient(270deg,#238FFC 0%, #1A66FF 100%)" backCtrl="back" />
			<!-- 统计时间选择部分 -->
			<view class="screen-time">
				<block v-for="(v, i) in screenList" :key="i">
					<view class="time-main" :class="{ 'active-screen': vdata.selected == v.value }" @tap="selectedTime(v)">{{ v.title }}</view>
				</block>
			</view>
			<template v-if="vdata.selected == 'custom'">
				<view class="time-selection time-custom">
					<image src="/static/iconImg/icon-calendar.svg" mode="scaleToFill" />
					<view class="selection-main" @tap="startTime.show()">{{ vdata.startTime || '请选择开始时间' }}</view>
					<view style="color: #fff">---</view>
					<view class="selection-main" @tap="endTime.show()">{{ vdata.endTime || '请选择结束时间' }}</view>
					<image src="/static/iconImg/icon-arrow-downWhite.svg" mode="scaleToFill" />
				</view>
			</template>
			<view class="time-selection flex-center" v-else @tap="timeSelected.show()">
				<image src="/static/iconImg/icon-calendar.svg" mode="scaleToFill" />
				<view class="selection-main">
					{{ vdata.time }}
					<text v-if="isToDay()">今天</text>
				</view>
				<image src="/static/iconImg/icon-arrow-downWhite.svg" mode="scaleToFill" />
			</view>
			<!-- 统计卡片部分 -->
			<view class="stat-card" @click="go.to('PAGES_PAY_ORDER', {}, 'switchTab')">
				<view class="stat-money">
					<view class="stat-title">入账金额 (元)</view>
					<view class="stat-num-title">{{ vdata.totalFinalAmt }}</view>
					<view class="stat-tips"><uni-icons type="help-filled" size="20" color="#c6c6c6" @tap.stop="openTips()" /></view>
				</view>
				<view class="stat-card-info">
					<block v-for="(v, i) in vdata.infoList" :key="i">
						<view class="stat-item">
							<view class="stat-title">{{ v.title }}</view>
							<view class="stat-num" v-if="v.value == 'totalSuccAmt' || v.value == 'totalFeeAmt' || v.value == 'totalRefundAmt'">
								{{ cal.cert2Dollar(v.text) }}
							</view>
							<view class="stat-num" v-else>
								<template v-if="v.value == 'succRate'">{{ v.text }}%</template>
								<template v-else>{{ v.text }}</template>
							</view>
						</view>
					</block>
				</view>
			</view>
			<!-- 统计选择门店等方式部分 -->
			<view class="stat-selection">
				<block v-for="v in vdata.statList" :key="v.value">
					<view class="stat-item" :class="{ 'active-stat': vdata.statSelected == v.value }" @tap="switchStatType(v.value)">{{ v.title }}</view>
				</block>
			</view>

			<StatInfoCard :dev="vdata.statSelected == 'device'" @sortClick="switchField" @device="switchDevType">
				<JeepayTableList ref="refTable" :reqTableDataFunc="reqTableDataFunc" :searchData="params" :showListNull="false">
					<template #tableBody="{ record }">
						<statCell
							:reality="record.succRate"
							:title="record[vdata.namObj[vdata.statSelected]]"
							:money="money(record)"
							round
							:iconPre="vdata.cardSelected == 'totalSuccAmt' || vdata.cardSelected == 'totalRefundAmt'"
							:iconNext="vdata.cardSelected == 'succRate'"
							:devImage="vdata.statSelected == 'wayCodeType' ? record.wayType : vdata.statSelected == 'store' ? 'store' : record.deviceType"
							@tap="showDetail(params, record)"
						></statCell>
					</template>
				</JeepayTableList>
			</StatInfoCard>
			<!-- 占位 -->
			<view class="store-block"></view>
			<!-- 选择门店按钮 -->
			<view class="store-name" @tap="selectedStore">
				{{ vdata.store?.storeName }}
				<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
			</view>
			<JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayPopupListSelect" />
			<JTipsPopupContent ref="tips" title="统计释义" buttonText="我知道了" @cancel="vdata.flag = true">
				<block v-for="(v, i) in tipsList" :key="i">
					<view class="tips-wrapper">
						<view class="tips-title">{{ v.title }}</view>
						<view class="tips-info">{{ v.info }}</view>
					</view>
				</block>
			</JTipsPopupContent>
			<xp-picker @confirm="dayConfirm" ref="timeSelected" mode="ymd" v-if="vdata.selected == 'date'" />
			<xp-picker @confirm="dayConfirm" ref="timeSelected" mode="ym" v-if="vdata.selected == 'month'" />
			<xp-picker @confirm="dayConfirm" ref="timeSelected" mode="y" v-if="vdata.selected == 'year'" />
			<xp-picker ref="startTime" mode="ymd" @confirm="customTime($event, 'startTime')" />
			<xp-picker ref="endTime" mode="ymd" @confirm="customTime($event, 'endTime')" />
			<!-- 选择门店 -->

			<!-- 详情弹窗 -->
			<statInfoPopup ref="infoPopup" />
			<payInfoPopup ref="payInfo" />
		</view>
	</JeepayBackground>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance, nextTick, computed } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { startAndEndTime } from '@/commons/utils/timeInspect';
import dayjs from 'dayjs';
import { req, reqLoad, $getStatInfo, $getStatistic, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js';
import StatInfoCard from './components/StatInfoCard.vue';
import statInfoPopup from './components/statInfoPopup.vue';
import payInfoPopup from './components/payInfoPopup.vue';
// import StoreCell from './components/StoreCell.vue'
import statCell from './components/statCell.vue';

import cal from '@/commons/utils/cal.js';
import go from '@/commons/utils/go.js';

// 提示框
const tips = ref(null);
// 时间选怎器
const timeSelected = ref(null);
const startTime = ref(null);
const endTime = ref(null);
// 获取表格实例
const refTable = ref(null);
// 获取门店实例
const jeepayPopupListSelect = ref(null);
const infoPopup = ref(null);
const payInfo = ref(null);
const vdata = reactive({
	selected: 'date',
	statSelected: 'store',
	totalSuccNum: '0.00',
	originalData: {}, //原始数据 计算进度条
	infoList: [
		{ title: '退款金额 (元)', money: '13.15', value: 'totalRefundAmt' },
		{ title: '退款笔数', money: '13.15', value: 'totalRefundNum' },
		{ title: '成交订单笔数', money: '13.15', value: 'totalSuccNum' },
		{ title: '成交订单金额 (元)', money: '6365876.15', value: 'totalSuccAmt' },
		{ title: '手续费（元）', money: '13.15', value: 'totalFeeAmt' },
		{ title: '交易成功率', money: '98.25%', value: 'succRate' }
	],
	statList: [
		{ title: '门店统计', value: 'store' },
		{ title: '支付类型统计', value: 'wayCodeType' },
		{ title: '设备统计', value: 'device' }
	],

	namObj: {
		store: 'storeName',
		device: 'deviceName',
		wayCodeType: 'name'
	},
	cardSelected: 'totalSuccAmt',
	store: {
		storeId: '',
		storeName: '全部门店'
	}
});
const screenList = reactive([
	{ title: '日报', value: 'date' },
	{ title: '月报', value: 'month' },
	{ title: '年报', value: 'year' },
	{ title: '自定义', value: 'custom' }
]);
const timeFormat = {
	date: 'YYYY/MM/DD',
	month: 'YYYY/MM',
	year: 'YYYY'
};
const tipsList = reactive([
	{ title: '入账金额：', info: '扣除已退款金额及手续费，入账金额为商户实际到账金额。' },
	{ title: '退款笔数：', info: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次。' },
	{ title: '成交订单金额：', info: '支付成功的订单金额，包含部分退款及全额退款的订单。' },
	{ title: '成交订单笔数：', info: '支付成功的订单笔数，包含已全额退款的订单。' },
	{ title: '交易成功率：', info: '成交笔数与全部订单笔数除得的百分比。' }
]);
// 选择年月日
let orgSelectedTime = undefined;
const selectedTime = (val) => {
	vdata.selected = val.value;
	if (val.value != 'custom') orgSelectedTime = val.value;
	if (val.value == 'custom') {
		vdata.startTime = dayjs(vdata.time).startOf(orgSelectedTime).format(timeFormat['date']);
		vdata.endTime = dayjs(vdata.time).endOf(orgSelectedTime).format(timeFormat['date']);
		return;
	}
	dayConfirm({ value: dayjs(new Date()).format(timeFormat[vdata.selected]) });
};
const params = {
	method: 'store',
	queryDateRange: '',
	sortOrder: 'ascend', //排序默认正序
	sortField: 'totalSuccAmt' //默认字段
};
// 日报时间选择器确认
const dayConfirm = (e) => {
	vdata.time = dayjs(e.value).format(timeFormat[vdata.selected]);
	params.queryDateRange = `customDateTime_${dayjs(e.value).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(e.value).endOf(vdata.selected).format('YYYY-MM-DD HH:mm:ss')}`;
	nextTick(() => {
		getStatList();
		refTable.value.refTable(true);
		// refTable.value.refTable(true);
	});
};
// 自定义时间选择器
const customTime = (e, val) => {
	vdata[val] = dayjs(e.value).format('YYYY/MM/DD');
	if (vdata.endTime) {
		if (!startAndEndTime(vdata.startTime, vdata.endTime)) return;
		params.queryDateRange = `customDateTime_${dayjs(vdata.startTime).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(vdata.endTime)
			.endOf('date')
			.format('YYYY-MM-DD HH:mm:ss')}`;
		getStatList();
		refTable.value.refTable(true);
		// refTable.value.refTable(true);
	}
};
const getStatList = () => {
	$getStatInfo(params).then(({ bizData }) => {
		vdata.originalData = JSON.parse(JSON.stringify(bizData)); //储存原始数据
		// bizData.totalRefundAmt = cal.cert2Dollar(bizData.totalRefundAmt);
		bizData.allAmount = cal.cert2Dollar(bizData.allAmount);
		bizData.fee = cal.cert2Dollar(bizData.fee);
		vdata.totalFinalAmt =
			cal.cert2Dollar(bizData.totalSuccAmt - bizData.totalFeeAmt - bizData.totalRefundAmt) < 0
				? '0.00'
				: cal.cert2Dollar(bizData.totalSuccAmt - bizData.totalFeeAmt - bizData.totalRefundAmt);
		bizData.round = bizData.round + '%';
		vdata.infoList.forEach((v) => {
			v.text = bizData[v.value];
		});
	});
};
//切换字段 切换排序
const switchField = (val) => {
	vdata.cardSelected = val.value;
	params.sortOrder = val.sort;
	params.sortField = val.value;
	refTable.value.refTable(true);
	// refTable.value.refTable(true);
};
const reqTableDataFunc = (params) => {
	return $getStatistic(params);
};
const openTips = () => {
	tips.value.open();
};
// 判断是不是当天
const isToDay = () => {
	return dayjs(vdata.time).format('YYYY/MM/DD') == dayjs(new Date()).format('YYYY/MM/DD');
};
// 计算进度条
const calcReality = (val, totalNum) => {
	return (val / totalNum) * 100;
};

// 计算数据需不需要除以 100
const calcData = (val) => {
	if (vdata.cardSelected == 'totalSuccNum' || vdata.cardSelected == 'totalRefundAmt') return cal.cert2Dollar(val);
	return val;
};
const switchStatType = (val) => {
	vdata.statSelected = val;
	params.method = val;
	nextTick(() => {
		refTable.value.refTable(true);
		// refTable.value.refTable(true);
		// getStatList();
	});
};

// 显示列表明细
function showDetail(params, record) {
	if (vdata.statSelected == 'store') {
		// payInfo.value.open(params, record);
		infoPopup.value.open(params, record);
	} else if (vdata.statSelected == 'device') {
		infoPopup.value.open(params, record);
	}
}

// 切换设备类型
const switchDevType = (val) => {
	params.deviceType = val;
	refTable.value.refTable(true);
	refTable.value.refTable(true);
};
// 获取门店数据
function reqTableDataByStoreFunc(params) {
	return reqLoad.list(API_URL_MCH_STORE_LIST, params);
}
// 选择门店
const selectedStore = () => {
	jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
		if (selected) {
			vdata.store = selected;
			params.storeId = selected.storeId;
			getStatList();
			refTable.value.refTable(true);
		}
	});
};

// 根据类型计算值
const money = (record) => {
	if (vdata.cardSelected == 'totalSuccAmt') {
		return cal.cert2Dollar(record.totalSuccAmt);
	} else if (vdata.cardSelected == 'totalSuccNum') {
		return record.totalSuccNum;
	} else if (vdata.cardSelected == 'totalRefundAmt') {
		return cal.cert2Dollar(record.totalRefundAmt);
	} else {
		return record.succRate;
	}
};

// 进入页面初始化数据
onLoad(() => {
	params.queryDateRange = `customDateTime_${dayjs(new Date()).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(new Date()).endOf('date').format('YYYY-MM-DD HH:mm:ss')}`;
	vdata.time = dayjs().format('YYYY/MM/DD');
	getStatList();
});
onReachBottom(() => {});
</script>

<style lang="scss" scoped>
.screen-time {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 10rpx 30rpx;
	margin-top: 20rpx;
	height: 100rpx;
	border-radius: 20rpx;
	background-color: rgba(255, 255, 255, 0.1);

	.time-main {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		border-radius: 20rpx;
		color: rgba(255, 255, 255, 0.75);
		font-size: 32rpx;
		font-weight: 500;
	}

	.active-screen {
		width: 171rpx;
		background-color: #fff;
		color: $J-color-t21;
	}
}

.time-selection {
	margin-bottom: 10rpx;
	height: 100rpx;

	image {
		width: 40rpx;
		height: 40rpx;
	}

	.selection-main {
		height: auto;
		margin: 0 10rpx 0 20rpx;
		font-size: 30rpx;
		color: #fff;
	}
}

.stat-card {
	position: relative;
	margin: 0 30rpx;
	background-color: $J-bg-ff;
	border-radius: $J-b-r32;

	.stat-title {
		white-space: nowrap;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		color: #a6a6a6;
	}

	.stat-money {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 202rpx;
		box-shadow: 0 50rpx 70rpx -60rpx rgba(107, 130, 153, 0.2);

		.stat-num-title {
			font-size: 60rpx;
			font-weight: 700;
			color: #2980fd;
		}
	}

	.stat-card-info {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 68rpx 50rpx 68rpx;

		.stat-item {
			width: 175rpx;
			margin-top: 50rpx;
			text-align: center;

			.stat-num {
				font-size: 30rpx;
				font-weight: 700;
			}
		}
	}

	.stat-tips {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
}

.stat-selection {
	position: sticky;
	top: 88rpx;
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 46rpx;
	height: 110rpx;
	background-color: #f7f7f7;

	.stat-item {
		flex-grow: 0;
		display: flex;
		align-items: center;
		height: 100%;
		font-size: 27rpx;
		color: $J-color-t80;
		background-color: #f7f7f7;
	}

	.active-stat {
		font-weight: 500;
		color: #2980fd;
	}
}

.tips-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 50rpx;
	height: 170rpx;

	.tips-title {
		margin-bottom: 12rpx;
		font-size: 30rpx;
	}

	.tips-info {
		font-size: 26rpx;
		color: #808080;
	}
}

.store-name {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: 60rpx;
	text-align: center;
	line-height: 100rpx;
	height: 100rpx;
	border-top: 1rpx solid #ededed;
	font-size: 30rpx;
	backdrop-filter: blur(20rpx);
	background-color: rgba(252, 252, 252, 0.85);
}

.store-block {
	height: 90rpx;
}

.time-custom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 60rpx;
}

.store-name {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: 60rpx;
	text-align: center;
	line-height: 100rpx;
	height: 100rpx;
	border-top: 1rpx solid #ededed;
	font-size: 30rpx;
	background-color: rgba(252, 252, 252, 0.85);

	image {
		margin-left: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}
}
</style>
