<template>
	<view class="pay-wrapper">
		<view class="pay-left">
			<template v-if="imgNone">
				<image v-if="devImage" :src="imgObj[devImage]" mode="scaleToFill" />
				<image v-else :src="imgUrl" mode="scaleToFill" />
			</template>
			<view>{{ imgUrl }}</view>
			<view class="pay-title single-text-beyond">{{ title }}</view>
		</view>
		<view class="pro-bar" :style="{ '--bar-width': reality + '%' }" v-if="round"></view>
		<view class="pay-right">
			<text v-show="iconPre">￥</text>
			{{ money }}
			<text v-show="iconNext">%</text>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';

const props = defineProps({
	reality: [String, Number], //实际进度
	imgUrl: { type: String }, //左侧图片
	title: { type: String }, //左侧标题
	money: [String, Number], //右侧金额
	round: { type: Boolean, default: false }, //是否展示进度条
	iconPre: { type: Boolean, default: false }, //金钱
	iconNext: { type: Boolean, default: false }, // 百分比
	devImage: { type: String }, //如果设备
	imgNone: { type: Boolean, default: true } //不需要图片
});
const imgObj = reactive({
	store: '/static/indexImg/icon-store.svg', //门店
	qr_code: '/static/devIconImg/icon-code.svg',
	scan_pos: '/static/devIconImg/icon-pos.svg',
	auto_pos: '/static/devIconImg/icon-scanPos.svg',
	cash_plugin: '/static/devIconImg/icon-horn.svg',
	face_app: '/static/devIconImg/icon-face-1.svg', //刷脸设备
	ALIPAY: '/static/payImg/icon-zfb.svg', //支付宝
	OTHER: '/static/payImg/icon-qt.svg', //其他
	DCEPPAY: '/static/payImg/icon-qt.svg', //数字人民币
	UNIONPAY: '/static/payImg/icon-yl.svg', //银联
	WECHAT: '/static/payImg/icon-wx.svg', //微信
	YSFPAY: '/static/payImg/icon-ysf.svg' //云闪付
});
</script>

<style lang="scss" scoped>
.pay-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	height: 100rpx;
	.pay-left {
		flex: 1;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		image {
			margin-right: 10rpx;
			width: 40rpx;
			height: 40rpx;
		}
		.pay-title {
			width: 178rpx;
		}
	}
	.pro-bar {
		flex-grow: 0;
		flex-shrink: 0;
		position: relative;
		width: 100rpx;
		height: 6rpx;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 6rpx;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: var(--bar-width);
			height: 100%;
			border-radius: 6rpx;
			background: $jeepay-bg-primary;
		}
	}
	.pay-right {
		flex: 1;
		text-align: right;
		font-size: 30rpx;
		font-weight: 500;
	}
}
</style>
