<template>
    <div class="container">
        <div class="userimg">
            <van-image
                round
                width="60"
                height="60"
                :src="currentWallet.avatar"
            />
        </div>
        <div class="username">{{ currentWallet.username }}</div>
        <div class="useraddress">
            <span>{{ formatAddress(currentWallet.account) }}</span>
            <svg-icon class="im-copy-btn" style="width: 18px; height: 18px" name="copy" :data-clipboard-text="currentWallet.account"/>
        </div>

        <van-list class="user-bar-list">
            <van-cell
                :title="$t('wallet.WalletName')"
                :value="currentWallet.username"
                is-link
                @click="changePop(1,'sy')"
            ></van-cell>
            <van-cell class="user-bar-list-last"
                :title="$t('wallet.ViewThePrivateKey')"
                value=""
                is-link
                @click="changePop(2)"
            ></van-cell>
            <van-cell v-if="currentWallet.words" class="user-bar-list-last"
                :title="$t('wallet.CheckTheMnemonicPhrase')"
                value=""
                is-link
                @click="changePop(2,'zjc')"
            ></van-cell>
        </van-list>

        <van-button class="footer-btn" size="large" @click="changePop(3)">{{ $t('wallet.DeleteTheWallet') }}</van-button>

        <!-- 弹窗：输入名称 / 密码 -->
        <van-popup v-model:show="show" :style="{ borderRadius: '25px' }">
            <div class="pop-content">
                <div class="pop-title">
                    {{ type == 1 ? $t('wallet.PleaseEnterTheWalletName') : $t('wallet.PleaseEnterThePassword') }}
                </div>
                <van-field v-model="text" class="pop-input" :type="type == 1 ? 'text' : 'password'"/>
                <div class="pop-btn">
                    <van-button type="default" class="btn cancel" @click="cancel">{{ $t('wallet.Cancel') }}</van-button>
                    <van-button type="default" class="btn confirm" @click="confirm">{{ $t('wallet.Sure') }}</van-button>
                </div>
            </div>
        </van-popup>

        <!-- 弹窗：显示私钥 -->
        <van-popup v-model:show="showkey" position="bottom" round>
            <div>
                <div class="pop-title-key">
                    <svg-icon style="width: 24px; height: 24px" name="left-arrow" @click="showkey = false"/>
                    <div class="title">{{status == 'zjc'?$t('wallet.CheckTheMnemonicPhrase'):$t('wallet.ViewThePrivateKey')}}</div>
                </div>
                <div class="pop-text">{{ qrtext }}</div>
                <div class="qrcode">
                    <qrcode-vue :value="qrtext" :size="156" :margin="1" background="transparent"/>
                </div>
                <div class="pop-btn-key">
                    <van-button 
                        class="btn-key im-copy-btn" type="primary" 
                        size="large" color="#4765DD" 
                        :data-clipboard-text="qrtext">{{ $t('wallet.Copy') }}
                    </van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import QrcodeVue from 'qrcode.vue';
import { useWalletStore } from '@/stores/modules/walletStore';
import { showNotify } from 'vant';
import { useRoute } from 'vue-router';
import { cryptoDecode } from "@/utils/crypto.js"
import { userInfoEdit } from "@/api/path/im.api";
import { updateUserInfo } from "@/common/login";
import { useCopy } from "@/hooks/use-copy.js";
useCopy();

const walletStore = useWalletStore();
const route = useRoute();
const id = route.query.id;

// 当前显示的钱包对象
const currentWallet = computed(() => {
    if (id === walletStore.id) {
        return walletStore;
    } else {
        return walletStore.walletList.find(item => item.id === id) || {};
    }
});
const qrtext = ref('');

// 弹窗控制
const show = ref(false);
const showkey = ref(false);
const text = ref('');
const type = ref('');
const status = ref('');

// 弹窗操作
const changePop = (v,val) => {
    show.value = true;
    type.value = v;
    status.value = val;
    qrtext.value = val == 'zjc'?currentWallet.value.words.join(','):currentWallet.value.privateKey;
};

const cancel = () => {
    text.value = '';
    show.value = false;
};

const confirm = async () => {
    if (type.value == 1) {
        // 修改钱包名称
        // walletStore.updateWalletName(id, text.value);
        const { code} = await userInfoEdit({
            username:  walletStore.account,
            nickname:  text.value
        });
        if (code === 200) {
            await updateUserInfo(walletStore.account,id);
        }
    } else if (type.value == 3) {
        // 删除钱包
        walletStore.deleteWallet(id, text.value);
    } else if (type.value == 2) {
        // 查看私钥或者密码
        if (text.value != cryptoDecode(currentWallet.value.accountPassword)) {
            showNotify({ type: 'warning', message: $t('wallet.PleaseEnterTheCorrectPassword') });
        } else {
            showkey.value = true;
        }
    }
    text.value = '';
    show.value = false;
};

// 地址格式化
const formatAddress = address => {
    if (!address) return '';
    return address.slice(0, 8) + '...' + address.slice(-6);
};
</script>

<style lang="less" scoped>
.container {
    padding: 25px 17px 33px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .userimg {
        display: flex;
        justify-content: center;
    }
    .username {
        text-align: center;
        margin: 10px 0 4px;
        font-family:
            PingFang SC,
            PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: @theme-color1;
    }
    .useraddress {
        text-align: center;
        font-family:
            PingFang SC,
            PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .van-cell {
        height: 44px;
        background: @bg-color1;
        border-bottom: 1px solid @bg-color1;
        font-size: 15px;
        &::after {
            border-bottom: 1px solid #f2f2f2;
        }
    }
    :deep(.van-cell__title){
        font-family: PingFang SC, PingFang SC;
        font-weight: 500 ;
        font-size: 15px;
        color: #000000;
    }
    :deep(.van-cell__value){
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #8D8D8D;
    }
    .user-bar-list-last::after {
        border-bottom: 0;
    }

    .user-bar-list {
        margin: 25px 0 37px;
        border-radius: 12px;
        overflow: hidden;
        flex: 1;
    }
    .footer-btn {
        border-radius: 28px !important;
        height: 40px !important;
        line-height: 40px !important;
        border: 1px solid @theme-color1 !important;
        font-family:
            PingFang SC,
            PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: @theme-color1;
        background: transparent !important;
        padding: 9px 0 !important;
        box-sizing: border-box;
    }
    .pop-content {
        padding: 27px 35px 25px 34px;
        .pop-title {
            font-family:
                PingFang SC,
                PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #000000;
            text-align: center;
        }
        .pop-input {
            background: #f2f2f2;
            border-radius: 8px;
            height: 40px;
            margin: 21px 0 31px;
        }
        .pop-btn {
            display: flex;
            justify-content: center;
            .btn {
                width: 83px;
                height: 29px;
                line-height: 29px;
                padding: 5px 0 !important;
                border-radius: 6px;
                font-family:
                    PingFang SC,
                    PingFang SC;
                font-weight: 400;
                font-size: 15px;
                box-sizing: border-box;
            }
            .cancel {
                margin-right: 17px !important;
                border: 1px solid #d8d8d8;
                color: #000 !important;
            }
            .confirm {
                background: @theme-color1;
                color: #fff;
                font-weight: 500;
                border: none !important;
            }
        }
    }
    .pop-title-key {
        padding: 17px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        font-family:
            PingFang SC,
            PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: #000000;
        .title {
            flex: 1;
            display: flex;
            justify-content: center;
        }
    }
    .pop-text {
        margin: 17px;
        box-sizing: border-box;
        background: #f2f2f2;
        border-radius: 8px;
        border: 1px solid #d8d8d8;
        padding: 9px 17px;
        word-break: break-word;
        font-family:
            PingFang SC,
            PingFang SC;
        font-weight: 400;
        font-size: 17px;
        color: @font-color2;
    }
    .qrcode {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pop-btn-key {
        margin: 17px;
        .btn-key {
            height: 40px;
            line-height: 40px;
            border-radius: 50px;
            font-family:
                PingFang SC,
                PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #ffffff;
        }
    }
}
:deep(.van-popup--center) {
    margin: 0 40px !important;
    width: auto !important;
}
</style>
