<template>
	<!-- 购买换电次数弹窗 -->
	<view v-if="isShowToBuy" class="modal-group">
		<view class="fee-rules-main">
			<view class="fee-rules-top flex-row">
				<view @tap="closeShowToBuy" class="fee-rules-close">
					<img class="close-icon" src="https://qiniu.bms16.com/FtoTEHOJiUf_gjPCJGGHMsAtHI5M" alt="">
				</view>
				<view class="pay-moneu-view">
					<view class="pay-money-text">{{$t('付款金额')}}/￥</view>
					<view class="pay-money"><allPrice :amount="(free_price/100)"/></view>
				</view>
			</view>
			<view class="pay-type-view">
				<view @tap="changePayType" :data-type="1" class="pay-view flex-row">
					<img class="pay-icon" src="https://qiniu.bms16.com/FjtmRXUBGOrPGYOD6wcNhc0Z39IW" alt="">
					<view class="pay-view-text">{{$t('线下支付')}}</view>
					<img class="wx-pay-icon"
						:src="payType==1?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'"
						alt="">
				</view>
				<!-- <view @tap="changePayType" :data-type="0" class="pay-view flex-row">
					<img class="pay-icon" src="https://qiniu.bms16.com/FkmtlfJrmGfAh9n1138KC1WloQkZ" alt="">
					<view class="pay-view-text">微信支付</view>
					<img class="wx-pay-icon"
						:src="payType==0?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'"
						alt="">
				</view>
				<view @tap="changePayType" :data-type="2" class="pay-view flex-row">
					<img class="pay-icon" src="https://qiniu.bms16.com/Fk4YmG_RbdH0LNo1s8qHKDtpCTXl" alt="">
					<view class="pay-view-text">支付宝支付</view>
					<img class="wx-pay-icon"
						:src="payType==2?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'"
						alt="">
				</view> -->
				<!-- <view @tap="changePayType" :data-type="9" class="pay-view flex-row">
					<img class="pay-icon" src="https://qiniu.bms16.com/FiGNLQ5lqhEK5im_mUVgRrE8PJMB" alt="">
					<view class="pay-view-text">钱包余额支付(¥{{wallet_money}})</view>
					<img class="wx-pay-icon"
						:src="payType==9?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/FkmDjxBNZhFGFU5inza2usdtDlX8'"
						alt="">
				</view> -->
			</view>
			<view class="over-btn-view">
				<view class="over-btn flex-row" @tap="toPayOrFreeExchange">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allPrice from '@/component/allPrice/allPrice';
	export default {
		components: {
			allPrice,
		},
		data() {
			return {
				payType:1,
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			free_price:{
				type:Number,
				default:0
			},
			isShowToBuy:{
				type:Boolean,
				default:false
			}
		},
		computed: {
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			changePayType(e) {
				const type = e.currentTarget.dataset.type
				this.setData({
					payType: type
				})
			},
			closeShowToBuy(){
				this.$emit('closeShow')
			},
			toPayOrFreeExchange(){
				this.$emit('payToOrder',this.payType)
			}
		}
	};
</script>
<style scoped>
.modal-group {position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
}
.pay-money-text {
	margin-bottom: 16rpx;
}

.pay-money {
	font-family: DINAlternate, DINAlternate;
	font-weight: bold;
	font-size: 64rpx;
	color: #2A3A5A;
	text-align: center;
}
.fee-rules-main {
	background-color: #ffffff;
	position: fixed;
	width: 100%;
	bottom: 0;
	border-top-left-radius: 32rpx;
	/* 左上角圆角 */
	border-top-right-radius: 32rpx;
	padding: 0 32rpx;
}
.fee-rules-top {
	padding: 32rpx 32rpx 32rpx 32rpx;
	justify-content: center;
	position: relative;
	font-size: 32rpx;
	color: #5E6F90;
}

.fee-rules-close {
	position: absolute;
	right: 30rpx;
	top: 30rpx;
}


.fee-rules-icon {
	width: 40rpx;
	height: 40rpx;
}

.fee-rules-view {
	height: 156rpx;
	background: #EEF6FF;
	border-radius: 16rpx;
	padding: 36rpx 24rpx 32rpx 24rpx;
	margin-bottom: 48rpx;
}

.fee-rules-title {
	margin-right: 16rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #2A3A5A;
}

.fee-rules-money-view {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #2A3A5A;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.fee-rules-money {
	font-family: DIN;
	font-weight: 500;
	font-size: 36rpx;
	color: #0074FF;
}

.open-result-tip {
	width: 100%;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #828DA2;
	text-align: justify;
}

.over-btn-view {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 32rpx 0;
	width: 100%;
	height: 136rpx;
	position: relative;
}

.over-btn {
	height: 80rpx;
	display: flex;
	flex: 1;
	background: #060809;
	border-radius: 40rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	justify-content: center;
	align-items: center;
}

.pay-icon {
	width: 40rpx;
	height: 40rpx;
}

.pay-view {
	margin-bottom: 52rpx;
}

.pay-view-text {
	flex: 1;
	margin-left: 24rpx;
}

.wx-pay-icon {
	width: 32rpx;
	height: 32rpx;
}

.close-view {
	justify-content: flex-end;
	padding: 40rpx;
}

.close-icon {
	width: 32rpx;
	height: 32rpx;
}
</style>
