<template>
	<view class="online-deposit-container">
		<!-- <view class="pay-type-box w-full flex justify-between items-center">
			<view v-for="(item, index) in walletTab" :key="index" class="pay-type-item flex-1 flex-center"
				:style="{ background: depositType === 'bank' ? themeStore.theme.wallet.normal : '', color: depositType === 'bank' ? themeStore.theme.wallet.button.textColor : 'red' }"
				@click="handleSelect('bank')">{{ item.value }}</view>
		</view> -->
		<view class="plr30 ptb24 ft15 flex justify-between items-center"
			:style="{ 'color': themeStore.theme.text.light }">
			{{ $t('deposit.depositAmount') }}:
			<view class="flex items-center">
				<view class="ft12 ml32 label label-min" :style="{ background: themeStore.theme.wallet.min }">Min: {{
				$formatThousandDot(depositStore.onlineDepositMin) }}</view>
				<view class="ft12 ml32 label label-max" :style="{ background: themeStore.theme.wallet.max }"> Max: {{
				$formatThousandDot(depositStore.onlineDepositMax) }}</view>
			</view>
		</view>
		<view class="plr30 pb30">
			<MoneyInput v-model="depositStore.onlinePaymentData.depositAmount"
				:placeholder="$t('deposit.depositAmount')" :max="depositStore.onlineDepositMax"
				:min="depositStore.onlineDepositMin" @change="handleAmountInput" />
		</view>
		<view class="plr30" :style="{ 'color': themeStore.theme.text.light }">
			<view class="flex-wrap amount-box">
				<view v-for="(item, index) in depositStore.onlineDepositType.amountList" :key="index"
					@click.stop="handleAmountSelect(item)">
					<view class="select-item-container">
						<view v-if="depositStore.isTypeB" class="badge-view">
							<view>{{ depositStore.isTypeB ? `+${depositStore.onlineDepositType.giftList[index]}` : '' }}
							</view>
						</view>
						<view v-else class="badge-view">
							<view>{{ depositStore.onlineDepositType.gift > 0 ?
				`+${depositStore.onlineDepositType.giftList[index]}` : '' }}
							</view>
						</view>
						<view class="item-content flex-center"
							:class="{ 'select': Number(depositStore.onlinePaymentData.depositAmount || 0) === Number(item) }">
							<view style="color: #FEBF05;font-weight: bold;">{{ appStore.currencySign }} {{
				$formatThousandDot(item) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="plr30 ptb24 ft15 flex justify-between items-center"
			:style="{ 'color': themeStore.theme.text.light, marginTop: '38rpx' }">
			<text>{{ $t('deposit.depositEvent') }}:</text>
			<text v-if="depositStore.activeType == 2" @click="toPoster" class="change-account-text"
				:style="{ color: themeStore.theme.text.theme }">
				{{ $t('withdraw.posterText') }}
			</text>
			<text v-else @click="handleHistoryClick" class="change-history-text"
				:style="{ color: themeStore.theme.text.theme }">
				{{ $t('deposit.historyNot') }}
			</text>
		</view>
		<view class="pt24 plr16 flex-wrap pay-method">
			<view class="relative select-btn-container" v-for="(item, index) in payMethod" :key="index"
				@click.stop="handlePayMethodSelect(item, index)">
				<view class="flex-center select-btn"
					:style="{ background: activeMethod === index ? themeStore.theme.wallet.payBg : themeStore.theme.wallet.payBg1 }">
					<theme-image :src="`@/static/${item.icon}`" style="width: 40rpx; height: 40rpx;"></theme-image>
					<view class="pay-name" :style="{ color: themeStore.theme.light }">{{ item.name }}</view>
				</view>
				<theme-image v-if="activeMethod === index" src="@/static/wallet/icon-btn-select-m.png"
					class="select-btn-check-img pos-absolute" mode="aspectFill" />
				<view v-if="false" class="select-btn"
					:style="{ 'background': item.disable ? themeStore.theme.corner.disabledBg : item.name == depositStore.onlinePaymentData.rechargeName ? themeStore.theme.corner.selectBtnBg : themeStore.theme.corner.selectBtnColor }">
					<view class="nice-icon" v-if="item.isRecommend"
						:style="{ 'color': themeStore.theme.corner.text, 'background': themeStore.theme.corner.selectBtnColor }">
						<view>{{ appStore.currencySign }}{{ item.isRecommend }}+</view>
					</view>
					<!-- <theme-image v-if="item.type === depositStore.onlinePaymentData.depositMethod"
						class="select-btn-bg-img" src="@/static/wallet/icon-btn-bg-select.png" mode="aspectFill" />
					<theme-image v-else-if="item.disable" src="@/static/wallet/icon-btn-bg-disable.png"
						class="select-btn-bg-img" 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" :class="{ 'disable': item.disable }">
						<!-- <theme-image v-if="item.disable" :src="item.unableUrl" mode="aspectFit"
							class="pay-type-icon flex-shrink-0" style="width: 50rpx; height: 45rpx"></theme-image>
						<theme-image v-else :src="item.iconUrl" mode="aspectFit" class="pay-type-icon flex-shrink-0"
							style="width: 50rpx; height: 45rpx"></theme-image> -->
						<view class="flex-1 flex-scenter">
							<view>{{ item.name }}</view>
						</view>
						<view style="width: 20rpx;"></view>
					</view>
					<!-- <view class="select-btn-check-img"
						v-if="item.type === depositStore.onlinePaymentData.depositMethod">
						<theme-image src="@/static/wallet/icon-btn-select-m.png" mode="scaleToFill"
							style="width: 100%; height: 100%;" />
					</view> -->
				</view>
			</view>
			<view class="select-btn-container">
				<view class="select-btn ft12 flex-acenter flex-scenter" @click.stop="handleHowtouseClick"
					:style="{ color: themeStore.theme.text.highlight2, background: themeStore.theme.wallet.payBg1 }">
					<view class="howto flex-center">
						{{ $t('deposit.howtouse') }}
						<theme-image src="@/static/pay_guide/db-right.png" style="width: 24rpx;height: 24rpx;margin-left: 6rpx;"></theme-image>
					</view>
				</view>
			</view>
		</view>

		<view class="ptb24" v-if="false">
			<DepositChannel @change="handleChannelChange" />
		</view>

		<view class="plr30 ptb24 ft15" :style="{ 'color': themeStore.theme.text.light }">
			{{ $t('deposit.depositEvent') }}:
		</view>
		<view class="flex-acenter plr30 pb30" :style="{ 'color': themeStore.theme.text.light }">
			<view class="check-radio flex-acenter flex-scenter cfff ft26"
				:style="{ 'border-color': themeStore.theme.themeDarkBgColor, 'background': themeStore.theme.themeDarkBgColor }"
				@click.stop="handleDepositEventCheckClick">

				<image v-if="depositStore.isTypeB" src="@/static/images/check-2.png" mode="aspectFit"
					style="width: 30rpx; height: 30rpx;" />
			</view>
			<view class="ft13">
				{{ `+${(depositStore.typeB.gift || 0) * 100}%` }} {{ $t('deposit.bonus') }}
			</view>
		</view>
		<view v-if="depositStore.fillOrderSwitch" class="plr30 ptb24 ft15"
			:style="{ 'color': themeStore.theme.text.light }">
			{{ $t('deposit.depositService') }}:
		</view>
		<view v-if="depositStore.fillOrderSwitch" class="plr30">
			<SelfServiceUtrItem />
		</view>
		<view class="plr30 ptb24 ft15" :style="{ 'color': themeStore.theme.text.light }">
			{{ $t('deposit.depositTips') }}:
		</view>
		<view class="ft10 plr30" :style="{ 'color': themeStore.theme.text.light }">
			<view>
				{{ $t('deposit.message.tips1') }}
			</view>
			<view>
				{{ $t('deposit.message.tips2') }}
			</view>
		</view>
		<view class="noraml-bottom-action-container" :style="{ 'background': themeStore.theme.deposit.bgColor }"
			@click.stop="handleConfirmClick">
			<view class="normal-theme-btn-radius"
				:style="{ 'background': `top / cover no-repeat ${themeStore.theme.deposit.bgImage}`, 'color': themeStore.theme.deposit.button.textColor }">
				<text>
					{{ $t('deposit.button.depositNow') }}
				</text>
			</view>
		</view>
		<DepositSuccessPopup ref="depositSuccessPopupRef" />
		<TipsPopup ref="depositEventPopupRef" :text="$t('deposit.message.tips3')" />
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import MoneyInput from '@/components/input/MoneyInput.vue'
import DepositChannel from './DepositChannel.vue'
import SelfServiceUtrItem from './SelfServiceUtrItem.vue'
import { useDepositStore } from '@/store/useDepositStore.js'
import { requestCreateRechargeOrder } from '@/api/deposit'
import Toast from '@/module/toast/toast.js'
import DepositSuccessPopup from './DepositSuccessPopup.vue'
import TipsPopup from '@/components/popup/TipsPopup.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 themeStore = useThemeStore()
const depositStore = useDepositStore()
const appStore = useAppStore()
const depositType = ref('bank')
const depositSuccessPopupRef = ref(null)
const depositEventPopupRef = ref(null)
const walletTab = [
	{
		key: 'bank',
		value: t('deposit.payType.bank')
	},
	{
		key: 'wallet',
		value: t('deposit.payType.wallet')
	}
]
const tabStyle = computed(() => {
	return {
		background: depositType.value === 'bank' ? themeStore.theme.wallet.normal : themeStore.theme.wallet.bgColor,
		color: depositType.value === 'bank' ? themeStore.theme.wallet.light : themeStore.theme.wallet.textColor
	}
})
// const payMethod = computed(() => {
// 	return depositStore.onlinePaymentData.depositMethodList.filter(item => item.type == depositStore.activeType)
// })
const activeMethod = ref(0)
const payMethod = ref([
	{
		name: 'PayTM',
		icon: 'wallet/pay_PayTM.png'
	},
	{
		name: 'PhonePe',
		icon: 'wallet/pay_PhonePe.png'
	},
	{
		name: 'GooglePay',
		icon: 'wallet/pay_GooglePay.png'
	},
	{
		name: 'UPI',
		icon: 'wallet/pay_UPI.png'
	},
	{
		name: 'QRcode',
		icon: 'wallet/pay_QRcode.png'
	},
])
depositStore.onlinePaymentData.payMethod = payMethod.value[0].name
const handleHistoryClick = () => {
	uni.navigateTo({
		url: '/pages/wallet/DepositHistory'
	})
}
const toPoster = () => {
	uni.navigateTo({
		url: '/pages/activity/Poster',
	})
}
const handleSelect = (type) => {
	depositType.value = type
}
const handleChannelChange = (channel) => {
	depositStore.onlinePaymentData.payType = channel
}

const handlePayMethodSelect = (item, idx) => {
	console.log(item);
	activeMethod.value = idx
	// if (item.disable) { return }
	depositStore.onlinePaymentData.payMethod = item.name
	// depositStore.onlinePaymentData.depositMethod = item.type
	// depositStore.onlinePaymentData.depositMethodName = item.name
	// depositStore.onlinePaymentData.depositMethodSelectItem = item
	// depositStore.onlinePaymentData.rechargeName = item.name
	// depositStore.onlinePaymentData.payType = item.payType?.split(',')[0]
	// depositStore.payType = item.payType
}

const handleAmountSelect = (item) => {
	depositStore.onlinePaymentData.depositAmount = item + ''
	depositStore.computeMethodList()
}

const handleAmountInput = () => {
	depositStore.computeMethodList()
}

const handleDepositEventCheckClick = () => {
	depositStore.isTypeB = !depositStore.isTypeB
	if (depositStore.isTypeB) {
		depositEventPopupRef.value.show()
	}
}

const handleHowtouseClick = () => {
	// let url = depositStore.onlinePaymentData.depositMethodSelectItem.isGuide
	// if (!url) { return }
	// openUrl(url)
	uni.navigateTo({
		url: '/pages/wallet/DepositGuide',
	})
}

const handleConfirmClick = async () => {
	if (!depositStore.onlinePaymentData.depositAmount) {
		Toast.show(t('deposit.toast.text1'))
		return
	}
	if (Number(depositStore.onlinePaymentData.depositAmount) < depositStore.onlineDepositMin || Number(depositStore.onlinePaymentData.depositAmount) > depositStore.onlineDepositMax) {
		Toast.show(`${t('deposit.toast.text2')} ${depositStore.onlineDepositMin} - ${depositStore.onlineDepositMax}`)
		return
	}
	Toast.showLoading('Loading')
	let params = {}
	if (appStore.phoneNumberPrefix === '+91') {
		params = {
			amount: depositStore.onlinePaymentData.depositAmount,
			channelId: depositStore.onlinePaymentData.depositChannel,
			rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
			accountType: depositStore.onlinePaymentData.depositMethod,
			// rechargeName: depositStore.onlinePaymentData.rechargeName,
			payType: depositStore.onlinePaymentData.payType,
			payMethod: depositStore.onlinePaymentData.payMethod,
		}
	} else {
		params = {
			amount: depositStore.onlinePaymentData.depositAmount,
			channelId: depositStore.onlinePaymentData.depositChannel,
			rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
			accountType: depositStore.onlinePaymentData.depositMethodName,
			// rechargeName: depositStore.onlinePaymentData.rechargeName,
			payType: depositStore.onlinePaymentData.payType,
			payMethod: depositStore.onlinePaymentData.payMethod,
		}
	}
	console.log(params);

	const { code, data } = await requestCreateRechargeOrder(params)
	Toast.hideLoading()
	if (code !== 200) { return }
	if (data.url) {
		// window.open("/test.html", "_blank")
		openUrl(data.url)
		depositSuccessPopupRef.value.show()
	}
}
</script>

<style lang="scss" scoped>
.online-deposit-container {
	padding-bottom: 220rpx;

	.change-account-text {
		font-size: 24rpx;
		text-decoration-line: underline;
	}

	.change-history-text {
		font-size: 26rpx;
		text-decoration-line: underline;
	}

	.pay-type-box {
		height: 88rpx;

		.pay-type-item {
			height: 88rpx;
			transition: all 0.3s ease;
		}
	}

	.pay-method {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		grid-gap: 16rpx;
		padding: 0 28rpx;
	}

	.select-btn-container {
		position: relative;
		width: 222rpx;
		height: 100rpx;

		.select-btn-check-img {
			width: 222rpx;
			height: 100rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			z-index: 110;
		}
	}

	.pay-name {
		font-size: 26rpx;
		margin-left: 10rpx;
	}

	.label {
		padding: 8rpx 12rpx;
		border-radius: 10rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 22rpx;
	}

	.label-min {
		background: #3C9704;
	}

	.label-max {
		background: #A40000;
	}

	.select-btn {
		width: 100%;
		height: 100rpx;
		position: relative;
		overflow: hidden;
		border-radius: 16rpx;
		.howto{
			font-size: 26rpx;
			color: white;
		}
		.nice-icon {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			// width: 90rpx;
			height: 28rpx;
			z-index: 3;
			padding: 0rpx 12rpx;
			font-size: 20rpx;
			color: #ffffff;
			border-bottom-right-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		// .pay-type-icon {}

		// .pay-type-icon.disable {
		// filter: grayscale(90%);
		//}

		.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: 26rpx;
			padding: 0rpx 8rpx;
		}

		.select-btn-text.disable {
			color: #999999;
			filter: grayscale(100%);
		}
	}

	.check-radio {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin-right: 20rpx;
		border: 1rpx solid #963333;
	}

	.amount-box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		grid-gap: 20rpx;
	}

	.select-item-container {
		position: relative;

		.badge-view {
			position: absolute;
			top: -12rpx;
			right: 0;
			min-width: 64rpx;
			height: 24rpx;
			background: linear-gradient(270deg, #FF8A00 0%, #FF1200 100%);
			font-size: 18rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
		}

		.item-content {
			width: 219rpx;
			height: 85rpx;
			background: linear-gradient(360deg, #490F0E 0%, #660F0A 74%, #70130D 99%), rgba(106, 22, 27, 0.79);
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			border: 2rpx solid #7B1C21;


		}

		.select {
			background: linear-gradient(360deg, #79130D 0%, #94150C 44%, #BC0B00 99%);
			border-radius: 19rpx;
			border: 2rpx solid #FEBF05;
			transition: all .3s ease;
		}

		.item-content.select {
			background-color: #F37E1C;
		}
	}

	.normal-theme-btn-radius {
		width: 682rpx;
		height: 84rpx;
		border-radius: 0;
		font-size: 31rpx;
		color: #7A2500;
	}
}
</style>
