<template>
    <div class="box-border min-h-screen from-blue-100 to-white bg-gradient-to-b">
        <div class="flex flex-col p-4">
            <!-- Profile Section -->
            <div class="profile-section mb-4 flex items-center gap-4 rounded-md bg-white p-4 shadow-md"
                @click="!isLoggedIn ? redirectToLogin() : null">
                <img :src="userAvatar" alt="User Avatar" class="rounded-full" width="100" height="100" />
                <div>
                    <h2 class="text-lg font-bold">
                        {{ isWeChat ? '微信用户' : isLoggedIn ? maskName(userName) : '点击登录' }}
                    </h2>
                </div>
            </div>

            <!-- Divider (Optional) -->
            <hr />

            <!-- Features Section -->
            <div class="features-section flex flex-col gap-2">
                <button class="feature-item w-full cursor-pointer rounded-md bg-white p-3 shadow-sm" @click="toHistory">
                    我的报告
                </button>
                <!-- <button class="feature-item w-full cursor-pointer rounded-md bg-white p-3 shadow-sm" @click="">
                    联系客服
                </button> -->
                <button class="feature-item w-full cursor-pointer rounded-md bg-white p-3 shadow-sm"
                    @click="toUserAgreement">
                    用户协议
                </button>
                <!-- <button v-if="isWeChat" class="feature-item w-full cursor-pointer rounded-md bg-white p-3 shadow-sm"
                    type="default" open-type="contact">
                    联系客服
                </button> -->
                <button class="feature-item w-full cursor-pointer rounded-md bg-white p-3 shadow-sm" @click="toService">
                    联系客服
                </button>
                <button class="feature-item w-full cursor-pointer rounded-md bg-white p-3 shadow-sm"
                    @click="handleLogout" v-if="!isWeChat">
                    退出登录
                </button>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
const router = useRouter()
const userName = ref('点击登录')
const userAvatar = ref('https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180')
const isLoggedIn = ref(false)
// const features = ref([
//     { title: '我的报告', icon: 'list', action: () => toHistory() },
//     { title: '联系客服', icon: 'service-o', action: () => toService() },
//     { title: '用户协议', icon: 'file', action: () => toUserAgreement() },
//     { title: '', icon: 'logout', action: () => handleLogout() },
// ])
const { isWeChat } = useEnv()

const maskName = computed(() => {
    return (name) => {
        return name.substring(0, 3) + "****" + name.substring(7);
    }
})
function toHistory() {
    router.push(`/historyQuery`)
}

function toUserAgreement() {
    router.push(`/userAgreement`)
}

function redirectToLogin() {
    router.push(`/login`)

}

function handleLogout() {
    localStorage.removeItem('token') // 使用浏览器的 localStorage 来存储 token
    isLoggedIn.value = false
    userName.value = '点击登录'
    userAvatar.value = 'https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180'
}

function toService() {
    // window.location.href = '/service' // 跳转到客服页面
    window.location.href = 'https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9' // 跳转到客服页面
}

async function fetchUserInfo() {
    const { data, error } = await useApiFetch('/user/detail')
        .get()
        .json()

    if (data.value && !error.value) {
        if (data.value.code === 200) {
            const userinfo = data.value.data.userInfo
            userName.value = userinfo.nickName || ''
            userAvatar.value = userinfo.userAvatar || 'https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180'
            isLoggedIn.value = true
        }
    }
}

const safeAreaTop = ref(0)
onMounted(() => {
    const token = localStorage.getItem('token') // 使用 localStorage 获取 token
    if (token) {
        isLoggedIn.value = true
        fetchUserInfo()
    } else {
        isLoggedIn.value = false
    }
})
</script>

<style scoped>
.profile-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.features-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-item {
    background-color: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.feature-item:hover {
    background-color: #f0f0f0;
}
</style>