<template>
	<view class="transfer-deposit-container">
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.paymentMethods') }}<span :style="{ color: themeStore.theme.text.highlight }">*</span>
		</view>
		<view class="flex-acenter plr30 pb30 flex-sbetween">
			<view v-for="(item, index) in pageData.depositPaymentMethodList" :key="index" @click.stop="handlePaymentMethodChange(item)" class="select-btn">
				<theme-image :src="item.imageUrl" mode="aspectFit" class="select-btn-bg-img"/>
				<theme-image v-if="item.key === depositStore.transferDeposit.depositPaymentMethod" class="select-btn-check-img" src="@/static/wallet/icon-btn-select-m.png" mode="scaleToFill" />
			</view>
		</view>
		<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view v-if="depositStore.transferDeposit.depositPaymentMethod === 1" class="plr30 ptb24 ft15">
			{{ $t('deposit.depositAmount') }}: <span class="ft12 ml32">Min: {{ $formatThousandDot(depositStore.impsInfo.minAmount) }}</span><span class="ft12 ml32"> Max: {{ $formatThousandDot(depositStore.impsInfo.maxAmount) }}</span>
		</view>
		<view v-if="depositStore.transferDeposit.depositPaymentMethod === 2" class="plr30 ptb24 ft15">
			{{ $t('deposit.depositAmount') }}: <span class="ft12 ml32">Min: {{ $formatThousandDot(depositStore.impsInfo.minAmount) }}</span><span class="ft12 ml32"> Max: {{ $formatThousandDot(depositStore.impsInfo.maxAmount) }}</span>
		</view>
		<view class="plr30 pb30">
			<MoneyInput
				v-model="depositStore.transferDeposit.depositAmount"
				:placeholder="$t('deposit.depositAmount')"
				:max="depositStore.impsInfo.maxAmount"
				:min="depositStore.impsInfo.minAmount"
			/>
		</view>
		<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view class="plr30">
			<view v-if="depositStore.transferDeposit.depositPaymentMethod === 1" class="flex-wrap ptb30">
				<view v-for="(item, index) in depositStore.impsRechargeList" :key="index" class="" @click.stop="handleAmountSelect(item)">
					<view class="select-item-container">
						<view class="badge-view" :style="{ 'background': themeStore.theme.selectItem.badgeBgColor }">
							<view>{{ `+${depositStore.impsInfo.gift * item}` }}</view>
						</view>
						<view
							class="item-content"
							:class="{ 'select': Number(depositStore.transferDeposit.depositAmount || 0) === Number(item) }"
							:style="{
								'color': Number(depositStore.transferDeposit.depositAmount || 0) === Number(item) ? themeStore.theme.selectItem.selectText : themeStore.theme.selectItem.text,
								'background-color': Number(depositStore.transferDeposit.depositAmount || 0) === Number(item) ? themeStore.theme.selectItem.selectBgColor : themeStore.theme.selectItem.bgColor,
							}">
							<view>{{ appStore.currencySign }} {{ $formatThousandDot(item) }}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="depositStore.transferDeposit.depositPaymentMethod === 2" class="flex-wrap ptb30">
				<view v-for="(item, index) in depositStore.upiRechargeList" :key="index" class="" @click.stop="handleAmountSelect(item)">
					<view class="select-item-container">
						<view class="badge-view" :style="{ 'background': themeStore.theme.selectItem.badgeBgColor }">
							<view>{{ `+${depositStore.upiInfo.gift * item}` }}</view>
						</view>
						<view
							class="item-content"
							:class="{ 'select': Number(depositStore.transferDeposit.depositAmount || 0) === Number(item) }"
							:style="{
								'color': Number(depositStore.transferDeposit.depositAmount || 0) === Number(item) ? themeStore.theme.selectItem.selectText : themeStore.theme.selectItem.text,
								'background-color': Number(depositStore.transferDeposit.depositAmount || 0) === Number(item) ? themeStore.theme.selectItem.selectBgColor : themeStore.theme.selectItem.bgColor,
							}">
							<view>{{ appStore.currencySign }} {{ $formatThousandDot(item) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="depositStore.fillOrderSwitch" class="plr30 pb24 ft15">
			{{ $t('deposit.depositService') }}:
		</view>
		<view v-if="depositStore.fillOrderSwitch" class="plr30">
			<SelfServiceUtrItem/>
		</view>
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.depositTips') }}:
		</view>
		<view class="ft10 plr30">
			<view>
				{{ $t('deposit.message.tips1') }}
			</view>
			<view>
				{{ $t('deposit.message.tips2') }}
			</view>  
		</view>
		<view class="noraml-bottom-action-container" :style="{ 'background': themeStore.theme.bgColor }" @click.stop="handleConfirmClick">
			<view class="normal-theme-btn-radius" :style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal  }">
				<view>
					{{ $t('deposit.button.depositNow') }}
				</view>
			</view>
		</view>
		<DepositSuccessPopup
			ref="depositSuccessPopupRef"
		/>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import globalConfig from '@/config/global.config.js'
	import MoneyInput from '@/components/input/MoneyInput.vue'
	import SelfServiceUtrItem from './SelfServiceUtrItem.vue'
	import DepositSuccessPopup from './DepositSuccessPopup.vue'
	import Toast from '@/module/toast/toast.js'
	import { useDepositStore } from '@/store/useDepositStore.js'
	import { useI18n } from 'vue-i18n'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useAppStore } from '@/store/useAppStore'
	import { requestCreateTransferOrder } from '@/api/deposit'
	import { openUrl } from '@/module/utils/openUrl.js'
	
	const { t } = useI18n()
	const depositStore = useDepositStore()
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	
	const depositSuccessPopupRef = ref(null)
	
	const pageData = reactive({
		depositPaymentMethodList: [
			{
				title: 'IMPS',
				imageUrl: globalConfig.appImagePrefix() + '/wallet/img-imps.png',
				key: 1
			}
		],
	})
	
	const handlePaymentMethodChange = (item) => {
		depositStore.transferDeposit.depositPaymentMethod = item.key
	}
	
	const handleAmountSelect = (item) => {
		depositStore.transferDeposit.depositAmount = item
	}
	
	const handleConfirmClick = async () => {
		if (!depositStore.transferDeposit.depositAmount) {
			Toast.show(t('deposit.toast.text1'))
			return
		}
		if (Number(depositStore.transferDeposit.depositAmount) < depositStore.impsInfo.minAmount || Number(depositStore.transferDeposit.depositAmount) > depositStore.impsInfo.maxAmount) {
			Toast.show(`${t('deposit.toast.text2')} ${depositStore.impsInfo.minAmount} - ${depositStore.impsInfo.maxAmount}`)
			return
		}
		Toast.showLoading()
		const { code, data } = await requestCreateTransferOrder({
			amount: depositStore.transferDeposit.depositAmount,
			rechargeType: 'I',
			utr: '',
			remark: ''
		})
		Toast.hideLoading()
		if (code !== 200) { return }
		openUrl(data.url)
		depositSuccessPopupRef.value.show()
		depositStore.getChargeInfo()
		
		// if (depositStore.transferDeposit.depositPaymentMethod === 1) {
		// 	if (Number(depositStore.transferDeposit.depositAmount) < depositStore.impsInfo.minAmount || Number(depositStore.transferDeposit.depositAmount) > depositStore.impsInfo.maxAmount) {
		// 		Toast.show(`${t('deposit.toast.text2')} ${depositStore.impsInfo.minAmount} - ${depositStore.impsInfo.maxAmount}`)
		// 		return
		// 	}
		// 	uni.navigateTo({
		// 		url: `/pages/wallet/DepositImpsDetail?amount=${depositStore.transferDeposit.depositAmount}`
		// 	})
		// } else {
		// 	if (Number(depositStore.transferDeposit.depositAmount) < depositStore.upiInfo.minAmount || Number(depositStore.transferDeposit.depositAmount) > depositStore.upiInfo.maxAmount) {
		// 		Toast.show(`${t('deposit.toast.text2')} ${depositStore.upiInfo.minAmount} - ${depositStore.upiInfo.maxAmount}`)
		// 		return
		// 	}
		// 	uni.navigateTo({
		// 		url: `/pages/wallet/DepositUpiDetail?amount=${depositStore.transferDeposit.depositAmount}`
		// 	})
		// }
	}
</script>

<style lang="scss" scoped>
	.transfer-deposit-container {
		padding-bottom: 220rpx;
		
		.select-btn {
			width: 330rpx;
			height: 130rpx;
			position: relative;
			overflow: hidden;
			border-radius: 20rpx;
			
			.select-btn-bg-img {
				width: 100%;
				height: 100%;
			}
		
			.select-btn-check-img {
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				right: 0rpx;
				bottom: 0rpx;
				z-index: 1;
				width: 330rpx;
				height: 130rpx;
			}
		}
		
		.check-radio {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			background-color: #3D0303;
			font-size: 20rpx;
			margin-right: 20rpx;
		}
		
		.check-radio.select {
			background-color: #FFDF3F;
			color: #3D0303;
		}
		
		.select-item-container {
			position: relative;
			
			.badge-view {
				position: absolute;
				top: -15rpx;
				right: 15rpx;
				height: 30rpx;
				border-radius: 15rpx;
				background-color: #B80A0A;
				font-size: 18rpx;
				line-height: 30rpx;
				padding: 0rpx 15rpx;
				color: #fff;
			}
			
			.item-content {
				color: #fff;
				font-size: 28rpx;
				width: 160rpx;
				background-color: #963333;
				border-radius: 35rpx;
				height: 70rpx;
				margin-right: 12rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.item-content.select {
				background-color: #F37E1C;
			}
		}
	}
</style>
