<template>
    <Header :show="false" backgroundBox="white">
        <van-nav-bar title="用户中心" :left-arrow="true" border fixed placeholder
            @click-left="back" />
    </Header>
    <div class="container">
        <div class="content">
            <div class="item">
                <van-icon name="friends-o" size="26" />
                <div class="title">用户名</div>
                <div class="text">
                    <div>{{ userStore.userinfo?.user.name }}</div>
                    <van-icon name="arrow" size="18" color="#d1d1d1" />
                </div>
            </div>
            <div class="item">
                <van-icon name="phone-o" size="26" />
                <div class="title">手机号码</div>
                <div class="text">
                    <div>{{ userStore.userinfo?.user.phone }}</div>
                    <van-icon name="arrow" size="18" color="#d1d1d1" />
                </div>
            </div>
            <div class="item">
                <van-icon name="envelop-o" size="26" />
                <div class="title">邮箱</div>
                <div class="text">
                    <div>{{ userStore.userinfo?.user.email }}</div>
                    <van-icon name="arrow" size="18" color="#d1d1d1" />
                </div>
            </div>
        </div>
        <div class="logout">
            <van-button type="warning" block @click="logout">退出登录</van-button>
        </div>
    </div>
</template>
<script setup>
import { showConfirmDialog, showToast } from 'vant'
import useUserStore from "@/store/user"
const router = useRouter()
const userStore = useUserStore()

const logout = () => {
    showConfirmDialog({
        title: '提示',
        message:
            '确定退出登录吗',
    }).then(() => {
        userStore.logout()
        showToast('退出登录成功')
        router.go(-1)
    }).catch(() => {

    })
}

const back = () => {
    xma.navigateBack()
}
</script>
<style lang="scss" scoped>
.container {
    padding: 15px 10px;

    .content {
        background-color: #ffffff;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;

        .item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px;
            border-bottom: 1px solid #e8e8e8;

            .title {
                flex: 1;
                font-size: 16px;
            }

            .text {
                display: flex;
                gap: 10px;
                font-size: 16px;
                color: #0E7CE3;
            }
        }
    }

    .logout {
        margin-top: 20px;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    }
}
</style>