<template>
    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
        <view class="bin-content">
            <view class="bind-inner relative">
                <view class="bind-title" :style="{ color: themeStore.theme.light }">{{ $t('account.bindPhone.title') }}
                </view>
                <view class="bind-content flex-column flex-center">
                    <view class="phone-box phone-num flex items-center">
                        <view class="phone-pre flex items-center">
                            <theme-image src="@/static/account/icon_iphone.png" class="icon-phone"
                                mode="aspectFit"></theme-image>
                            <view class="pre-text" :style="{ color: themeStore.theme.light }">+91</view>
                        </view>
                        <input type="number" v-model="phone" maxlength="10" class="phone-input"
                            placeholder-class="plc-cs" :placeholder="$t('account.bindPhone.placeholder')" />
                        <view class="send-btn flex-center" @click="getOtp" :style="{ color: themeStore.theme.light }">{{
                            btnText }}</view>
                    </view>
                    <view class="phone-box verify-box flex items-center">
                        <view class="phone-pre">
                            <theme-image src="@/static/account/icon_safe.png" class="icon-phone"
                                mode="aspectFit"></theme-image>
                        </view>
                        <input type="number" v-model="verificationCode" class="phone-input flex-1"
                            placeholder-class="plc-cs" :placeholder="$t('account.bindPhone.verifyPlaceholder')" />
                    </view>
                </view>
                <view class="bind-tip">
                    {{ $t('account.bindPhone.bindTip') }}
                </view>
                <view class="bind-confirm flex-center" @click="config"
                    :style="{ background: `no-repeat top / cover ${themeStore.theme.account.confirmBtnBg}`, color: themeStore.theme.account.confirmBtnTextColor }">
                    {{
                        $t('account.bindPhone.confirm') }}</view>
                <view class="icon-wrap flex-center" @click.stop="onClose">
                    <theme-image src="@/static/pop-close.png" class="icon-close" mode="aspectFill"></theme-image>
                </view>
            </view>
        </view>
    </uni-popup>
    <Congratulation ref="congratulation" :prize-amount="amount" />
</template>
<script setup>
import { useThemeStore } from '@/store/useThemeStore';
import { onMounted, ref } from 'vue';
import Toast from "@/module/toast/toast.js";
import { requestGetOtp } from '@/api/login';
import { useI18n } from 'vue-i18n';
import Congratulation from './Congratulation.vue';
import { bindPhoneApi } from '@/api/account';
import { useAppStore } from '@/store/useAppStore';
import { useUserStore } from '@/store/useUserStore';
const popup = ref(null);
const emit = defineEmits(['close', 'complete']);

const themeStore = useThemeStore();
const appStore = useAppStore()
const userStore = useUserStore()
const { t } = useI18n();
const phone = ref("");
const btnText = ref(t("account.bindPhone.send"))
const timer = ref(null);
const time = ref(0)
let verificationCode = ref("");
const amount = ref(0);
const congratulation = ref(null);

const onInput = (e) => {
    const value = e.detail.value;
    if (value.length > 10) {
        phone.value = value.slice(0, 10);
    }
}
const onClose = () => {
    close()
    emit('close');
};
const open = () => {
    popup.value.open();
};
const close = () => {
    popup.value.close();
};
const getOtp = async () => {
    if (time.value == 0) {
        if (phone.value == "") {
            Toast.show(t("account.phoneBinding.toast.phone"));
            return;
        }
        Toast.showLoading("Loading");
        try {
            const { code, data, msg } = await requestGetOtp({
                tel: phone.value,
            })
            Toast.show(msg);
            if (code == 200) {
                time.value = data;
                countdown();
            }
        } catch (error) {
            console.log(error);
            
        } finally {
            Toast.hideLoading()
        }
    }
};
/**
 * 倒计时
 */
const countdown = () => {
    btnText.value = time.value + "s";
    timer.value = setInterval(() => {
        if (time.value > 0) {
            time.value--;
            btnText.value = time.value + "s";
        } else {
            btnText.value = t("account.bindPhone.send");
            time.value = 0;
            clearInterval(timer.value);
        }
    }, 1000);
};
/**
 * 提交
 */
const config = async () => {

    if (phone.value == "") {
        Toast.show("The phone number cannot be empty");
        return;
    }
    if (verificationCode.value == "") {
        Toast.show("The Verification code cannot be empty");
        return;
    }

    Toast.showLoading("Loading");
    const { code, data } = await bindPhoneApi({
        mobile: phone.value,
        verificationCode: verificationCode.value,
        referralCode: appStore.inviteCode,
    });
    Toast.hideLoading();
    if (code == 200) {
        close();
        if (data && data > 0) {
            amount.value = data;
            congratulation.value.open();
        }
        await userStore.getUserTotalInfo();
        Toast.hideLoading();
        Toast.showSuccess()
        emit('complete')
    }

};

defineExpose({
    open,
    close,
});

</script>
<style lang="scss" scoped>
.bin-content {
    width: 640rpx;
    height: 610rpx;
    background: linear-gradient(90deg, #F7A421, #FDF7AB, #F57F08);
    border-radius: 19rpx;
    padding: 2px;

    .bind-inner {
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #280000, #580006);
        border-radius: 19rpx;

        .icon-wrap {
            width: 42rpx;
            height: 42rpx;
            position: absolute;
            right: 20rpx;
            top: 20rpx;
            z-index: 10;

            .icon-close {
                width: 100%;
                height: 100%;
            }
        }

        .bind-title {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            padding: 0 28rpx;
            font-size: 14px;
            position: relative;

            &::after {
                position: absolute;
                content: "";
                width: calc(100% - 56rpx);
                height: 1px;
                background: rgba(255, 255, 255, 0.1);
                left: 28rpx;
                bottom: 0;
            }
        }

        .bind-content {
            margin-top: 35rpx;

            .phone-box {
                width: 590rpx;
                height: 94rpx;
                background: #54030A;
                box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
                border-radius: 10rpx;
                padding: 24rpx;

                .phone-pre {
                    padding-right: 20rpx;

                    .icon-phone {
                        width: 44rpx;
                        height: 44rpx;
                    }

                    .pre-text {
                        margin-left: 16rpx;
                    }
                }

                .phone-input {
                    font-size: 25rpx;
                    color: #ffffff;
                    padding: 0 24rpx;
                }

                .send-btn {
                    width: 102rpx;
                    height: 48rpx;
                    background: #77010D;
                    box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
                    border-radius: 6rpx;
                    font-family: Roboto;
                    font-weight: 400;
                    font-size: 25rpx;
                }

                .plc-cs {
                    color: rgba(255, 255, 255, 0.7);
                }
            }

            .phone-num {
                .phone-pre {
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        top: -8rpx;
                        right: 0;
                        width: 2px;
                        height: 60rpx;
                        background: #721B22;
                    }
                }
            }

            .verify-box {
                margin-top: 31rpx;
            }
        }

        .bind-tip {
            font-family: Roboto;
            font-weight: 400;
            font-size: 23rpx;
            color: #FFFFFF;
            padding: 0 28rpx;
            margin-top: 31rpx;
        }

        .bind-confirm {
            width: 279rpx;
            height: 81rpx;
            margin: 0 auto;
            margin-top: 50rpx;
            font-family: Roboto;
            font-weight: 400;
            font-size: 29rpx;
            line-height: normal;
        }
    }
}
</style>