<template>
    <div class="app-container">


        <div class="card-inset">

            <van-skeleton 

                avatar 
                avatar-size="50" 
                :row="2" 
                :loading="loading" >

                <van-row>
                    <van-col span="6">
                        <van-image width="80px" height="80px" fit="fill" round
                            :src="userinfo.avatar || default_avatar"
                        />
                    </van-col>
                    <van-col span="14">
                        <div class="user-info">
                            <p>昵称：{{userinfo.realname || '用户'+ userinfo.phone}}</p>
                            <p>手机：{{userinfo.phone}}</p>
                        </div>
                    </van-col>
                    <van-col span="4">
                        <span @click="editProfile" style="color: #2196f3;">编辑资料</span>
                    </van-col>
                </van-row>
                
                <div class="padding-top-20"></div>

                <van-cell-group >
                    <van-cell is-link icon="bell" to="yys_devices">
                        <template #title>
                            <span class="custom-title">设备管理</span>
                        </template>
                    </van-cell>
                    <!-- <van-cell is-link icon="live" to="courses">
                        <template #title>
                            <span class="custom-title">研学课程</span>
                        </template>
                    </van-cell>
                    <van-cell is-link icon="friends" to="activities">
                        <template #title>
                            <span class="custom-title">研学活动</span>
                        </template>
                    </van-cell>
                    <van-cell is-link icon="new" to="/news">
                        <template #title>
                            <span class="custom-title">新闻动态</span>
                        </template>
                    </van-cell> -->
                    <!-- <van-cell is-link icon="warning" to="yys_alarms">
                        <template #title>
                            <span class="custom-title">告警消息</span>
                        </template>
                    </van-cell> -->
                </van-cell-group>
                
                <div class="padding-top-20"></div>
                <!-- <van-cell-group >
                    <van-cell is-link icon="info">
                        <template #title>
                            <span class="custom-title">关于</span>
                        </template>
                    </van-cell>
                </van-cell-group> -->

                
                <div style="margin: 26px;">
                    <van-button  block round type="danger" size="small" @click="logout">退出登录</van-button>
                </div>
            </van-skeleton>
        </div>
        
    </div>
</template>

<script>
import Vue from 'vue';
import { Skeleton,Image as VanImage, Row, Col, Cell, CellGroup, Tag, Dialog, Button } from 'vant';

Vue.use(Skeleton);
Vue.use(Button);
Vue.use(VanImage);
Vue.use(Row);
Vue.use(Col);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Tag);
Vue.use(Dialog);

export default {
    data() {
        return {
           loading: true,
           userinfo: {},
           default_avatar: '/static/avatar_default.png',
        }
    },
    mounted() {
        this.loading = false;

        this.userinfo = JSON.parse(localStorage.getItem('yysUserinfo'));
    },
    methods: {
        /**
         * 退出登录
         */
        logout() {
            Dialog.confirm({
                title: '提醒',
                message: '确定要退出登录吗？'
            })
            .then(resp => {
                if (resp === 'confirm') {
                    this.clearLocalStorage();
                    this.$router.replace('/yys_login');
                }
            })
            .catch((resp) => {
                console.log('logout', resp);
            });
        },
        /**
         * 清除缓存
         */
        clearLocalStorage() {
            localStorage.removeItem('yysUserid');
            localStorage.removeItem('yysUserinfo');
        },
        /**
         * 修改信息
         */
        editProfile() {
            this.$router.push('yys_profile');
        },
    }
}
</script>

<style lang="scss" scoped>
.user-info {
    height: 2rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 14px;
    line-height: 24px;
    color: #6f6f6f;
    padding-left: 10px;
}
.card-inset {
    padding: 10px;
    border-radius: 5px;
}
.padding-top-20 {
    padding-top: 20px;
}
</style>