<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="noteValue" @click="showNote = true" v-if="userInfo.is_firend == 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="userInfo.is_firend == 1">
            <div class="card-box-text green" @click="goToPage">发消息</div>
            <div class="card-box-text blue" @click="goToPage">音视频通话</div>
            <div class="card-box-text red" @click="showExit = true">删除好友</div>
        </div>
        <van-button 
            v-if="userInfo.is_firend == 0" 
            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">{{userInfo.is_firend == 0?'请输入验证信息':'请修改备注'}}</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>
        <!-- 删除好友弹框 -->
        <van-popup v-model:show="showExit" :style="{ borderRadius:'25px' }">
            <div class="pop-content-password">
                <div class="pop-title-password">确定要删除吗？</div>
                <div class="pop-btn-password" style="margin-top: 50px;">
                    <van-button type="default" class="btn-password cancel" @click="showExit = false">{{ $t('wallet.Cancel') }}</van-button>
                    <van-button type="default" class="btn-password confirm" @click="popConfirm">{{ $t('wallet.Sure') }}</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { userUuid,userFriend,delFriend,friendRemark } from "@/api/path/im.api";
import { useWalletStore } from "@/stores/modules/walletStore";
import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";
import { useSystemStore } from "@/stores/modules/systemStore";
import { showToast } from "vant";
import { MSG_TYPE,MESSAGE_APPLY_FRIEND,MESSAGE_DELETE_FRIEND } from "@/common/constant/msgType";
const route = useRoute();
const router = useRouter();
const walletStore = useWalletStore();
const wsStore = useWebSocketStore();
const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
const systemStore = useSystemStore();
// route.query.type // 1:添加好友   2.查看用户信息

const showNote = ref(false);
const showExit = ref(false);
const note = ref('');
const userInfo = ref({});
const noteValue = ref('未设置');
// 获取用户信息
const getuserUuid = async () => {
    const res = await userUuid(route.query.uuid,{firend:walletStore.account});
    const ulist = res.data || null;
    noteValue.value = res.data?.firendRemark || '未设置'
    userInfo.value = {
        ...ulist,
        type: "user",
        avatar: ulist.avatar ? IM_PATH + ulist.avatar : ulist.avatar,
    }
}
// 取消
const cancel = () => {
    showNote.value = false;
    note.value = ''
}
// 确定
const confirm = () => {
    if(userInfo.value.is_firend == 0){
        getuserFriend();
    }else{
        // 更改备注
        getfriendRemark();
    }
}
const getfriendRemark = async () => {
    try {
        const res = await friendRemark({uuid:walletStore.account,FriendUuid:route.query.uuid,remark:note.value});
        console.log(res);
        if(res.code == 200){
            noteValue.value = note.value;
            showToast('更改成功');
        }else{
            showToast('更改失败');
        }
    } catch (error) {
        console.log(error);
        showToast('更改失败');
    } finally {
        showNote.value = false;
    }
}
// 添加好友接口
const getuserFriend = async () => {
    try {
        const res = await userFriend({uuid:walletStore.account,friendUsername:route.query.uuid});
        if(res.code == 200){
            showToast('添加成功，等待同意');
            const message = {
                content: '',
                contentType: MSG_TYPE.TEXT,
                messageType: MESSAGE_APPLY_FRIEND,
                to: route.query.uuid
            };
            wsStore.sendMessage(message);
            router.push('im')
        }else{
            showToast(res.msg || '添加失败')
        }
    } catch (error) {
        console.log(error)
        showToast('添加失败')
    } finally{
        showNote.value = false;
    }
}
// 发消息
const goToPage = (url) => {
    wsStore.toUserInfo = userInfo.value;
    router.push({
        path: 'chat',
        query:{ uuid:route.query.uuid }
    })
}
//删除好友
const popConfirm = async () => {
    try {
        const res = await delFriend({uuid:walletStore.account,friendUuid:route.query.uuid});
        if(res.code == 200){
            showToast('删除成功');
            const message = {
                content: '',
                contentType: MSG_TYPE.TEXT,
                messageType: MESSAGE_DELETE_FRIEND,
                to: route.query.uuid
            };
            wsStore.sendMessage(message);
            systemStore.needRefreshIm = true;
            router.push('im')
        }else{
            showToast('删除失败')
        }
    } catch (error) {
        showToast('删除失败')
    } finally{
        showExit.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;
            flex-shrink: 0;
        }
        .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