<template>
<view class="con-body">
    <view class="con-bg">
       
        <!-- 下拉刷新 -->
        <mescroll-uni ref="mescrollRef" @init="mescrollInit"
            :down="downOption"  @down="downCallback"
            :fixed="false" class="scroll-h" :style="{ paddingTop: navBarPaddingTop + 'px' }"
        >
            <!-- #ifdef H5 -->
            <view style="height:50rpx"></view>
            <!-- #endif -->
            <!-- 头像 -->
            <view class="head-pic">
                <img class="pic-img" :src="'static/images/userinfo/icon-userinfo.png'" />
                <view class="head-name">
                    <view class="nick">
                        <view class="nick-text">{{ userObj.name }}</view>
                        <img :src="`static/images/userinfo/num-${userObj.level}@2x.png`" class="level" />
                    </view>
                    <view class="dept">{{ userObj.deptName }} {{ userObj.jobName }}</view>
                </view>
                <view class="head-right">
                    <view class="font-ruzhi">已入职{{userObj.joinDay}}天</view>
                    <img :src="'static/images/userinfo/icon-heart@2x.png'" />
                </view>
            </view>

            <!-- 日常 -->
            <view class="backlog-bg">
                <view class="backlog-b-item">
                    <img :src="'static/images/business/icon-rwjh.png'" />
                    <view class="font-title">任务计划</view>
                </view>
                <view class="backlog-b-item">
                    <img :src="'static/images/business/icon-rb.png'" />
                    <view class="font-title">日报</view>
                </view>
                <view class="backlog-b-item">
                    <img :src="'static/images/business/icon-sbgl.png'" />
                    <view class="font-title">设备管理</view>
                </view>
                <view class="backlog-b-item">
                    <img :src="'static/images/business/icon-jxgl.png'" />
                    <view class="font-title">绩效管理</view>
                </view>
            </view>

            <!-- 头像块 -->
            <view class="white-bg">
                <view class="list-item">
                    <img :src="'static/images/userinfo/icon-tx@2x.png'" class="l-icon" />
                    <text>头像</text>
                    <view class="list-right">
                        <img class="pic-img" :src="'static/images/userinfo/icon-userinfo.png'" />
                        <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                    </view>
                </view>
            </view>

            <!-- 登录管理，修改密码，版本更新块 -->
            <view class="white-bg">
                <view class="list-item item-padding">
                    <img :src="'static/images/userinfo/icon-dlgl@2x.png'" class="l-icon" />
                    <view>登录管理</view>
                    <view class="list-right">
                        <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                    </view>
                </view>
                <view class="item-border"></view>
                <view class="list-item item-padding">
                    <img :src="'static/images/userinfo/icon-xgmm@2x.png'" class="l-icon" />
                    <view>修改密码</view>
                    <view class="list-right">
                        <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                    </view>
                </view>
                <view class="item-border"></view>
                <view class="list-item item-padding">
                    <img :src="'static/images/userinfo/icon-bbgx@2x.png'" class="l-icon" />
                    <view class="item-text">版本更新 <view class="dot"></view></view>
                    <view class="list-right">
                        <text class="item-gray">Version 1.0.0</text>
                        <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                    </view>
                </view>
            </view>

            <!-- 退出登录 -->
            <button type="primary" plain="true" size="small" class="logout-btn" @click="handleLoginOut">退出登录</button>

            <!-- 底部加高度来避免tabbar遮挡 -->
            <!-- <view class="bottom-height"></view> -->
      </mescroll-uni>
    </view>
</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'

import { getUserInfo } from '@/api/auth.js'

import { useUserStore } from '@/stores/user';
const userStore = useUserStore()

// 1.头部导航栏
const navBarPaddingTop = ref(0);
onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})

// 下拉刷新
const mescrollRef = ref(null);
const mescrollInit = (mescroll) => {
    mescrollRef.value = mescroll;
};
const downOption = ref({
    auto: true,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});

// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        setTimeout(async ()=>{
            // mescroll.resetUpScroll();
        },500);
    } catch (error) {
        mescroll.endErr();
    } finally {
        setTimeout(async ()=>{
            mescroll.endSuccess();
        },500);
    }
}

// 2.获取用户基本信息
let userObj = ref({});
const selectUserInfo = async ()=>{
    let data = await getUserInfo({});
    userObj.value = data;
}
selectUserInfo()

// 3.退出登录
const handleLoginOut = async ()=>{
    userStore.logout();
    uni.reLaunch({
        url: '/pages/login/login',
    });
}

</script>

<style scoped>
.scroll-h{
  /* #ifdef APP-PLUS */
  height:calc(100vh - 30px) !important;
  /* #endif */
  /* #ifndef APP-PLUS */
  height: calc(100vh - 30px) !important;
  /* #endif */
}
:deep(.mescroll-upwarp){
  display:none
}
.head-pic {
    display: flex;
    padding: 40rpx 0rpx 10rpx 30rpx;
}

.head-pic .pic-img {
    width: 110rpx;
    height: 110rpx;
}

.head-pic .head-name {
    color: #fff;
    margin-left: 20rpx;
    padding: 10rpx 0;
}

.head-pic .head-name .nick {
    font-size: 36rpx;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

.head-pic .head-name .nick .nick-text {
    padding-right: 35rpx;
}

.head-pic .head-name .nick .level {
    position: absolute;
    right: 0;
    top: 30%;
    transform: translateY(-50%);
    width: 30rpx;
    height: 32rpx;
}

.head-pic .head-name .dept {
    color: #94F6FF;
    font-size: 28rpx;
    margin-top:10rpx;
}

.head-pic .head-right {
    margin-left: auto;
    background-color: #034FCC;
    border-radius: 15px 0 0 15px;
    color: #FFFFFF;
    font-size: 24rpx;
    padding: 5rpx 10rpx 5rpx 30rpx;
    display: flex;
    height: 36rpx;
}

.head-pic .head-right .font-ruzhi {
    margin-right: 10rpx;
}

.head-pic .head-right img {
    display: block;
    width: 28rpx;
    height: 25rpx;
    margin-left: auto;
    margin-top: 2px;
}

.backlog-bg {
    background: url('@/static/images/userinfo/bg-me@2x.png') no-repeat;
    background-size: 730rpx 250rpx;
    width: 690rpx;
    height: 250rpx;
    margin: 0 auto;
    display: flex;
    padding: 0 20rpx;
    align-items: center;
}

.backlog-b-item {
    width: 25%;
}

.backlog-b-item img{
    width: 90rpx;
    height: 90rpx;
    margin:0 auto 10rpx;
    display: block;
}

.backlog-b-item .font-title {
    font-size: 28rpx;
    text-align: center;
}

.white-bg{
    width:590rpx;/*690*/
    padding:30rpx 50rpx;
}

.list-item{
    display: flex;
    align-items: center;
    font-size: 32rpx;
}
.list-item.item-padding{
    padding:45rpx 0;
}

.list-item.item-padding:first-child{
    padding-top:20rpx;
}

.list-item.item-padding:last-child{
    padding-bottom:20rpx;
}

.item-border{
    height:1px;
    background-color: #E7E7E7;
    width:640rpx;
}
.list-item .l-icon{
    width:46rpx; 
    /* height: 46rpx; */
    margin-right:20rpx;
}
.list-item .list-right{
    margin-left: auto;
    display: flex;
    align-items: center;
}
.list-item .list-right .pic-img{
    width:72rpx;
    height: 72rpx;
    margin-right:20rpx;
}
.list-item .list-right .item-gray{
    color:#BFBFBF;
    font-size:28rpx;
    margin-right: 20rpx;
}
.list-item .item-text{
    display: flex;
    align-items: center;
}
.list-item .dot{
    margin-left:15rpx;
}

.logout-btn{
    width:360rpx;
    height: 80rpx;
    line-height: 75rpx;
    border-radius: 40rpx;
    background-color: #fff !important;
    font-size:36rpx !important;
    margin:109rpx auto;
}
</style>