<template>
    <mobile-sub-layout :title="$t('withdraw.title')" :lineHeight="4" bgColor="#51090E">
        <template #header-right>
            <view class="history flex-center flex-column" @click.stop="handleHistoryClick">
                <theme-image src="@/static/deposit_log.png" mode="aspectFit" style="width: 42rpx; height: 42rpx;" />
                <text style="font-size: 13px;" :style="{ color: themeStore.theme.wallet.normal }">{{
                    $t('deposit.history')
                    }}</text>
            </view>
        </template>
        <view class="withdraw-container">
            <view v-if="walletType?.length > 1" class="deposit-tab w-full flex items-center relative"
                :style="{ background: themeStore.theme.wallet.tabBg, top: (screen.statusBarHeight + 50) + 'px' }">
                <view v-for="(item, index) in walletType" :key="index" class="tab-item flex-center flex-1 relative" :style="{
                    background: index == activeWallet ? themeStore.theme.wallet.tabActiveBg : '',
                    color: index == activeWallet ? themeStore.theme.wallet.tabActiveText : themeStore.theme.wallet.tabText,
                }" @click="handleTabChange(index)">
                    <text>{{ item.label }}</text>
                    <theme-image v-if="item.fuUrl" class="tab-icon" :src="item.fuUrl" mode="aspectFit" />
                </view>
            </view>
            <empty-hold v-if="walletType?.length > 1" height="83"></empty-hold>

            <view class="plr30 pt28">
                <view class="balance-card">
                    <theme-image class="balance-bg-img" src="@/static/img-bg-balance.png" />
                    <view class="balance-content">
                        <view class="balance-title">{{ $t("withdraw.withdrawAmount") }}</view>
                        <view class="balance-count">{{ appStore.currencySign }}
                            {{ $formatThousandDot(pageData.balance, 2) }}</view>
                    </view>
                </view>
            </view>
            <!-- <view class="wallet-type">
                <view class="wallet-item"></view>
            </view> -->
            <view v-if="activeWallet === 0" class="plr30 ptb24 change-account">
                <text class="ft15" :style="{ color: themeStore.theme.text.normal }">
                    {{ $t("withdraw.bankAccount") }}
                </text>
                <text class="change-account-text" :style="{ color: themeStore.theme.text.theme }" @click="handleEdit">
                    {{ $t("withdraw.edit") }}
                </text>
            </view>
            <view v-else class="plr30 ptb24 change-account">
                <text class="ft15" :style="{ color: themeStore.theme.text.normal }">
                    {{ $t("withdraw.walletAddr") }}
                </text>
                <text @click="toPoster" class="change-account-text" :style="{ color: themeStore.theme.text.theme }">
                    {{ $t('withdraw.posterText') }}
                </text>
                <text class="change-account-text" :style="{ color: themeStore.theme.text.theme }" @click="handleEdit">
                    {{ $t("withdraw.walletEdit") }}
                </text>
            </view>
            <view v-if="activeWallet === 0">
                <view class="plr30" v-if="!pageData.bankInfo.withdrawAccount">
                    <view class="add-btn flex-acenter flex-scenter"
                        :style="{ background: themeStore.theme.wallet.addAccountBg }" @click.stop="handleAddClick">
                        <theme-image src="@/static/icon-withdraw-add.png" mode="aspectFit"
                            style="width: 40rpx; height: 40rpx" />
                        <view class="ft14 ml24" :style="{ color: themeStore.theme.text.theme }">
                            {{ $t("withdraw.addNewAccount") }}
                        </view>
                    </view>
                </view>
                <view class="bank-info" v-else>
                    <view class="bank-info-content">
                        <text :style="{ color: themeStore.theme.text.normal }">Acc No:{{
                            pageData.bankInfo.withdrawAccount.accountNumber
                            }}</text>
                        <!-- <text>IFSC:{{ pageData.bankInfo.withdrawAccount.accountIfsc }}</text> -->
                    </view>
                </view>
            </view>
            <view v-else>
                <view class="plr30" v-if="!pageData.walletInfo.withdrawAccount">
                    <view class="add-btn flex-acenter flex-scenter"
                        :style="{ background: themeStore.theme.wallet.addAccountBg }" @click.stop="handleAddClick">
                        <theme-image src="@/static/icon-withdraw-add.png" mode="aspectFit"
                            style="width: 40rpx; height: 40rpx" />
                        <view class="ft14 ml24" :style="{ color: themeStore.theme.text.theme }">
                            {{ $t("withdraw.addNewAccount") }}
                        </view>
                    </view>
                </view>
                <view class="bank-info" v-else>
                    <view class="bank-info-content">
                        <text :style="{ color: themeStore.theme.text.normal }">Wallet: {{
                            pageData.walletInfo.withdrawAccount.accountNumber
                            }}</text>
                        <!-- <text>IFSC:{{ pageData.bankInfo.withdrawAccount.accountIfsc }}</text> -->
                    </view>
                </view>
            </view>

            <!-- <view class="plr30 ptb24 ft15" :style="{color: themeStore.theme.text.normal}">
        {{ $t("withdraw.withdrawAmount") }}
        <text v-if="configType == 1" class="ft12">
          ({{ appStore.currencySign }} {{ pageData.withdrawMin }} - {{ pageData.withdrawMax }} )
        </text>
      </view> -->
            <view class="plr30 pb30 mt30" v-if="configType == 1 && accountParamList.length > 0">
                <MoneyInput v-model="pageData.withdrawCount" :placeholder="$t('withdraw.withdrawAmount')" />
            </view>
            <view class="amount-param mt30" v-if="configType == 2">
                <view class="amount-param-list">
                    <view class="amount-param-item flex-center" v-for="(item, index) in accountParamList"
                        @click="checkAmount(item)" :key="index" :class="{ 'active': selectAccountParamItem == item }"
                        :style="{
                            color: themeStore.theme.wallet.normal,
                            'background-color':
                                selectAccountParamItem == item
                                    ? themeStore.theme.wallet.button.selectLinearBgColor
                                    : themeStore.theme.selectItem.linearBgColor,
                        }">
                        {{ appStore.currencySign }} {{ $formatThousandDot(item, 0) }}
                    </view>
                </view>
                <!-- <theme-image src="@/static/wallet/more.png" @click="moreAccountParamItem" class="more-image"></theme-image> -->
            </view>
            <!-- <view style="height: 1rpx" :style="{ background: themeStore.theme.darkSeplineColor }"></view> -->
            <view class="ptb30 plr30" :style="{ color: themeStore.theme.text.normal }">
                <view class="withdraw-textline" :style="{ background: themeStore.theme.lightBgColor }">
                    <view class="withdraw-textline-title" :style="{ color: themeStore.theme.wallet.light07 }">{{
                        $t("withdraw.items1")
                    }}:</view>
                    <view class="withdraw-textline-text">{{ appStore.currencySign }}
                        {{ $formatThousandDot(pageData.remainingWithdrawLimit, 2) }}</view>
                </view>
                <view class="withdraw-textline mt20" :style="{ background: themeStore.theme.lightBgColor }">
                    <view class="withdraw-textline-title" :style="{ color: themeStore.theme.wallet.light07 }">{{
                        $t("withdraw.items2")
                    }} :</view>
                    <view class="withdraw-textline-text">{{ appStore.currencySign }}
                        {{ $formatThousandDot(pageData.vipDailyLimit, 2) }}</view>
                </view>

                <view class="withdraw-textline mt20" :style="{ background: themeStore.theme.lightBgColor }">
                    <view class="withdraw-textline-title" :style="{ color: themeStore.theme.wallet.light07 }">{{
                        $t("withdraw.items3")
                    }}:</view>
                    <view class="withdraw-textline-text">{{ appStore.currencySign }}
                        {{ $formatThousandDot(pageData.withdrawLimit, 2) }}</view>
                </view>
                <view class="withdraw-textline mt20" :style="{ background: themeStore.theme.lightBgColor }">
                    <view class="withdraw-textline-title" :style="{ color: themeStore.theme.wallet.light07 }">{{
                        $t("withdraw.items4")
                    }}:</view>
                    <view class="withdraw-textline-text">{{
                        pageData.remainingWithdrawCount
                    }}</view>
                </view>
            </view>
            <!-- <view style="height: 8rpx" :style="{ background: themeStore.theme.darkSeplineColor }"></view> -->
            <view class="pb30 plr30" :style="{ color: themeStore.theme.text.normal }">
                <view class="ptb24 ft15">{{ $t("withdraw.tips.title") }}:</view>
                <view class="ft12">
                    {{ $t("withdraw.tips.tips1") }}
                    <span :style="{ color: themeStore.theme.text.highlight }">{{
                        $t("withdraw.tips.tips2")
                    }}</span>
                    {{ $t("withdraw.tips.tips3") }}
                    <span :style="{ color: themeStore.theme.text.highlight }">{{
                        $t("withdraw.tips.tips4")
                    }}</span>
                    .
                </view>
            </view>
            <empty-hold height="160"></empty-hold>
            <view class="noraml-bottom-action-container" :style="{ background: themeStore.theme.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 }">
                    <view>{{ $t("withdraw.button.withdraw") }}</view>
                </view>
            </view>
        </view>
    </mobile-sub-layout>

    <view class="popup-view" v-if="bankCardPopUpVisible">
        <view class="popup-view-content"
            :style="{ background: themeStore.theme.bgColor, color: themeStore.theme.text.normal }">
            <view class="popup-view-title">{{
                $t("withdraw.bankCardPopup.title")
            }}</view>
            <view class="popup-view-text">{{
                $t("withdraw.bankCardPopup.des")
            }}</view>
            <view class="popup-view-btn">
                <view class="cancel-btn" :style="{ background: themeStore.theme.button.cancel }"
                    @click.stop="closePopUp">{{
                        $t("withdraw.button.cancel") }}</view>
                <view class="config-btn"
                    :style="{ background: themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
                    @click.stop="handleAddClick">
                    <theme-image src="@/static/wallet/add.png" style="width: 32rpx; height: 33rpx"></theme-image>
                    <text style="margin-left: 16rpx">{{
                        $t("withdraw.button.addNewAccount")
                    }}</text>
                </view>
            </view>
        </view>
    </view>
    <view class="popup-view" v-if="walletPopUpVisible">
        <view class="popup-view-content"
            :style="{ background: themeStore.theme.bgColor, color: themeStore.theme.text.normal }">
            <view class="popup-view-title">{{
                $t("withdraw.bankCardPopup.title")
            }}</view>
            <view class="popup-view-text">{{
                $t("withdraw.bankCardPopup.des")
            }}</view>
            <view class="popup-view-btn">
                <view class="cancel-btn" :style="{ background: themeStore.theme.button.cancel }"
                    @click.stop="closePopUp1">
                    {{
                        $t("withdraw.button.cancel") }}</view>
                <view class="config-btn"
                    :style="{ background: themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
                    @click.stop="handleAddClick1">
                    <theme-image src="@/static/wallet/add.png" style="width: 32rpx; height: 33rpx"></theme-image>
                    <text style="margin-left: 16rpx">{{
                        $t("withdraw.button.addNewAccount")
                    }}</text>
                </view>
            </view>
        </view>
    </view>
    <view class="popup-view" v-if="setPasswordPopUpVisible">
        <view class="popup-view-content"
            :style="{ background: themeStore.theme.bgColor, color: themeStore.theme.text.normal }">
            <view class="popup-view-title">{{
                $t("withdraw.setPasswordPopup.title")
            }}</view>
            <view class="popup-view-text">{{
                $t("withdraw.setPasswordPopup.des")
            }}</view>
            <view class="popup-view-btn">
                <view class="cancel-btn" :style="{ background: themeStore.theme.button.cancel }"
                    @click.stop="closeSetPasswordPopUp">{{ $t("withdraw.button.cancel") }}</view>
                <view class="config-btn"
                    :style="{ background: themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
                    @click.stop="configWithdrawalPassword">
                    <text style="width: 100%; text-align: center">{{
                        $t("withdraw.button.goToSetPassword")
                    }}</text>
                </view>
            </view>
        </view>
    </view>
    <view class="withdraw-config-popup" v-if="withdrawConfigPopupVisible">
        <view class="withdraw-config-tips" :style="{ background: themeStore.theme.bgColor }">
            <view class="withdraw-config-tips-title" :style="{ color: themeStore.theme.text.normal }">
                {{ $t("withdraw.configPopup.title") }}
                <theme-image src="@/static/account/icon/close.png" @click.stop="closeWithdrawConfigPopup"
                    class="close-image"></theme-image>
            </view>
            <!-- <view style="height: 1rpx" :style="{ background: themeStore.theme.darkSeplineColor }"></view> -->
            <view class="withdraw-config-tips-amount">
                <view class="account-number" :style="{ color: themeStore.theme.text.highlight }">{{
                    appStore.currencySign
                }}{{
                        withdrawConfigPopupData.arrivalAmount }}</view>
                <view class="account-text" :style="{ color: themeStore.theme.text.subtitle }">{{
                    $t("withdraw.configPopup.arrivalAmount") }}</view>
            </view>
            <view class="withdraw-config-tips-amount-info">
                <view class="withdraw-config-tips-amount-info-item text-color-powder"
                    :style="{ background: themeStore.theme.lightBgColor }">
                    <text :style="{ color: themeStore.theme.text.subtitle }">{{ $t("withdraw.configPopup.title")
                        }}：</text>
                    <text :style="{ color: themeStore.theme.text.normal }">{{ appStore.currencySign }}{{
                        withdrawConfigPopupData.withdrawAmount }}</text>
                </view>
                <view class="withdraw-config-tips-amount-info-item text-color-powder"
                    :style="{ background: themeStore.theme.lightBgColor }">
                    <text :style="{ color: themeStore.theme.text.subtitle }">{{
                        $t("withdraw.configPopup.serviceCharege")
                    }}：</text>
                    <text :style="{ color: themeStore.theme.text.highlight }">{{ appStore.currencySign }}{{
                        withdrawConfigPopupData.serviceCharge }}</text>
                </view>
                <view class="text-color-powder" :style="{ color: themeStore.theme.text.subtitle }">
                    {{ $t("withdraw.configPopup.des1") }}
                    <text :style="{ color: themeStore.theme.text.highlight }">{{ withdrawConfigPopupData.withdrawFee
                        }}</text>
                    {{ $t("withdraw.configPopup.des2") }}
                </view>
            </view>
            <!-- <view style="height: 1rpx" :style="{ background: themeStore.theme.darkSeplineColor }"></view> -->
            <view class="withdraw-config-tips-bank-password">
                <view class="withdraw-config-tips-label" :style="{ color: themeStore.theme.text.normal }">{{
                    $t("withdraw.configPopup.chooseBankAccount") }}</view>
                <view class="withdraw-config-tips-amount-info-item"
                    :style="{ background: themeStore.theme.lightBgColor }">
                    <text class="text-color-powder" :style="{ color: themeStore.theme.text.subtitle }">{{
                        $t("withdraw.configPopup.yourBankAccount") }}：</text>
                    <text class="ft12 account-no" :style="{ color: themeStore.theme.text.normal }">{{
                        withdrawConfigPopupData.bankAccount
                    }}</text>
                </view>
                <view class="withdraw-config-tips-label" :style="{ color: themeStore.theme.text.normal }">{{
                    $t("withdraw.configPopup.withdrawPassword") }}</view>
                <input class="withdraw-config-tips-input" type="password" v-model="withdrawPassword"
                    :style="{ background: themeStore.theme.input.bgColor, color: themeStore.theme.light }"
                    :placeholder="$t('withdraw.configPopup.placeHolder')" placeholder-style="font-size: 26rpx" />
            </view>
            <view class="config-btn-view">
                <view class="config-btn"
                    :style="{ background: themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
                    @click.stop="createWithdrawOrder">
                    {{ $t("withdraw.button.withdraw") }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import Toast from "@/module/toast/toast.js";
import { reactive, onMounted, ref, computed } from "vue";
import { useThemeStore } from "@/store/useThemeStore";
import { useAppStore } from "@/store/useAppStore";
import { useUserStore } from "@/store/useUserStore";
import { useI18n } from "vue-i18n";
import { getAccountApi, getProfileApi } from "@/api/account.js";
import {
    getWithdrawInfoApi,
    getIsSetWithdrawalPasswordApi,
    createWithdrawOrderApi,
    getWithdrawContentApi,
} from "@/api/withdraw.js";
import { onShow } from "@dcloudio/uni-app";
import MoneyInput from "@/components/input/MoneyInput.vue";
import { onLoad } from "@dcloudio/uni-app";
import { onUnmounted } from "vue";
import { useDepositStore } from "@/store/useDepositStore";

const screen = uni.getWindowInfo()
const userStore = useUserStore()
const themeStore = useThemeStore();
const appStore = useAppStore();
const depositStore = useDepositStore();
const { t } = useI18n();

const pageData = reactive({
    withdrawCount: "",
    remainingWithdrawLimit: "", // 剩余提现金额
    remainingWithdrawCount: "", // 剩余提现次数
    withdrawLimit: "", // 打码金额
    vipDailyLimit: "",
    balance: "",
    withdrawMin: 0,
    withdrawMax: 0,
    bankInfo: {},
    withdrawAccounts: [],
    walletInfo: {}
});
const walletPopUpVisible = ref(false);
let bankStatus = ref(false);
let accountParamHeight = ref("246rpx");
let accountParamList = ref([]);
let selectAccountParamItem = ref("");
let configType = ref(1);
let withdrawConfigPopupVisible = ref(false);
let bankCardPopUpVisible = ref(false);
let setPasswordPopUpVisible = ref(false);
let isSetPassword = ref(false);

let withdrawConfigPopupData = reactive({
    arrivalAmount: "",
    bankAccount: "",
    serviceCharge: "",
    withdrawAmount: "",
    withdrawFee: "",
});
let withdrawPassword = ref("");
let withdrawAmount = ref("");
const walletType = computed(() => {
    return depositStore.walletTab
});
const activeWallet = ref(0);
const withdrawTypeId = ref(1)

onShow(() => {
    getProfileData();
    getIsSetWithdrawalPassword();
    getWithdrawInfo();
})

onMounted(() => {
    uni.$on('bankCardDidSelect', handleBankCardDidSelect)
})

onUnmounted(() => {
    uni.$off('bankCardDidSelect', handleBankCardDidSelect)
})
const toPoster = () => {
    uni.navigateTo({
        url: '/pages/activity/Poster',
    })
}
const handleAddClick1 = () => {
    walletPopUpVisible.value = false;
    uni.navigateTo({ url: '/pages/wallet/BindWallet' })
}
const closePopUp1 = () => {
    walletPopUpVisible.value = false;
}
const handleTabChange = (idx) => {
    activeWallet.value = idx;
    withdrawTypeId.value = walletType.value[idx]['type']
    depositStore.changeActiveType(withdrawTypeId.value)
}
const handleEdit = () => {
    if (!isSetPassword.value) {
        setPasswordPopUpVisible.value = true;
        return
    }
    if (activeWallet.value == 0) {
        uni.navigateTo({
            url: "/pages/account/BankCard/BankCard",
        });
    } else {
        uni.navigateTo({
            url: "/pages/wallet/BindWallet",
        });
    }

}
const handleBankCardDidSelect = (item) => {
    pageData.bankInfo = item
}

const getWithdrawInfo = async () => {
    Toast.showLoading("Loading");
    const { code, data } = await getWithdrawInfoApi();
    Toast.hideLoading();
    if (code == 200) {
        configType.value = data.configType;
        pageData.remainingWithdrawLimit = data.remainingWithdrawLimit;
        pageData.withdrawLimit = data.withdrawLimit;
        pageData.remainingWithdrawCount = data.remainingWithdrawCount;
        pageData.vipDailyLimit = data.vipDailyLimit;
        pageData.balance = data.balance;
        if (data.amountParam != null && data.amountParam != "") {
            accountParamList.value = data.amountParam.split(",");
            selectAccountParamItem.value = accountParamList.value[0];

            const strArr = data.amountParam.split(",");
            if (strArr.length > 1) {
                const min = strArr[0]
                const max = strArr[strArr.length - 1]

                pageData.withdrawMin = min
                pageData.withdrawMax = max
            }
        }
    }
};

const handleAddClick = () => {
    if (!isSetPassword.value) {
        setPasswordPopUpVisible.value = true;
        return
    }
    if (activeWallet.value == 0) {
        uni.navigateTo({
            url: "/pages/account/BankCard/BankCard",
        });
    } else {
        uni.navigateTo({
            url: "/pages/wallet/BindWallet",
        });
    }
};

const handleHistoryClick = () => {
    uni.navigateTo({
        url: "/pages/wallet/WithdrawHistory",
    });
};

/**
 * 选中银行卡
 */
const changeBankCard = () => {
    if (!isSetPassword.value) {
        setPasswordPopUpVisible.value = true;
        return
    }
    uni.navigateTo({
        url: "/pages/account/BankCard/BankCardList?isChoose=1"
    });
};
/**
 * 选中提现金额
 */
const checkAmount = (value) => {
    selectAccountParamItem.value = value;
};
/**
 * 确认提现
 */
const createWithdrawOrder = async () => {
    if (withdrawPassword.value == "") {
        Toast.show(t("withdraw.toast.text1"));
        return;
    }
    const { code, data, message } = await createWithdrawOrderApi({
        withdrawAmount: withdrawAmount.value,
        withdrawPasswd: withdrawPassword.value,
        withdrawTypeId: withdrawTypeId.value,
    });
    if (code == 200) {
        Toast.show(t("withdraw.toast.text2"));
        closeWithdrawConfigPopup();
        uni.navigateTo({
            url: `/pages/wallet/WithdrawWait?bankCard=${data.bankNo}&arrivalAmount=${data.arrivalAmount}&orderNumber=${data.orderNo}&serviceCharege=${withdrawConfigPopupData.serviceCharge}&withdrawAmount=${data.withdrawAmount}`
        });
    }
};
/**
 * 提现按钮点击 获取提现详情
 */
const handleConfirmClick = async () => {
    if (!isSetPassword.value) {
        setPasswordPopUpVisible.value = true
        return
    }
    if (activeWallet.value === 0 && !pageData.bankInfo?.id) {
        bankCardPopUpVisible.value = true
        return
    }
    if (!pageData.withdrawAccounts.length) {
        bankCardPopUpVisible.value = true
        return
    }

    let amount = 0;
    if (configType.value == 1) {
        if (pageData.withdrawCount == "" || pageData.withdrawCount <= 0) {
            Toast.show(t("withdraw.toast.text3"));
            return;
        }
        amount = pageData.withdrawCount;
    }
    if (configType.value == 2) {
        amount = selectAccountParamItem.value;
    }
    withdrawAmount.value = amount;
    // if (pageData.withdrawLimit > 0) {
    // 	Toast.show(t('withdraw.toast.text4') + pageData.withdrawLimit + t('withdraw.toast.text5'));
    // 	return;
    // }
    if (Number(amount || 0) < pageData.withdrawMin || Number(amount || 0) > pageData.withdrawMax) {
        Toast.show(`Min: ${min} Max: ${max}`)
        return
    }
    Toast.showLoading('Loading')
    const info = activeWallet.value == 0 ? pageData.bankInfo : pageData.walletInfo;
    console.log('info', info);

    const { code, data } = await getWithdrawContentApi({
        withdrawAmount: amount,
        withdrawTypeId: info.withdrawTypeId,
    });
    Toast.hideLoading()
    if (code == 200) {
        withdrawConfigPopupData.arrivalAmount = data.arrivalAmount;
        withdrawConfigPopupData.bankAccount = info.withdrawAccount.accountNumber;
        withdrawConfigPopupData.serviceCharge = data.serviceCharge;
        withdrawConfigPopupData.withdrawAmount = data.withdrawAmount;
        withdrawConfigPopupData.withdrawFee = data.withdrawFee;
        withdrawPassword.value = "";
        withdrawConfigPopupVisible.value = true;
    }
};
const closeWithdrawConfigPopup = () => {
    withdrawConfigPopupVisible.value = false;
};

/**
 * 关闭添加银行卡弹窗
 */
const closePopUp = () => {
    bankCardPopUpVisible.value = false;
};
/**
 * 关闭设置提现密码弹出窗
 */
const closeSetPasswordPopUp = () => {
    setPasswordPopUpVisible.value = false;
};
/**
 * 跳转设置提现密码
 */
const configWithdrawalPassword = () => {
    setPasswordPopUpVisible.value = false;
    uni.navigateTo({
        url: "/pages/account/WithdrawalPassword/WithdrawalPassword",
    });
};
/**
 * 加载更多提现金额选项
 */
const moreAccountParamItem = () => {
    if (accountParamList.value.length > 9) {
        accountParamHeight.value = "auto";
    }
};

/**
 * 获取用户是否绑卡
 */
const getBankStatus = async () => {
    const { code, data } = await getAccountApi();
    if (code == 200) {
        // uni.setStorageSync('mobile', data.mobile);
        bankStatus.value = data.bankStatus;
        if (data.bankStatus) {
            bankCardPopUpVisible.value = false;
            getProfileData();
        } else {
            bankCardPopUpVisible.value = true;
        }
    }
};

const getProfileData = async () => {
    const { code, data } = await getProfileApi({
        userId: userStore.userInfo.id,
    });
    if (code == 200 && data != null) {
        const list = data.withdrawAccounts || []
        if (list.length > 0) {
            list.forEach((item) => {
                item.withdrawAccount = JSON.parse(item.withdrawAccount);
            })
            pageData.bankInfo = list.filter((item) => item.withdrawTypeId == 1)?.[0] ?? {}
            pageData.walletInfo = list.filter((item) => item.withdrawTypeId == 2)?.[0] ?? {}
            console.log('walletInfo', pageData.walletInfo);

            console.log('pagetData', pageData);

            // if (!pageData.bankInfo.id) {
            //   pageData.bankInfo = list[0]
            // }
        }
        pageData.withdrawAccounts = list
    }
};
/**
 * 获取用户是否设置提现密码
 */
const getIsSetWithdrawalPassword = async () => {
    const { code, data } = await getIsSetWithdrawalPasswordApi();
    if (code == 200) {
        isSetPassword.value = data;
        if (!data) {
            setPasswordPopUpVisible.value = true;
        }
    }
};

</script>

<style lang="scss" scoped>
.withdraw-container {
    min-height: 100vh;
    position: relative;

    .deposit-tab {
        height: 83rpx;
        position: fixed;
        left: 0rpx;
        top: 50px;
        z-index: 50;

        .tab-item {
            height: 100%;
            font-family: Roboto;
            font-weight: 400;
            font-size: 25rpx;

            .tab-icon{
                position: absolute;
                top: 0;
                right: 0;
                width: 92rpx;
                height: 31rpx;
            }
        }
    }

    .balance-card {
        position: relative;

        .balance-bg-img {
            height: 154rpx;
            width: 100%;
        }

        .balance-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .balance-title {
                font-size: 30rpx;
                color: #733100;
            }

            .balance-count {
                margin-top: 20rpx;
                font-size: 38rpx;
                color: #AB0B00;
            }
        }
    }

    .withdraw-textline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 20rpx;
        height: 85rpx;
        padding: 0rpx 30rpx;

        .withdraw-textline-title {
            font-size: 22rpx;
        }

        .withdraw-textline-text {
            font-size: 26rpx;
        }
    }

    .change-account {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 14rpx;

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

    .bank-info {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;

        .bank-info-content {
            width: 100%;
            min-height: 90rpx;
            background: linear-gradient(90deg, #a33cf3 0%, #d181ff 100%);
            border-radius: 20rpx;
            box-sizing: border-box;
            padding: 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-size: 24rpx;
        }
    }

    .amount-param {
        width: 100%;
        box-sizing: border-box;
        padding: 0 30rpx;
        padding-bottom: 30rpx;

        .amount-param-list {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            grid-gap: 20rpx;

            .amount-param-item {
                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;
                font-weight: bold;
                font-size: 31rpx;
                color: #FEBF05;
            }

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

        .more-image {
            width: 32rpx;
            height: 28rpx;
            margin: 0 auto;
            display: block;
            margin-top: 31rpx;
            margin-bottom: 15rpx;
        }
    }

    .add-btn {
        height: 90rpx;
        border-radius: 20rpx;
    }
}

.popup-view {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;

    .popup-view-content {
        width: 630rpx;
        height: 341rpx;
        background: #922222;
        border-radius: 20rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        padding: 40rpx 30rpx 0 30rpx;

        .popup-view-title {
            width: 100%;
            text-align: center;
            font-size: 36rpx;
        }

        .popup-view-text {
            width: 100%;
            margin-top: 32rpx;
            font-size: 24rpx;
        }

        .popup-view-btn {
            width: 100%;
            height: 80rpx;
            margin-top: 50rpx;
            display: flex;
            justify-content: space-between;
            text-align: center;
            color: #fff;
            font-weight: 500;
            font-size: 32rpx;

            .cancel-btn {
                width: 180rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 40rpx;
            }

            .config-btn {
                width: 360rpx;
                height: 80rpx;
                border-radius: 40rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box;
                padding-left: 22rpx;
                font-weight: 500;
                font-size: 32rpx;
                color: #ffffff;
                overflow: hidden;
            }
        }
    }
}

.withdraw-config-popup {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;

    .withdraw-config-tips {
        width: 100%;
        position: absolute;
        bottom: 0;
        border-radius: 20rpx 20rpx 0rpx 0rpx;

        .withdraw-config-tips-title {
            width: 100%;
            height: 110rpx;
            box-sizing: border-box;
            text-align: center;
            font-size: 36rpx;
            color: #ffffff;
            position: relative;
            line-height: 110rpx;

            .close-image {
                position: absolute;
                right: 27rpx;
                width: 30rpx;
                height: 30rpx;
                top: 40rpx;
            }
        }

        .withdraw-config-tips-amount {
            width: 100%;
            height: 205rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: center;
            box-sizing: border-box;
            padding-top: 59rpx;
            padding-bottom: 55rpx;

            .account-number {
                font-weight: 400;
                font-size: 60rpx;
                color: #ffdf3f;
            }

            .account-text {
                font-size: 24rpx;
                color: #fa8484;
            }
        }

        .withdraw-config-tips-amount-info {
            width: 100%;
            box-sizing: border-box;
            padding: 0 30rpx;
            padding-bottom: 31rpx;
        }

        .withdraw-config-tips-bank-password {
            width: 100%;
            box-sizing: border-box;
            padding: 0 30rpx;
            padding-top: 30rpx;

            .withdraw-config-tips-label {
                width: 100%;
                font-size: 26rpx;
                color: #ffffff;
                margin-bottom: 30rpx;
            }

            .withdraw-config-tips-input {
                width: 100%;
                height: 90rpx;
                border-radius: 20rpx;
                outline: none;
                box-sizing: border-box;
                line-height: 90rpx;
                padding-left: 30rpx;
                font-size: 26rpx;
            }
        }

        .withdraw-config-tips-amount-info-item {
            width: 100%;
            height: 60rpx;
            background: #922222;
            border-radius: 20rpx;
            box-sizing: border-box;
            padding: 0 30rpx;
            line-height: 60rpx;
            margin-bottom: 20rpx;
            display: flex;
            justify-content: space-between;
        }

        .config-btn-view {
            width: 100%;
            height: 151rpx;
            box-sizing: border-box;
            padding: 0 30rpx;
            display: flex;
            align-items: center;

            .config-btn {
                width: 100%;
                height: 90rpx;
                background: linear-gradient(90deg, #f78b22, #e34e04);
                border-radius: 45rpx;
                line-height: 90rpx;
                text-align: center;
                font-size: 36rpx;
                color: #fff;
            }
        }

        .text-color-powder {
            font-size: 22rpx;
            color: #fa8484;
            white-space: nowrap;
        }
        .account-no{
            font-size: 22rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.normal-theme-btn-radius {
    width: 688rpx;
    height: 80rpx;
    font-weight: bold;
    font-size: 31rpx;
    color: #7A2500;
}
</style>
