<template>
    <div class="container">
        <div class="personal-box">
            <van-image class="box-img" round :src="userInfo.avatar"/>
            <div class="box-text">
                <div class="box-name">{{userInfo.nickname}}</div>
                <div>{{userInfo.uuid}}</div>
            </div>
        </div>
        <van-cell-group class="user-bar-list">
            <van-cell title="备注" value="未设置" @click="showNote = true" v-if="route.query.type != 1">
                <template #icon>
                    <svg-icon class="user-bar-list-icon" name="bz"/>
                </template>
                <template #right-icon>
                    <svg-icon style="width: 20px;height:20px;margin-left: 4px;" name="sz"/>
                </template>
            </van-cell>
            <van-cell title="邮箱">
                <template #icon>
                    <svg-icon class="user-bar-list-icon" name="yx"/>
                </template>
            </van-cell>
            <van-cell title="性别" value="未知">
                <template #icon>
                    <svg-icon class="user-bar-list-icon" name="xb"/>
                </template>
            </van-cell>
        </van-cell-group>
        <div class="card-box" v-if="route.query.type != 1">
            <div class="card-box-text green">发消息</div>
            <div class="card-box-text blue">音视频通话</div>
            <div class="card-box-text red">删除好友</div>
        </div>
        <van-button 
            v-if="route.query.type == 1" 
            class="add-btn" type="primary" size="large" color="#4765DD" @click="showNote = true">添加好友
        </van-button>
        <van-popup v-model:show="showNote" :style="{ borderRadius:'25px' }">
            <div class="pop-content-password">
                <div class="pop-title-password">{{route.query.type == 1?'请输入验证信息':'请修改备注'}}</div>
                <van-field v-model="note" class="pop-input"/>
                <div class="pop-btn-password">
                    <van-button type="default" class="btn-password cancel" @click="cancel">{{ $t('wallet.Cancel') }}</van-button>
                    <van-button type="default" class="btn-password confirm" @click="confirm">{{ $t('wallet.Sure') }}</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { userUuid,userFriend } from "@/api/path/im.api";
import { useWalletStore } from "@/stores/modules/walletStore";
const route = useRoute();
const walletStore = useWalletStore();
// route.query.type // 1:添加好友   2.查看用户信息

const showNote = ref(false);
const note = ref('');
const userInfo = ref({});
// 获取用户信息
const getuserUuid = async () => {
    const res = await userUuid(route.query.uuid);
    userInfo.value = res.data || null;
}
// 取消
const cancel = () => {
    showNote.value = false;
    note.value = ''
}
// 确定
const confirm = () => {
    if(route.query.type == 1){
        getuserFriend();
    }
}
// 添加好友接口
const getuserFriend = async () => {
    const res = await userFriend({uuid:walletStore.account,friendUsername:route.query.uuid});
    showNote.value = false;
}

onMounted(()=>{
    getuserUuid();
})
</script>

<style lang="less" scoped>
.container{
    height: 100%;
    margin: 16px;
    .personal-box{
        background-color: #fff;
        border-radius: 12px;
        padding: 0 17px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .box-img{
            width: 44px;
            height: 44px;
            margin: 17px 8px 17px 0;
            box-sizing: border-box;
        }
        .box-text{
            margin: 17px 0;
            box-sizing: border-box;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #8D8D8D;
            .box-name{
                font-weight: 500;
                font-size: 15px;
                color: #000000;
                margin-bottom: 4px;
            }
        }
    }
    .user-bar-list{
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        margin: 16px 0;
        .van-cell {
            height: 44px;
            line-height: 44px;
            background: @bg-color1;
            border-bottom: 1px solid @bg-color1;
            font-size: 15px;
            align-items: center;
            &::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-icon{
            width: 20px;
            height: 20px;
            margin-right: 4px;
            color: #000000;
        }
    }
    .card-box{
        background-color: #fff;
        border-radius: 12px;
        padding: 0 17px;
        .card-box-text{
            padding: 10px 0;
            text-align: center;
            border-bottom: 1px solid #F2F2F2;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
        }
        .card-box-text:last-child{
            border-bottom:none;
        }
        .green{
            color: #00B42A;
        }
        .blue{
            color: #527BFF;
        }
        .red{
            color: #FF0000;
        }
    }
    .add-btn{
        background: #4765DD;
        border-radius: 12px;
        height: 46px;
        line-height: 46px;
        margin-top: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #FFFFFF;
    }
}
.pop-content-password{
    padding: 27px 35px 25px 34px;
    .pop-title-password{
        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-password{
        display: flex;
        justify-content: center;
        .btn-password{
            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;
        }
    }
}
:deep(.van-popup--center) {
    margin: 0 40px !important;
    width: auto !important;
}
</style>b