<template>
	<view class="deposit-channel-container">
		<view class="flex-wrap flex-sbetween">
			<view class="select-btn-container" v-for="(item, index) in depositStore.rechargeTypeList" :key="index"  @click.stop="handleSelect(item)">
				<view class="select-btn">
					<theme-image v-if="item.name === depositStore.onlinePaymentData.depositMethodName" class="select-btn-bg-img" src="@/static/wallet/icon-btn-bg-select.png" mode="aspectFill" />
					<theme-image v-else src="@/static/wallet/icon-btn-bg.png" class="select-btn-bg-img" mode="aspectFill" />
					<view class="flex-acenter cfff select-btn-text">
						<theme-image :src="item.iconUrl" mode="aspectFit" class="flex-shrink-0" style="width: 50rpx; height: 50rpx"></theme-image>
						<view  class="flex-1 flex-scenter">
							<view>{{ item.name }}</view>
						</view>
						<view style="width: 50rpx;"></view>
					</view>
					<theme-image v-if="item.name === depositStore.onlinePaymentData.depositMethodName" class="select-btn-check-img" src="@/static/wallet/icon-btn-select.png" mode="scaleToFill" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { useDepositStore } from '@/store/useDepositStore'

	const depositStore = useDepositStore()
	const emit = defineEmits(['change'])
	
	const handleSelect = (item) => {
		depositStore.onlinePaymentData.depositMethod = item.type
		depositStore.onlinePaymentData.depositMethodName = item.name
		emit('change', item)
	}
</script>

<style lang="scss" scoped>
	.deposit-channel-container {
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
		
		.select-btn-container {
			padding: 0rpx 7rpx;
		}
		
		.select-btn {
			width: 330rpx;
			height: 90rpx;
			position: relative;
			overflow: hidden;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			
			.select-btn-bg-img {
				width: 100%;
				height: 100%;
			}
			
			.select-btn-text {
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				right: 0rpx;
				bottom: 0rpx;
				z-index: 2;
				font-size: 30rpx;
				padding: 0rpx 30rpx;
			}
			
			.select-btn-check-img {
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				right: 0rpx;
				bottom: 0rpx;
				z-index: 1;
				width: 330rpx;
				height: 90rpx;
			}
		}
	}
</style>
