<template>
    <mobile-sub-layout :title="$t('withdraw.bindWallet')" :lineHeight="4">
        <view class="bind-wallet-container">
            <view class="bind-title" :style="{ color: themeStore.theme.light }">{{ $t('withdraw.walletLink') }}</view>
            <view class="link-input-box flex items-center" :style="{
                backgroundColor: themeStore.theme.wallet.iptBg,
                borderColor: themeStore.theme.wallet.borderColor,
                color: themeStore.theme.wallet.light
            }">
                <input type="text" v-model="addressUrl" :placeholder="$t('withdraw.linkPlaceholder')"
                    class="link-input flex-1" :style="{ color: themeStore.theme.light }"
                    placeholder-style="color: #9D3F42; font-size: 24rpx;" />
            </view>
            <view class="bind-title2" :style="{ color: themeStore.theme.light }">{{ $t('withdraw.getTitle') }}</view>
            <theme-image src="@/static/wallet_yh/image_czslt.png" mode="widthFix"
                style="width: 100%; height: 82rpx; margin-top: 20rpx;" />
        </view>
        <empty-hold height="130" />
        <view class="fixed-bottom flex-center">
            <view class="confirm flex-center"
                :style="{ background: `top / cover no-repeat ${themeStore.theme.deposit.bgImage}`, color: themeStore.theme.wallet.textColor }"
                @click="handleConfirm">Confirm</view>
        </view>
    </mobile-sub-layout>
</template>
<script setup>
import { ref } from 'vue';
import { bindWithdrawAccountApi } from '@/api/account';
import toast from '@/module/toast/toast';
import { useThemeStore } from '@/store/useThemeStore';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
const themeStore = useThemeStore()

const addressUrl = ref('')

const handleConfirm = async () => {
    const params = {
        withdrawAccount: JSON.stringify({
            accountName: 'INRUPAY',
            accountNumber: addressUrl.value,
        }),
        withdrawTypeId: 2
    }
    const {code} = await bindWithdrawAccountApi(params)
    if (code == 200) {
        toast.showSuccess()
        setTimeout(() => {
            uni.navigateBack({
                delta: 1
            })
        }, 1000)
    }
}
</script>
<style lang="scss" scoped>
.bind-wallet-container {
    padding: 26rpx 30rpx;

    .bind-title {
        line-height: 40rpx;
        font-family: Roboto;
        font-weight: bold;
        font-size: 31rpx;
        color: #FFFFFF;
    }

    .bind-title2 {
        margin-top: 40rpx;
    }
}

.link-input-box {
    width: 696rpx;
    height: 85rpx;
    background: #3D0302;
    border-radius: 15rpx;
    border: 2px solid #D5343A;
    margin-top: 20rpx;
    padding: 10rpx 20rpx;

    .link-input {
        font-size: 28rpx;
    }
}

.fixed-bottom {
    width: 750rpx;
    height: 130rpx;
    background: #7B0107;
    box-shadow: 0rpx -3rpx 5rpx 0rpx rgba(91, 2, 7, 0.14);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0 29rpx;

    .confirm {
        width: 692rpx;
        height: 85rpx;
    }
}
</style>