<template>
	<view class="crypto-deposit-container">
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.cryptoCurrency') }}:
		</view>
		<view class="flex-wrap flex-sbetween plr16 pt16 pb30">
			<view class="select-btn-container" v-for="(item, index) in depositStore.cryptoList" :key="index"  @click.stop="handleSelect(index)">
				<view class="select-btn">
					<theme-image src="@/static/wallet/icon-btn-bg.png" class="select-btn-bg-img" mode="aspectFill" />
					<view class="flex-acenter cfff select-btn-text">
						<theme-image v-if="item.crypto === 'USDT'" src="@/static/wallet/icon-ustd.png" mode="aspectFit" class="flex-shrink-0" style="width: 50rpx; height: 50rpx"></theme-image>
						<theme-image v-if="item.crypto === 'BTC'" src="@/static/wallet/icon-btc.png" mode="aspectFit" class="flex-shrink-0" style="width: 50rpx; height: 50rpx"></theme-image>
						<theme-image v-if="item.crypto === 'ETH'" src="@/static/wallet/icon-eth.png" mode="aspectFit" class="flex-shrink-0" style="width: 50rpx; height: 50rpx"></theme-image>
						<view  class="flex-1 flex-scenter">
							<view>{{ item.crypto }}</view>
						</view>
						<view style="width: 50rpx;"></view>
					</view>
					<theme-image v-if="index === pageData.selectIndex" class="select-btn-check-img" src="@/static/wallet/icon-btn-select.png" mode="scaleToFill" />
				</view>
			</view>
		</view>
		<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.depositAmount') }}:
		</view>
		<view class="flex-acenter plr30 ptb24">
			<view class="coin-change-btn flex-acenter flex-scenter plr30" :style="{ 'background': themeStore.theme.bgColor, 'border-color': themeStore.theme.seplineColor }" @click.stop="handleExchangeClick()">
				<view class="mr32">
					{{ pageData.isShowLb ? appStore.currencySign :currentItem.crypto }}
				</view>
				<theme-image src="@/static/wallet/icon-coin-change.png" mode="aspectFit" style="width: 30rpx; height: 25rpx;"/>
			</view>
			<view class="flex-1">
				<NormalInput
					v-model="pageData.depositAmount"
					:placeholder="placeHoderText"
					type="digit"
					@change="handleInputChange"
				/>
			</view>
		</view>
		
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.getAmount') }}: {{ pageData.isShowLb ? currentItem.crypto + ' ' + formatFloat(pageData.getAmount, currentItem.decimalPlaces) : appStore.currencySign + ' ' + formatFloat(pageData.getAmount, 2) }}
		</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 v-if="pageData.depositAmount">{{ $t('deposit.button.depositNow') }} ({{ currentItem.crypto }}: {{ pageData.isShowLb ? pageData.getAmount : pageData.depositAmount }})</view>
				<view v-else>{{ $t('deposit.button.depositNow') }}</view>
			</view>
		</view>
		<DepositSuccessPopup
			ref="depositSuccessPopupRef"
		/>
	</view>
</template>

<script setup>
	import { reactive, computed } from 'vue'
	import NormalInput from '@/components/input/NormalInput.vue'
	import { useDepositStore } from '@/store/useDepositStore'
	import { formatThousandDot, formatFloat } from '@/module/formatter/data-formatter.js'
	import { requestCreateTransferOrder } from '@/api/deposit'
	import Toast from '@/module/toast/toast.js'
	import DepositSuccessPopup from './DepositSuccessPopup.vue'
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useAppStore } from '@/store/useAppStore'
	import { openUrl } from '@/module/utils/openUrl'
	
	const { t } = useI18n()
	const depositStore = useDepositStore()
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	
	const pageData = reactive({
		selectIndex: 0,
		isShowLb: false,
		depositAmount: '',
		getAmount: ''
	})
	const depositSuccessPopupRef = ref(null)
	
	const placeHoderText = computed(() => {
		if (depositStore.cryptoList.length) {
			const data = depositStore.cryptoList[pageData.selectIndex]
			return `Min: ${formatThousandDot(data.minAmount)} Max: ${formatThousandDot(data.maxAmount)}`
		}
		return ''
	})
	
	const currentItem = computed(() => {
		if (depositStore.cryptoList.length) {
			return depositStore.cryptoList[pageData.selectIndex]
		}
		return {}
	})
	
	const getAmountValue = () =>  {
		if (pageData.depositAmount && depositStore.cryptoList.length) {
			if (!pageData.isShowLb) {
				const exchangeRate = depositStore.cryptoList[pageData.selectIndex].exchangeRate
				return Number(pageData.depositAmount) * exchangeRate
			} else {
				const exchangeRate = depositStore.cryptoList[pageData.selectIndex].exchangeRate
				return Number(pageData.depositAmount) / exchangeRate
			}
		}
		return 0
	}
	
	const handleSelect = (index) => {
		pageData.depositAmount = ''
		pageData.getAmount = ''
		pageData.isShowLb = false
		pageData.selectIndex = index
	}
	
	const handleExchangeClick = () => {
		const flag = getAmountValue() + ''
		pageData.depositAmount = flag
		pageData.isShowLb = !pageData.isShowLb
		pageData.getAmount = getAmountValue()
	}
	
	const handleInputChange = () => {
		pageData.getAmount = getAmountValue()
	}
	
	const handleConfirmClick = async () => {
		if (!pageData.depositAmount) {
			Toast.show(t('deposit.toast.text1'))
			return
		}
		if (Number(pageData.depositAmount) < currentItem.value.minAmount || Number(pageData.depositAmount) > currentItem.value.maxAmount) {
			Toast.show(`${t('deposit.toast.text2')} ${currentItem.value.minAmount} - ${currentItem.value.maxAmount}`)
			return
		}
		
		Toast.showLoading('Loading')
		const amount = pageData.isShowLb ? pageData.getAmount : pageData.depositAmount
		const { code, data } = await requestCreateTransferOrder({
			amount: amount,
			rechargeType: 'G',
			crypto: currentItem.value.crypto
		})
		Toast.hideLoading()
		if (code !== 200) { return }
		if (data.url) {
			openUrl(data.url)
			depositSuccessPopupRef.value.show()
		}
	}
</script>

<style lang="scss" scoped>
	.crypto-deposit-container {
		padding-bottom: 220rpx;
		
		.coin-change-btn {
			width: 220rpx;
			border-radius: 20rpx;
			height: 80rpx;
			border: 1rpx solid #963333;
			margin-right: 28rpx;
			background-color: #6C1C1D;
		}
		
		.select-btn-container {
			padding: 0rpx 15rpx;
		}
		
		.select-btn {
			width: 328rpx;
			height: 90rpx;
			position: relative;
			overflow: hidden;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			
			.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: 328rpx;
				height: 90rpx;
			}
		}
	}
</style>