<template>
	<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change="change" :safe-area="false">
		<view class="info-wrapper">
			<view class="info-title">
				<text>支付方式统计明细</text>
				<view class="icon-close" @tap="popup.close()"><image src="/static/iconImg/icon-x.svg" mode="scaleToFill" /></view>
			</view>
			<StatInfoCard @sortClick="switchField" :fixed="true">
				<JTableList ref="refTable" :reqTableDataFunc="reqTableDataFunc" :initData="false" height="220rpx" :searchData="vdata.params">
					<template #tableBody="{ record }">
						<statCell
							:imgNone="false"
							:title="record.wayCode"
							:money="calcData(record[vdata.cardSelected])"
							:reality="calcReality(record.totalSuccNum, record.totalNum)"
							:round="vdata.cardSelected == 'round'"
							:iconPre="vdata.cardSelected == 'totalFinalAmt' || vdata.cardSelected == 'totalRefundAmt '"
							:iconNext="vdata.cardSelected == 'round'"
						/>
					</template>
				</JTableList>
			</StatInfoCard>
		</view>
	</uni-popup>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref, inject } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { $getStatistic } from '@/http/apiManager.js';
import StatInfoCard from './StatInfoCard.vue';
import statCell from './statCell.vue';
import cal from '@/commons/utils/cal.js';
// 获取弹窗实例
const popup = ref(null);
const refTable = ref(null);
const vdata = reactive({
	cardSelected: 'totalFinalAmt',
	record: {},
	params: {}
});
const open = (params, record) => {
	const obj = JSON.parse(JSON.stringify(params));
	vdata.record = record;
	obj.wayCodeType = record.wayType;
	obj.method = 'wayCode';
	vdata.params = obj;
	popup.value.open();
	nextTick(() => {
		refTable.value.refTable(true);
	});
};
const reqTableDataFunc = (params) => {
	return $getStatistic(params);
};
//切换字段 切换排序
const switchField = (val) => {
	vdata.cardSelected = val.value;
	vdata.params.sortOrder = val.sort;
	vdata.params.sortField = val.value;
	refTable.value.refTable(true);
};
// 计算数据需不需要除以 100
const calcData = (val) => {
	if (vdata.cardSelected == 'totalFinalAmt' || vdata.cardSelected == 'totalRefundAmt') return cal.cert2Dollar(val);
	return val;
};
// 计算进度条
const calcReality = (val, totalNum) => {
	return (val / totalNum) * 100;
};
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc');
const change = (e) => {
	if (changePageMetaOverflowFunc) {
		changePageMetaOverflowFunc(!e.show);
	}
};
onReachBottom(() => {});
defineExpose({ open });
</script>

<style lang="scss" scoped>
.info-wrapper {
	height: 70vh;
	overflow-y: scroll;
	border-radius: 32rpx 32rpx 0 0;
	background-color: #fff;
}
.info-title {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
	height: 110rpx;
	font-size: 30rpx;
	font-weight: 500;
	border-bottom: 1rpx solid #ededed;
	.icon-close {
		width: 50rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background-color: #f2f2f2;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
