<template>
<view class="con-body">
    <view class="con-bg">
       
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" :title="myTitle" 
            :leftFlag="false" :rightFlag="false"
        ></customHeader>
        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

        <!-- 下拉刷新 -->
        <mescroll-uni ref="mescrollRef" @init="mescrollInit"
            :down="downOption"  @down="downCallback"
            :fixed="false" class="scroll-h"
        >
            <!-- 头像 -->
            <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.realname }}</view>
                        <img :src="`static/images/userinfo/num-${userObj.level}@2x.png`" class="level" />
                    </view>
                    <view class="dept">{{ userObj.deptName }} {{ userObj.postName }}</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" v-for="(item,index) in bizListFavorite" :key="index">
                    <img :src="'static/images/business/'+item.icon+'.png'" />
                    <view class="font-title">{{item.bizName}}</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" style="margin-top:20rpx;">
                <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" @click="handleVersion">
                    <img :src="'static/images/userinfo/icon-bbgx@2x.png'" class="l-icon" />
                    <view class="item-text">版本更新 <view class="dot" v-if="isCurrent==2"></view></view>
                    <view class="list-right">
                        <text class="item-gray">Version {{ appVersion }}</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>
    <!-- 弹窗模板 -->
    <!-- <customShowModal
        :title="title"
        :content="content" 
        :visible="visible" 
        @close="handleClose"
        @confirm="handleLoginOut"
        ref="showModel"
    ></customShowModal> -->
</view>
</template>

<script setup>
import { ref, onMounted,getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { getUserInfo,versionCheck } from '@/api/auth.js'
import { formatIOS } from '@/utils/status.js'
import { showAlert } from '@/utils/message.js'
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const networkEnv = ref(proxy.$NETWORK_ENV);//1-内网 2-外网

let myTitle = '我的';
myTitle = networkEnv.value==1?'我的 · 企业内网':'我的'


// 1.头部导航栏
const navBarPaddingTop = ref(0);
let appVersion = ref("1.0.0");//当前版本号
let newVersion = ref("1.0.0");//新版本号
let isCurrent = ref(undefined);//是否是当前版本 1-是 2-否
let systemInfo = uni.getSystemInfoSync();
onLoad(async(opt) => {
    uni.setStorageSync('page_cache',true);
    // #ifdef APP-PLUS
    appVersion.value=systemInfo.appWgtVersion; //当前版本号
    // #endif
    // #ifdef H5
    appVersion.value=systemInfo.appVersion;
    // #endif
})

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

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

    // 查询常用业务
    // let favoriteBizListStr = data.favoriteBizList || '';
    // let favoriteBizList = favoriteBizListStr.split(",");//常用业务
    // let list = [];
    // let bizList = data.bizList;//所有业务
    // bizList.forEach(item => {
    //     favoriteBizList.forEach(item2=>{
    //         if(item.bizId == item2){
    //             list.push(item);
    //         }
    //     })
    // });
    // bizListFavorite.value = list;

    // 岗位名称，取第0个显示
    let postName = data.postList[0]?data.postList[0].postName:'';
    userObj.value = {
        ...data,
        postName,
        level:5,//默认搞个5
        joinDay:1000,//默认1000天
    };
}

// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        selectUserInfo();
        getVersion();
    } catch (error) {
        mescroll.endErr();
    } finally {
        mescroll.endSuccess();
    }
}

// 3.查询是否有更新的版本显示点
const getVersion = async ()=>{
    let networkEnv = proxy.$NETWORK_ENV;//1-内网 2-外网
    let param = {
        // #ifdef APP-PLUS
        verNumber:systemInfo.appWgtVersion,//当前版本号
        // #endif
        // #ifdef H5
        verNumber : systemInfo.appVersion,
        // #endif
        os: formatIOS(systemInfo.osName),//操作系统 Android  IOS
        runEnv:networkEnv
    }
    let data = await versionCheck(param);
    isCurrent.value = data.isCurrent;
}

// 自定义弹窗
let title = ref('');
let content = ref('');
let visible = ref(false);
const showModel=()=>{
    title.value = '提示'
    content.value = '是否确认退出？';
    visible.value = true;
}
//关闭
const handleClose=()=>{
    visible.value = false;
}

// 3.退出登录
const handleLoginOut = async ()=>{

    showAlert('是否确认退出？','提示',true,()=>{
        userStore.logout();
        uni.reLaunch({
            url: '/pages/login/login',
        });
    })
    
}

// 4.跳转到版本
const handleVersion=()=>{
    uni.navigateTo({url:'/pages/userinfo/version'})
}

onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})

</script>

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