<template>
	<mobile-sub-layout :title="$t('deposit.title5')" :lineHeight="4">
		<template #header-right>
			<theme-image src="@/static/icon-withdraw-headerright.png" mode="aspectFit" style="width: 40rpx; height: 40rpx;" @click.stop="handleHistoryClick"/>
		</template>
		<view class="deposit-order-detail-container" :style="{ 'background': themeStore.theme.bgColor }">
			<view class="plr30 ptb30 flex-acenter flex-sbetween">
				<theme-image class="flex-shrink-0 mr24" src="@/static/wallet/img-imps.png" mode="aspectFit" style="width: 320rpx; height: 130rpx;" />
				<view class="ft12">
					{{ $t('deposit.message.tipsImps1') }}
				</view>
			</view>
			<view class="pb30">
				<view class="list-item-content">
					<view class="ft15">{{ $t('deposit.bankAccountInfo') }}</view>
					<view class="text-link-underlink" :style="{ 'color': themeStore.theme.text.highlight }" @click.stop="handleInstructionClick">
						{{ $t('deposit.transferInstructions') }}
					</view>
				</view>
				<view class="list-item-content">
					<view class="title" :style="{ 'color': themeStore.theme.text.subtitle }">{{ $t('deposit.accountHolderName') }}:</view>
					<view class="subtitle">{{ depositStore.impsInfo.accountHolder || '' }}</view>
					<view class="copy-btn" @click.stop="handleCopyClick(depositStore.impsInfo.accountHolder)">{{ $t('deposit.button.copy') }}</view>
				</view>
				<view class="list-item-content">
					<view class="title" :style="{ 'color': themeStore.theme.text.subtitle }">{{ $t('deposit.bankName') }}:</view>
					<view class="subtitle">{{ depositStore.impsInfo.bankName }}</view>
					<view class="copy-btn" @click.stop="handleCopyClick(depositStore.impsInfo.bankName)">{{ $t('deposit.button.copy') }}</view>
				</view>
				<view class="list-item-content">
					<view class="title" :style="{ 'color': themeStore.theme.text.subtitle }">{{ $t('deposit.IFSCCode') }}:</view>
					<view class="subtitle">{{ depositStore.impsInfo.ifscCode }}</view>
					<view class="copy-btn" @click.stop="handleCopyClick(depositStore.impsInfo.ifscCode)">{{ $t('deposit.button.copy') }}</view>
				</view>
				<view class="list-item-content">
					<view class="title" :style="{ 'color': themeStore.theme.text.subtitle }">{{ $t('deposit.accountNo') }}:</view>
					<view class="subtitle">{{ depositStore.impsInfo.accountNo }}</view>
					<view class="copy-btn" @click.stop="handleCopyClick(depositStore.impsInfo.accountNo)">{{ $t('deposit.button.copy') }}</view>
				</view>
				<view class="list-item-content">
					<view class="title" :style="{ 'color': themeStore.theme.text.subtitle }">{{ $t('deposit.remark') }}:</view>
					<view class="subtitle">{{ depositStore.chargeInfo.accountRemark }}</view>
					<view class="copy-btn" @click.stop="handleCopyClick(depositStore.chargeInfo.accountRemark)">{{ $t('deposit.button.copy') }}</view>
				</view>
			</view>
			<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
			<view class="plr30 ptb24 ft15">
				<view class="mb24">
					{{ $t('deposit.transferAmount') }}:
				</view>
				<MoneyInput
					v-model="pageData.depositAmount"
					:placeholder="$t('deposit.transferAmount')"
				/>
			</view>
			<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
			<view class="plr30 ptb24 ft15">
				<view class="mb24">
					{{ $t('deposit.utr') }}:
				</view>
				<NormalInput
					v-model="pageData.utr"
					:maxlength="32"
					:reg="/[^A-Za-z0-9]/g"
					:placeholder="$t('deposit.message.tipsImps5')"
				/>
			</view>
			<view class="plr30 ptb8 ft12">
				{{ $t('deposit.message.tipsImps2') }}
			</view>
			<view class="plr30 ptb24 ft15">
				{{ $t('deposit.depositTips') }}:
			</view>
			<view class="ft10 plr30">
				<view>
					{{ $t('deposit.message.tipsImps3') }}
				</view>
				<view>
					{{ $t('deposit.message.tipsImps4') }}
				</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.transferCompleted') }}</view>
				</view>
			</view>
			<DepositConfirmPopup
				ref="depositConfirmPopupRef"
				@confirm="handleDepositConfirm"
			/>
			<DepositSuccessPopup
				ref="depositSuccessPopupRef"
			/>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, reactive, ref } from 'vue'
  import { useThemeStore } from '@/store/useThemeStore'
	import DepositServiceItem from './components/DepositServiceItem.vue'
	import MoneyInput from '@/components/input/MoneyInput.vue'
	import NormalInput from '@/components/input/NormalInput.vue'
	import { useDepositStore } from '@/store/useDepositStore.js'
	import { requestCreateTransferOrder } from '@/api/deposit'
	import Toast from '@/module/toast/toast.js'
	import DepositConfirmPopup from './components/DepositConfirmPopup.vue'
	import DepositSuccessPopup from './components/DepositSuccessPopup.vue'
	import { useI18n } from 'vue-i18n'
	
	const { t } = useI18n()
	const themeStore = useThemeStore()
	const depositStore = useDepositStore()
	const depositConfirmPopupRef = ref(null)
	const depositSuccessPopupRef = ref(null)
	
	const pageData = reactive({
		depositAmount: '',
		utr: ''
	})
	
	onLoad((option) => {
		pageData.depositAmount = option.amount
		depositStore.getChargeInfo()
	})
	
	const handleHistoryClick = () => {
		uni.navigateTo({
			url: '/pages/wallet/DepositHistory'
		})
	}
	
	const handleInstructionClick = () => {
		uni.navigateTo({
			url: '/pages/wallet/TransferInstructions'
		})
	}
	
	const handleConfirmClick = async () => {
		if (!pageData.depositAmount) {
			Toast.show(t('deposit.toast.text1'))
			return
		}
		if (Number(pageData.depositAmount) < depositStore.impsInfo.minAmount || Number(pageData.depositAmount) > depositStore.impsInfo.maxAmount) {
			Toast.show(`${t('deposit.toast.text2')} ${depositStore.impsInfo.minAmount} - ${depositStore.impsInfo.maxAmount}`)
			return
		}
		if (!pageData.utr) {
			Toast.show(t('deposit.toast.text3'))
			return
		}
		depositConfirmPopupRef.value.show({
			amount: pageData.depositAmount,
			utr: pageData.utr
		})
	}
	
	const handleDepositConfirm = async () => {
		Toast.showLoading()
		const { code, data } = await requestCreateTransferOrder({
			amount: pageData.depositAmount,
			rechargeType: 'C',
			utr: pageData.utr
		})
		Toast.hideLoading()
		if (code !== 200) { return }
		depositConfirmPopupRef.value.hide()
		depositStore.getChargeInfo()
		depositSuccessPopupRef.value.show()
	}
	
	
	const handleCopyClick = (text) => {
		uni.setClipboardData({
			data: text,
			success() {
				uni.showToast({
					title: t('deposit.toast.text4'),
					icon: 'success'
				});
			}
		})
	}
</script>

<style lang="scss" scoped>
	.deposit-order-detail-container {
		min-height: 100vh;
		
		.text-link-underlink {
			font-size: 24rpx;
			color: #FFDF3F;
			text-decoration-line: underline;
		}
			
		.list-item-content {
			border-radius: 20rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 30rpx;
			
			.title {
				font-size: 28rpx;
			}
			
			.subtitle {
				font-size: 26rpx;
				flex: 1;
				text-align: right;
			}
			
			.copy-btn {
				margin-left: 16rpx;
				width: 90rpx;
				height: 28rpx;
				background: linear-gradient(0deg, #FFC61C, #FFF9B4);
				border-radius: 14px;
				border: 1px solid #FCFFB8;
				font-size: 16rpx;
				color: #2C0303;
				line-height: 28rpx;
				text-align: center;
			}
		}
		
		
	}
</style>