<template>
	<view class="deposit-channel-container">
		<view class="flex-acenter flex-sbetween" v-if="channelList.length > 1">
			<view class="select-btn-container" v-for="(item, index) in channelList" :key="index"
				@click.stop="handleSelect(item)">
				<view class="select-btn">
					<theme-image v-if="item === selectType" 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 flex-scenter cfff select-btn-text">
						<view>
							{{ item }}
						</view>
					</view>
					<theme-image v-if="item === selectType" class="select-btn-check-img"
						src="@/static/wallet/icon-btn-select-m.png" mode="scaleToFill" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n'
import { useDepositStore } from '@/store/useDepositStore'
const depositStore = useDepositStore()
const { t } = useI18n()
const channelList = computed(() => {
	return depositStore.payType.split(',')
})

const emit = defineEmits(['change'])
const selectType = ref('')

selectType.value = depositStore.onlinePaymentData.payType
const handleSelect = (item) => {
	selectType.value = item
	emit('change', selectType.value)
}
</script>

<style lang="scss" scoped>
.deposit-channel-container {
	padding: 0rpx 15rpx;
	box-sizing: border-box;
	width: 100%;

	.select-btn-container {
		padding: 0rpx 15rpx;
		background-color: #6E1719;
	}

	.select-btn {
		width: 210rpx;
		height: 85rpx;
		position: relative;
		overflow: hidden;
		border-radius: 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: 28rpx;
		}

		.select-btn-check-img {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			right: 0rpx;
			bottom: 0rpx;
			z-index: 1;
			width: 210rpx;
			height: 85rpx;
		}
	}
}
</style>
