<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">
				<!-- <image :src="imgObj[vdata.record.deviceType]" mode="scaleToFill" /> -->
				<view class="info-content">
					<view class="info-name">
						<text>{{ vdata.record?.storeName || vdata.record?.deviceName }}</text>
						<view class="icon-close" @tap="popup.close()">
							<image src="/static/iconImg/icon-x.svg" mode="scaleToFill" />
						</view>
					</view>
					<view class="sub-name">{{ vdata.record?.storeId || vdata.record?.deviceNo }}</view>
				</view>
			</view>
			<view class="stat-card">
				<view class="stat-money">
					<view class="stat-title">入账金额 (元)</view>
					<view class="stat-num-title">{{ cal.cert2Dollar(vdata.totalSuccAmt - vdata.totalFeeAmt - vdata.totalRefundAmt) }}</view>
				</view>
				<view class="stat-card-info">
					<view class="stat-item">
						<view class="stat-title">成交订单金额 (元)</view>
						<view class="stat-num">{{ cal.cert2Dollar(vdata.totalSuccAmt) }}</view>
					</view>
					<view class="stat-item">
						<view class="stat-title">成交订单笔数</view>
						<view class="stat-num">{{ vdata.totalSuccNum }}</view>
					</view>
					<view class="stat-item">
						<view class="stat-title">交易成功率</view>
						<view class="stat-num">{{ vdata.succRate }}%</view>
					</view>
					<view class="stat-item">
						<view class="stat-title">交易手续费</view>
						<view class="stat-num">{{ cal.cert2Dollar(vdata.totalFeeAmt) }}</view>
					</view>
					<!-- <view class="stat-item">
						<view class="stat-title">垫资手续费</view>
						<view class="stat-num">---</view>
					</view> -->
					<!-- <view class="stat-item">
						<view class="stat-title">优惠金额</view>
						<view class="stat-num">{{ cal.cert2Dollar(vdata.totalDiscountAmt) }}%</view>
					</view> -->
					<view class="stat-item">
						<view class="stat-title">退款金额 (元)</view>
						<view class="stat-num">{{ cal.cert2Dollar(vdata.totalRefundAmt) }}</view>
					</view>
					<view class="stat-item">
						<view class="stat-title">退款笔数</view>
						<view class="stat-num">{{ vdata.totalRefundNum }}</view>
					</view>
					<!-- <view class="stat-item">
						<view class="stat-title">补贴金额</view>
						<view class="stat-num">---</view>
					</view> -->
					<!-- <view class="stat-item">
						<view class="stat-title">交易成功笔数</view>
						<view class="stat-num">{{ vdata.totalSuccNum }}</view>
					</view>
					<view class="stat-item">
						<view class="stat-title">成功交易金额 (元)</view>
						<view class="stat-num">{{ cal.cert2Dollar(vdata.totalSuccAmt) }}</view>
					</view>
					<view class="stat-item">
						<view class="stat-title">总交易笔数</view>
						<view class="stat-num">{{ vdata.totalNum }}</view>
					</view> -->
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { onMounted, reactive, ref, inject } from 'vue';
import { $getStatInfo, $getStatistic } from '@/http/apiManager.js';
import cal from '@/commons/utils/cal.js';

// 获取弹窗实例
const popup = ref(null);
const vdata = reactive({
	record: {}
});
const imgObj = reactive({
	store: '/static/indexImg/icon-store.svg',
	qr_code: '/pageDevice/static/devIconImg/icon-code.svg',
	scan_pos: '/pageDevice/static/devIconImg/icon-pos.svg',
	auto_pos: '/pageDevice/static/devIconImg/icon-scanPos.svg',
	cash_plugin: '/pageDevice/static/devIconImg/icon-horn.svg'
});
const getInfo = (params) => {
	$getStatInfo(params).then(({ bizData }) => {
		Object.assign(vdata, bizData);
	});
};
const open = (params, record) => {
	const obj = JSON.parse(JSON.stringify(params));
	vdata.record = record;
	if (!vdata.record.deviceType) vdata.record.deviceType = 'store';
	obj.deviceNo = record.deviceNo ? record.deviceNo : '';
	obj.storeId = record.storeId ? record.storeId : '';
	getInfo(obj);
	popup.value.open();
};
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc');
const change = (e) => {
	if (changePageMetaOverflowFunc) {
		changePageMetaOverflowFunc(!e.show);
	}
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.info-wrapper {
	// height: 777rpx;
	border-radius: 32rpx 32rpx 0 0;
	background-color: #fff;
	padding-bottom: 32upx;
}
.info-title {
	display: flex;
	align-items: center;
	padding: 0 40rpx;
	height: 160rpx;
	border-bottom: 1rpx solid #ededed;
	image {
		margin-right: 20rpx;
		width: 100rpx;
		height: 100rpx;
	}
	.info-content {
		flex: 1;
		.info-name {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: 500;
			.icon-close {
				width: 50rpx;
				height: 50rpx;
				border-radius: 10rpx;
				background-color: #f2f2f2;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.sub-name {
			font-size: 26rpx;
			color: #808080;
		}
	}
}
.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;
	}
}
</style>
