<template>
    <div class="container">
        <div class="userimg">
            <van-image 
                round 
                width="60" 
                height="60" 
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
        </div>
        <div class="username">Wallet</div>
        <div class="useraddress">
            <span>0xF3fefE…EcaB</span>
            <svg-icon style="width: 18px; height: 18px;" name="copy" />
        </div>
        <van-list class="user-bar-list">
            <van-cell title="修改暱稱" value="Wallet" is-link @click="show = true"></van-cell>
            <van-cell 
                class="user-bar-list-last" 
                title="修改頭像">
                <template #right-icon>
                    <van-uploader :after-read="afterRead">
                        <van-icon name="arrow" color="#969799" size="16"/>
                    </van-uploader>
                </template>
            </van-cell>  
        </van-list>
        <div class="qrcode">
            <qrcode-vue :value="qrtext" :size="239" :margin="2" background="transparent"/>
            <div class="text">掃一掃上面的二維碼，加我爲好友</div>
        </div>
        <van-popup v-model:show="show" :style="{ borderRadius:'25px' }">
            <div class="pop-content">
                <div class="pop-title">請輸入暱稱</div>
                <van-field v-model="nickname" class="pop-input"/>
                <div class="pop-btn">
                    <van-button type="default" class="btn cancel" @click="show = false">取消</van-button>
                    <van-button type="default" class="btn confirm" @click="show = false">確定</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import QrcodeVue from 'qrcode.vue'
const show = ref(false);
const nickname = ref('');
const qrtext = ref('');
const afterRead = () => {
    
}
</script>

<style lang="less" scoped>
.container{
    margin: 25px 17px;
    .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: 16px;
        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: 42px;
        background: @bg-color1;
        border-bottom: 1px solid @bg-color1;
        font-size: 15px ;
        &::after{
            border-bottom: 1px solid #F2F2F2;
        }
        }
        .user-bar-list-last::after{
            border-bottom: 0;
        }

        .user-bar-list{
            margin: 25px 0 37px;
            border-radius: 12px;
            overflow: hidden; 
    }
    .qrcode{
        display: flex;
        flex-direction: column;
        align-items: center;
        .text{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #8D8D8D;
            margin-top: 10px;
        }
    }
    .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 3px !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;
            }
        }
    }
}
::v-deep .van-popup--center{
    margin: 0 40px !important;
    width: auto !important;
}
</style>