<template>
    <app-view class="setting">
        <template #header>
            <app-navbar title="设置" />
        </template>
        <CellGroup title="账户" inset>
            <Cell is-link :to="{ name: 'account-certification' }"
                v-if="userStore.userAccount.hasauth === AuthStatus.Uncertified">
                <template #title>
                    <app-iconfont icon="g-icon-certification">实名认证</app-iconfont>
                </template>
            </Cell>
            <Cell is-link :to="{ name: 'account-authresult' }" v-else>
                <template #title>
                    <app-iconfont icon="g-icon-certification">实名认证</app-iconfont>
                </template>
            </Cell>
            <Cell is-link :to="{ name: 'user-password' }">
                <template #title>
                    <app-iconfont icon="g-icon-password">修改密码</app-iconfont>
                </template>
            </Cell>
            <Cell is-link :to="{ name: 'user-cancel' }">
                <template #title>
                    <app-iconfont icon="g-icon-cancel">注销服务</app-iconfont>
                </template>
            </Cell>
        </CellGroup>
        <CellGroup title="系统" inset>
            <Cell is-link v-if="globalStore.getSystemInfo('i18nEnabled')">
                <template #title>
                    <app-iconfont icon="g-icon-lang">语言设置</app-iconfont>
                </template>
                <template #value>
                    <app-luanguage />
                </template>
            </Cell>
            <Cell is-link @click="userLogout">
                <template #title>
                    <app-iconfont icon="g-icon-cancel">退出登录</app-iconfont>
                </template>
            </Cell>
        </CellGroup>
    </app-view>
</template>

<script lang="ts" setup>
import { Cell, CellGroup } from 'vant'
import { dialog } from '@/utils/vant'
import { AuthStatus } from '@/constants/account'
import { useUserStore, useLoginStore, useGlobalStore } from '@/stores'
import eventBus from '@/services/bus'
import AppIconfont from '@/components/base/iconfont/index.vue'
import AppLuanguage from '@mobile/components/modules/luanguage/index.vue'

const globalStore = useGlobalStore()
const loginStore = useLoginStore()
const userStore = useUserStore()

const userLogout = () => {
    dialog({
        message: '是否退出当前账号？',
        showCancelButton: true,
    }).then(() => {
        loginStore.clearAutoLoginData()
        eventBus.$emit('LogoutNotify')
    })
}
</script>

<style lang="less">
@import './index.less';
</style>