<template>
    <div class="page">
        <div class="user-card">
            <div class="avatar"></div>
            <div class="user-info">
                <div class="phone">{{ userInfo?.customInfo?.email }}</div>
            </div>
        </div>
        <div class="group">
            <div class="group-item" @click="$router.push('/improve/info?type=1')">
                <i class="i-mdi-shield-lock-outline"></i>
                <span>{{ t('language.i3') }}</span>
                <span class="version">{{ t('language.i0') }}</span>
                <icon name="cwg-right" :size="23" />
            </div>
            <div class="group-item" @click="$router.push('/language')">
                <i class="i-mdi-web"></i>
                <span>{{ t('language.i1') }}</span>
                <span class="version">{{ t(`language.${lang}`) }}</span>
                <icon name="cwg-right" :size="23" />
            </div>
            <div class="group-item" @click="$router.push('/apply/record')">
                <i class="i-mdi-history"></i>
                <span>{{ t('language.i4') }}</span>
                <span class="version"></span>
                <icon name="cwg-right" :size="23" />
            </div>
        </div>
        <div class="group">
            <div class="group-item" @click="$router.push('/pay/password')">
                <i class="i-mdi-lock-reset"></i>
                <span>{{ t('language.i2') }}</span>
                <span class="version"></span>
                <icon name="cwg-right" :size="23" />
            </div>
        </div>
        <!-- <div class="group">
            <div class="group-item">
                <i class="i-mdi-information-outline"></i>
                <span>{{ t('language.i5') }}</span>
                <span class="version"></span>
                <icon name="cwg-right" :size="23" />
            </div>
        </div> -->
        <div class="group">
            <div class="group-item" @click="showLogoutPopup = true">
                <i class="i-mdi-logout"></i>
                <span>{{ t('language.i6') }}</span>
                <span class="version"></span>
                <icon name="cwg-right" :size="23" />
            </div>
        </div>

        <van-dialog
            v-model:show="showLogoutPopup"
            title=""
            show-cancel-button
            :showConfirmButton="false"
            :showCancelButton="false"
            :close-on-click-overlay="false"
        >
            <p class="title">{{ t('mine.logout') }}</p>
            <p>{{ t('mine.p') }}</p>

            <div class="cwg-button ok-button">
                <van-button type="primary" block @click="handleLogout('confirm')">{{ t('mine.b1') }}</van-button>
            </div>
            <div class="cwg-button no-button">
                <van-button type="primary" block @click="handleLogout">{{ t('mine.b2') }}</van-button>
            </div>
        </van-dialog>
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { userApi } from '@/api/user'
import { lang } from '@/composables/config'
import useUserStore from '@/stores/use-user-store'
const router = useRouter()
const { t } = useI18n()
const userStore = useUserStore()
const userInfo = userStore.userInfo
const showLogoutPopup = ref(false)

const handleLogout = async (action: string) => {
    if (action === 'confirm') {
        try {
            const res = await userApi.logout()
            if (res.code === 200) {
                userStore.clearUserInfo()
                router.push('/login')
            }
        } catch (error) {
            showToast(error.message || '退出登录失败')
        }
    }
    showLogoutPopup.value = false
}
</script>

<style scoped>
:deep(.van-dialog__content) {
    padding: 24px 40px;
    p {
        color: #363130;
        font-family: 'League Spartan';
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 32px;
    }
    .title {
        color: #1a1a1a;
        text-align: center;
        font-family: Roboto;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }
    .no-button {
        width: 100%;
        margin: 12px 0;
        .van-button {
            background-color: #ffbdc8;
        }
    }
    .ok-button {
        margin: 4px 0;
        /* background-color: #EA002A; */
    }
}

.user-card {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
    .avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #d8d8d8 url('../assets/images/avatars.png') center/cover no-repeat;
        margin-right: 18px;
        border: 2px solid #fff;
    }
    .phone {
        color: #1a1a1a;
        font-family: Roboto;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }
}

.user-info .group {
    background: var(--action-bg);
    border-radius: 16px;
    margin-top: 24px;
    overflow: hidden;
}
.group-item {
    display: flex;
    align-items: center;
    padding: 16px;
    color: var(--white);
    font-size: var(--font-size-16);
    border-bottom: 1px solid var(--action-bg);
    position: relative;
}
.group-item:last-child {
    border-bottom: none;
}
i {
    color: var(--white);
    font-size: var(--font-size-24);
    margin-right: 12px;
}
.group-item .version {
    margin-left: auto;
    color: var(--white);
    font-size: var(--font-size-16);
}
.code-dialog {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}
</style>
