<template>
    <view>
        <view class="user">
            <view class="user-avatar">
                <image class="user-avatar-image" :src="avatar"></image>
            </view>
            <view class="user-info" v-if="isLogin">{{username}}（{{loginName}}）</view>
            <view class="user-info" v-else>请登录</view>
            <view class="user-version">版本：{{version}}</view>
        </view>
        <view class="nav-list">
            <view class="nav-list-item" @tap="openServerSetting">
                <view class="nav-list-text">设置服务器地址</view>
                <uni-icons type="right"></uni-icons>
            </view>
        </view>
        <view class="flex padding-lr direction-column child-gap">
            <button class="grow-1" type="error" @tap="logOff" v-if="isLogin">注销</button>
            <button class="grow-1" type="primary" @tap="login" v-else>登录</button>
            <!-- <button class="grow-1" type="info" @tap="showUserInfo()" v-if="isLogin">查看用户信息</button> -->
            <!-- <button class="grow-1" type="info" @tap="playDing()">播放 Ding</button>
            <button class="grow-1" type="error" @tap="alertError()">错误信息</button>
            <button class="grow-1" type="error" @tap="showError()">错误提示</button> -->
        </view>
    </view>
</template>

<script>
    import extend from '../../utils/extend.js';
    import token from '../../utils/token.js';
    import user from '../../utils/user.js';
    import request from '../../utils/request.js';
    import Tone from '../../utils/tone.js';
    import message from '../../utils/message.js';

    let userinfo = null;

    const tone = new Tone();

    export default {
        data() {
            return {
                version: '',
                avatar: '/static/logo.png',
                username: '',
                loginName: '',
                isLogin: false,
            }
        },
        onLoad() {
            let systemInfo = uni.getSystemInfoSync();
            this.version = systemInfo.appWgtVersion || systemInfo.appVersion;
        },
        async onShow() {
            if (token.has()) {
                this.isLogin = true;
                userinfo = user.get();
                this.username = userinfo.UserName;
                this.loginName = userinfo.LoginName;
                console.log(userinfo);
            } else {
                let res = await token.getByServer();
                if (res.success) {
                    this.isLogin = true;
                    userinfo = user.get();
                    this.username = userinfo.UserName;
                    this.loginName = userinfo.LoginName;
                } else {
                    token.clear();
                    this.isLogin = false;
                    userinfo = null;
                    this.username = '';
                    this.loginName = '';
                }
            }
        },
        methods: {
            openLogin() {
                uni.navigateTo({
                    url: '/pages/login/index'
                });
            },

            openServerSetting() {
                uni.navigateTo({
                    url: '/pages/login/serverSetting'
                });
            },

            logOff() {
                let _this = this;
                uni.showModal({
                    content: '要注销登录吗？',
                    success(r) {
                        if (r.confirm) {
                            token.clear();
                            user.clear();
                            user.clearLoginInfo();
                            _this.login();
                        }
                    }
                });
            },

            login() {
                uni.navigateTo({
                    url: '/pages/login/index?type=switchTab&page=/pages/my/index'
                });
            },

            async textResult(success) {
                if (!extend.isBool(success)) {
                    success = false;
                }
                let res = await request.send({
                    url: `api/pdascan/TestResult?success=${success}`
                });
                console.log(res);
            },

            showUserInfo() {
                let msg =
                    `${userinfo.UserName}\n账号：${userinfo.LoginName}\n密码：${userinfo.Password}\n内码：${userinfo.SystemUserId}`;
                uni.showModal({
                    title: '用户信息',
                    content: msg
                });
            },

            playDing() {
                tone.playDing();
            },

            alertError() {
                message.error({
                    content: '错误提示'
                });
            },

            showError() {
                message.showError({
                    title: '错误提示'
                });
            }
        }
    }
</script>

<style lang="scss">
    .content {
        position: relative;
        background-color: #efefef;
        height: 100vh;
    }

    .user {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        padding: 30upx;
        border-radius: 0 0 20upx 20upx;

        .user-avatar {
            position: relative;
            display: flex;
            width: 150upx;
            height: 150upx;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 80upx;

            .user-avatar-image {
                width: 150upx;
                height: 150upx;
            }
        }

        .user-info {
            display: flex;
            height: 60upx;
            align-items: center;
            font-size: 36upx;
        }

        .user-version {
            display: flex;
            height: 40upx;
            align-items: center;
            font-size: 24upx;
            color: #666666;
        }
    }
</style>