<template>
    <view>
        <view class="sticky" @click="seeMore">更多</view>
        <view class="infos">
            <view class="info-lef">
                <image src="/static/bg1.jpg" mode=""></image>
            </view>
            <view class="info-rig">
                <view class="name">{{ username }}</view>
                <view class="phone">{{ phone }}</view>
            </view>
        </view>
        <view class="auth">
            <h4>{{ companyName }}</h4>
            <h4 class="authed">
                <uni-icons
                    style="margin-right: 8rpx; color: #f19600"
                    type="checkbox-filled"></uni-icons>
                <span>已认证</span>
            </h4>
        </view>
        <!-- <u-cell-group style="width: 95%; margin: 15rpx auto;" :border="false">
			<u-cell
				title="个人信息" 
				:isLink="true" 
				icon="/static/personal.png"
				:border="false"
			>
			</u-cell>
			<u-cell
				title="设置" 
				:isLink="true" 
				icon="/static/setting.png"
				:border="false"
			>
			</u-cell>
		</u-cell-group> -->
        <!-- <button ></button> -->
        <view class="exit-log" @click="exitLogin"> 退出登录 </view>
    </view>
</template>

<script>
    import { authPath } from "../../public";
    import store from "../../store/user";
    export default {
        data() {
            return {
                companyName: uni.getStorageSync("companyName"),
                username: uni.getStorageSync("userInfo").username,
                phone: uni.getStorageSync("userInfo").sysUser.phonenumber,
            };
        },
        methods: {
            exitLogin() {
                let that = this;
                uni.showModal({
                    title: "退出登录",
                    content: "确定退出登录吗？",
                    success: (res) => {
                        if (res.confirm) {
                            that.$api.user
                                .logOut({}, null)
                                .then((res) => {
                                    console.log(res);
                                })
                                .catch((err) => {
                                    console.log(err);
                                });

                            store.SET_PERMISSIONS = [];
                            uni.removeStorageSync("token");
                            uni.removeStorageSync("userInfo");
                            uni.reLaunch({
                                url: "/pages/login/login",
                            });
                        }
                    },
                });
            },
            seeMore() {
                console.log("更多");
            },
        },
    };
</script>

<style lang="scss">
    body {
        background: url("/static/user-bgd.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .sticky {
        box-sizing: border-box;
        padding: 10rpx 15rpx 10rpx 30rpx;
        border-radius: 30rpx 0 0 30rpx;
        background-color: #fff;
        position: absolute;
        top: 3vh;
        right: 0;
        font-size: 12px;
    }
    .infos {
        width: 80%;
        margin: 6vh auto;
        margin-bottom: 0;
        display: flex;
        .info-lef {
            width: 18%;
            height: 8vh;
            border-radius: 50%;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .info-rig {
            flex: 1;
            box-sizing: border-box;
            padding: 15rpx 25rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            view {
                color: #fff;
            }
            .name {
                font-size: 20px;
                font-weight: bold;
            }
            .phone {
                font-size: 14px;
                letter-spacing: 5rpx;
            }
        }
    }
    .auth {
        width: 85%;
        display: flex;
        margin: 2.5vh auto;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        background-color: #ffe8c2;
        box-sizing: border-box;
        padding: 1.6vh;
        border-radius: 20rpx 20rpx 0 0;
        h4 {
            font-weight: normal;
        }
        .authed {
            display: flex;
            align-items: center;
            color: #f19600;
        }
    }
    .exit-log {
        margin: 40vh auto;
        margin-bottom: 0;
        width: 70%;
        box-sizing: border-box;
        border-radius: 50rpx;
        padding: 20rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #3888ff;
        color: #fff;
    }
</style>
