<template>
  <app-view class="home-mine">
    <template #header>
      <app-navbar title="我的" :show-back-button="false"></app-navbar>
    </template>
    <div class="home-mine__container">
      <CellGroup>
        <Cell is-link title="登录" :to="{ name: 'UserLogin' }" />
        <Cell is-link title="注册" :to="{ name: 'UserRegister' }" />
        <Cell is-link title="消息" :to="{ name: 'Message' }" />
        <Cell is-link title="退出" @click="userLogout" v-if="loginStore.token" />
      </CellGroup>
    </div>
  </app-view>
</template>

<script lang="ts" setup>
import { Cell, CellGroup } from 'vant'
import { dialog } from '@/utils/vant'
import { useLoginStore } from '@/stores'
import eventBus from '@/services/bus'

const loginStore = useLoginStore()

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

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