<template>
<Layout-Child>
    <div class=" w-11/12 mx-auto py-6 text-font-white">
        <app-cell text='头像' boxType='border' :value='userInfo.avatar?userInfo.avatar:""' icon='icon-xiayibu'></app-cell>
        <app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu'></app-cell>
        <app-cell text='手机号' boxType='border' :value='userInfo.telephone?userInfo.telephone:""' icon='icon-xiayibu'></app-cell>
        <app-cell text='个性签名' boxType='border' icon='icon-xiayibu'></app-cell>
    </div>
    <div class="fixed bottom-0 w-full left-0 z-30">
        <app-btn text="退出登录" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-red" border='none'  @btnClicked='toggleDialog' ></app-btn>
    </div>
</Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    data(){
        return{
            userInfo:this.$util.userMsg.getUserMsg()
        }
    },
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),
       'app-cell':()=>import('@/components/common/Cell.vue'),
        'app-btn':()=>import('@/components/common/Btn.vue')
  },
  methods:{
      toggleDialog(){
             this.$dialog.alert({
                message: '确定要退出登录吗',
            }).then(()=>{
                localStorage.clear();
                this.$router.push({
                    name: 'Login'
                })
            });
      }
  }
});
</script>
