<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('deposit.pageTitle')" :onBack="removeDepositParams" />
		</view>
		<view class="depositTypes">
			<view v-if="!payChannelList.length" style="display: flex; justify-content: center; align-items: center">
				<Spin v-show="payChannelListLoading" />
				<image v-show="!payChannelListLoading" src="/static/empty.png" mode="aspectFit" style="width: 200px; height: 200px"></image>
			</view>
			<view
				v-for="(payChannel, index) in payChannelList"
				:key="index"
				class="depositType"
				@click="toTargetPage(payChannelConfig[payChannel.pay_code]?.target, payChannel.id, payChannel.pay_code, payChannel.pay_subsidy)"
			>
				<!-- <image v-if="payChannel.pay_code == 'htfxcashier2'" src="/static/capital/medal.png" style="width: 22px;height: 22px;position: absolute;top: 0;right: 40px;" ></image>
				<view v-if="payChannel.pay_code == 'htfxcashier2'" class="desc">
					<view>{{ $t('deposit.subsidyTips') }}</view>
				</view> -->
				<image
					class="bgIcon"
					:style="{ width: payChannelConfig[payChannel.pay_code]?.bgIconSize + 'px', height: payChannelConfig[payChannel.pay_code]?.bgIconSize + 'px' }"
					:src="payChannelConfig[payChannel.pay_code]?.bgIcon"
					mode="aspectFit"
				></image>
				<text>{{ payChannel.pay_name }}</text>
				<uni-icons type="right" size="19" class="icon" color="#fff"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import { getPayChannel } from '@/services/capital/deposit.ts';
export default {
	name: '',
	data() {
		return {
			payChannelListLoading: false,
			payChannelList: [],
			payChannelConfig: {
				LDAgency: {
					target: '/pages/capital/deposit/localDepositor/index',
					bgIcon: '/static/capital/localDepositor.png',
					bgIconSize: 85
				},
        LDAgency2: {
					target: '/pages/capital/deposit/localDepositor/index',
					bgIcon: '/static/capital/localDepositor.png',
					bgIconSize: 85
				},
				remittance: { target: '/pages/capital/deposit/swift/index', bgIcon: '/static/capital/swift.png', bgIconSize: 83 },
				remittance2: { target: '/pages/capital/deposit/usdt/index', bgIcon: '/static/capital/USDT.png', bgIconSize: 90 },
				remittance4: { target: '/pages/capital/deposit/usdt/index', bgIcon: '/static/capital/USDT.png', bgIconSize: 90 },
				remittance3: { target: '/pages/capital/deposit/scan/index', bgIcon: '/static/capital/scan.svg', bgIconSize: 76 },
        remittance5: { target: '/pages/capital/deposit/swift/index', bgIcon: '/static/capital/swift.png', bgIconSize: 83 },
        htfxcashier: {
					target: '/pages/capital/deposit/onlinePayment/index',
					bgIcon: '/static/capital/payOnline.png',
					bgIconSize: 100
				},
				htfxcashier2: {
					target: '/pages/capital/deposit/onlinePayment/index',
					bgIcon: '/static/capital/payOnline2.png',
					bgIconSize: 80
				},
        // htfxcashier3: {
        //   target: '/pages/capital/deposit/onlinePayment/index',
        //   bgIcon: '/static/capital/payOnline3.png',
        //   bgIconSize: 100
        // },
				htfxcashier3: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/USDT.png', bgIconSize: 90 },
        ForcePay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
				ECA3_31E55F754F: {
					target: '/pages/capital/deposit/usdt/index',
					bgIcon: '/static/capital/USDT.png',
					bgIconSize: 90
				},
        PayOK: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
        One2Pay: { target: '/pages/capital/deposit/One2Pay/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
        PaySpec: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
        RediPay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
        CCPay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
        Help2Pay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/payOnline.png', bgIconSize: 90 },
        TokenPay: { target: '/pages/capital/deposit/onlinePayment/index', bgIcon: '/static/capital/USDT.png', bgIconSize: 90 },
			}
		};
	},
	methods: {
		async getPayChannelData() {
			this.payChannelListLoading = true;
			const res = await getPayChannel();
			if (res && res.code === 0) {
				this.payChannelList = res.data;
			}
			this.payChannelListLoading = false;
		},
		toTargetPage(target, pay_id, pay_code,pay_subsidy) {
      if(pay_subsidy && pay_subsidy >0){
        uni.navigateTo({
          url: `${target}?pay_id=${pay_id}&pay_code=${pay_code}&pay_subsidy=${pay_subsidy}`
        });
      }else {
        uni.navigateTo({
          url: `${target}?pay_id=${pay_id}&pay_code=${pay_code}`
        });
      }
		},
		removeDepositParams() {
			uni.removeStorageSync('actId');
			uni.removeStorageSync('curs');
			uni.removeStorageSync('curl');
		}
	},
	created() {
		this.getPayChannelData();
	},
	onBackPress() {
		this.removeDepositParams();
	},
	onLoad(params) {
		if (params.actId) {
			uni.setStorageSync('actId', params.actId);
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
