<template>
    <div class="container">
        <div class="content">
            <div class="logo">
                <svg-icon style="width: 42px; height: 36px;" name="angle-token" />
                <div class="logo-text">Local Block</div>
            </div>
            <div class="card-box">
                <div class="box-item">
                    <div class="box-item-lf">
                        <svg-icon style="width: 50px; height: 50px;" name="pledge" />
                        <div class="box-item-text">
                            <div>{{ userData?.security_amount >= 10000 ? (userData.security_amount / 10000).toFixed(0) + 'W' : userData?.security_amount || 0 }}</div>
                            <div>{{ $t('me.AmountOfPledge') }}</div>
                        </div>
                    </div>
                    <div class="box-item-ri">
                        <svg-icon style="width: 50px; height: 50px;" name="available" />
                        <div class="box-item-text">
                            <div>{{userData?.stt || 0}} STT</div>
                            <div>{{ $t('me.TheNumberThatCanBeClaimed') }}</div>
                        </div>
                    </div>
                </div>
                <div class="deadline">{{ $t('me.TheEndTimeOfTheEarningsCycle') }}：{{userData?.end_time}}</div>
                <div class="btn">
                    <van-button class="activate" color="#4765DD" :disabled="isDisabled" @click="changeactivate">{{ $t('me.ActivateTheGenesisNode') }}</van-button>
                    <van-button class="receive" color="#4765DD" :disabled="isLQDisabled" @click="collect">{{ $t('me.ClaimSTT') }}</van-button>
                </div>
                <div class="list-box">
                    <div class="receive-record">{{ $t('me.CollectionRecord') }}</div>
                    <div class="list-ul">
                        <van-pull-refresh v-model="loading" @refresh="onRefresh" style="height:100%">
                            <template v-if="list && list.length > 0 && !noMore">
                                <div class="list-li" v-for="(item,index) in list" :key="index">
                                    <div>{{item.created_at}}</div>
                                    <div>{{item.money_amount}} STT</div>
                                </div>
                            </template>
                            <template v-if="noMore">
                                <view style="text-align: center;">{{ $t('me.NoRecordsYet') }}</view>
                            </template>
                        </van-pull-refresh>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { userNode,nodeActive,receiveRecord,receiveReward } from '@/api/path/jdfh.api'
import { useWalletStore } from "@/stores/modules/walletStore";
import { AES_CBC_ENCRYPT } from '@/utils/crypto';
import { showToast } from 'vant';
const walletStore = useWalletStore();

const userData = ref({});
const isDisabled = ref(true);
const isLQDisabled = ref(true);
const list = ref([]);
const noMore = ref(false);
const loading = ref(false);

let {ciphertext, iv} = AES_CBC_ENCRYPT(walletStore.privateKey);

// 获取节点数据
const getuserNode = async () => {
    const res = await userNode({address:walletStore.account});
    if(res.ret){
        userData.value = res.data;
        isDisabled.value = res.data.is_active;
        const sttValue = Number(res.data?.stt);
        isLQDisabled.value = !(sttValue > 0 && !isNaN(sttValue));
    }
}
// 激活
const changeactivate = async () => {
    const res = await nodeActive({address:walletStore.account});
    if(res.ret){
        userData.value = res.data;
        isDisabled.value = res.data.is_active;
        const sttValue = Number(res.data?.stt);
        isLQDisabled.value = !(sttValue > 0 && !isNaN(sttValue));
        setTimeout(()=>{
            getuserNode();
            getreciveRecord();
        },500)
    }
}
// 查询用户领取记录
const getreciveRecord = async () => {
    const res = await receiveRecord({address:walletStore.account});
    if(res.ret){
        list.value = res.data.list;
        if(res.data.list.length == 0){
            noMore.value = true;
        }
    }
}
// 领取
const collect = async () => {
    isLQDisabled.value = true;
    let params = {
        node_id:userData.value?.id,
        address:walletStore.account,
        key:ciphertext,
        _n:iv
    }
    const res = await receiveReward(params);
    if(res.ret){
        showToast($t('me.ReceivedSuccessfully'));
        setTimeout(()=>{
            getuserNode();
            getreciveRecord();
        },500)
    }
}
const onRefresh = () => {
  setTimeout(() => {
    getreciveRecord();
    loading.value = false;
  }, 1000);
};
onMounted(async ()=>{
    getuserNode();
    getreciveRecord();
})
</script>

<style lang="less" scoped>
.container{
    background: url('@/assets/img/bg.png') no-repeat;
    background-size: 100% 100%;
height: 100%;
    display: flex;
    flex-direction: column;
    .content{
        padding: 17px 17px 56px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
        .logo{
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 19px;
            color: #FFFFFF;
            .logo-text{
                margin-top: 10px;
                margin-bottom: 12px;
            }
        }
        .card-box{
            background: #FFFFFF;
            border-radius: 24px;
            padding: 17px;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .box-item{
                display: flex;
                align-items: center;
                gap: 12px;
                .box-item-lf,.box-item-ri{
                    background: #F6F7FF;
                    border-radius: 17px;
                    padding: 20px 0;
                    width: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .box-item-text{
                    margin-left: 12px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 15px;
                    color: #000000;
                }
            }
            .deadline{
                background: #F6F7FF;
                border-radius: 17px;
                text-align: center;
                height: 33px;
                line-height: 33px;
                box-sizing: border-box;
                margin: 10px 0;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #000000;
            }
            .btn{
                display: flex;
                align-items: center;
                gap: 12px;
                .activate,.receive{
                    width: 50%;
                    height: 33px;
                    line-height: 33px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 15px;
                    color: #FFFFFF;
                    border-radius: 17px !important;
                }
            }
            .list-box{
                margin-top: 37px;
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .receive-record{
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 15px;
                    color: @font-color2;
                    margin-bottom: 17px;
                }
                .list-ul{
                    flex:1;
                    overflow: auto;
                    .list-li{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 12px;
                        color: @font-color2;
                        margin-bottom: 8px;
                    }
                }
                .list-ul::-webkit-scrollbar{
                    width: 0;
                }
            }
        }
    }
}
:deep(.van-pull-refresh){
    overflow: initial !important;
}
</style>