<template>
  <view class="page">
    <view class="bgbg">
      <view class="flex">
        <view class="imgbox">
          <image v-if="state.user.avatar" :src="state.user.avatar"/>
          <image v-else :src="config.baseUrl_api + '/fs/static/nodata.png'"/>
        </view>
        <view class="name">
          <view>{{ state.user?.dept?.deptName }}</view>
          <view>{{ state.user?.userName }}</view>
        </view>
      </view>
    </view>
    <view class="rMainBox">
      <uni-list :border="false" class="myList">
        <uni-list-item clickable showArrow thumb="/static/user_icon01.png" title="单位信息"
                       @click="goPath('/myCenter/teamInfo')">
        </uni-list-item>
        
        <uni-list-item clickable showArrow thumb="/static/user_icon02.png" title="会员认证"
                       @click="goPath('/myCenter/auth')">
        </uni-list-item>
        
        <!-- 			<uni-list-item thumb="/static/user_icon03.png" v-show="userType==2"  title="账户信息" showArrow clickable>
              </uni-list-item> -->
        
        <uni-list-item clickable showArrow thumb="/static/user_icon03.png" title="账号安全"
                       @click="goPath('/myCenter/safe')">
        </uni-list-item>
        <uni-list-item v-if="userType==2 || userType==6" clickable showArrow thumb="/static/user_icon04.png"
                       title="我的订单" @click="goPath('/myCenter/order')">
        </uni-list-item>
      
      </uni-list>
    
    </view>
    
    <view class="fixedBottom" style="background: transparent;box-shadow: none;">
      <button class="btn btn-red" style="border-radius: 50px;" @click="loginOut">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import * as api from '@/common/api.js';
import * as loginServer from '@/common/login.js';
import config from '@/config.js'
import {
  onLoad,
  onShow,
  onReady,
  onPullDownRefresh
} from '@dcloudio/uni-app';
import {
  ref, reactive,
  getCurrentInstance
} from 'vue';


const {
  proxy
} = getCurrentInstance()
const app = getApp();
const userType = ref('1')
const memberInfo = ref({})
const deptInfo = ref({})
let proId;
const svId = ref(null);
const numData = ref({});

const messageList = ref([])
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
})
onShow(() => {
  if (app.globalData.isLogin) {
    init()
  } else {
    app.firstLoadCallback = () => {
      init()
    };
  }
})
onLoad(option => {
  if (option.scene) {
    proId = decodeURIComponent(option.scene);
  } else {
    proId = option.proId;
  }
  if (uni.showShareMenu) {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  }
});

function loginOut() {
  uni.showModal({
    content: `确认退出吗？`,
    success: function (res) {
      if (res.confirm) {
        loginServer.logout().finally(() => {
          let path = '/login/login';
          uni.reLaunch({
            url: path
          });
        })
      }
    }
  })
}

function getUser() {
  api.getUserProfile().then((response) => {
    state.user = response.data.user
    if (state.user.avatar && state.user.avatar.indexOf('http') == -1) {
      state.user.avatar = config.baseUrl_api + state.user.avatar
    }
    state.roleGroup = response.data.roleGroup
    state.postGroup = response.data.postGroup
    uni.hideLoading();
  })
}

function init() {
  uni.showLoading({
    title: '加载中'
  });
  getUser()
  loginServer.getMyOwnMemberInfo().then(res => {
    userType.value = app.globalData.userType
    memberInfo.value = app.globalData.memberInfo
    deptInfo.value = app.globalData.dept || {}
    uni.hideLoading();
  })
}

function goPath(url) {
  uni.navigateTo({
    url: url
  })
}

</script>
<style lang="scss" scope>
.uni-list:after {
  display: none;
}

.page {
  width: 100vw;
  overflow: hidden;
}

.bgbg {
  .flex {
    align-items: center;
  }
  
  height: 280rpx;
  padding: 30rpx;
  
  .name {
    margin-left: 20rpx;
    font-size: 36rpx;
  }
  
  .imgbox {
    width: 120rpx;
    height: 120rpx;
    overflow: hidden;
    // background: #C7C7CD;
    // border: 4rpx solid #FFFFFF;
    border-radius: 50%;
    
    image {
      height: 120rpx;
      width: 120rpx;
      object-fit: cover;
    }
  }
}

.loginOutIcon {
  position: relative;
  left: 60rpx;
  // top: 180rpx;
  
  image {
    width: 50rpx;
    height: 50rpx;
  }
}

.flexbox {
  display: flex;
  justify-content: space-around;
  text-align: center;
  
  image {
    width: 90rpx;
    height: 90rpx;
    display: block;
    margin: auto;
  }
}

.image {
  width: 25px;
  height: 25px;
}

:deep(.uni-section) {
  background-color: transparent;
}

:deep(.uni-section .uni-section-header__content) {
  font-size: 44rpx;
  font-weight: bold;
  color: #29343C;
}

:deep(.uni-section .uni-section-header) {
  padding: 0 30rpx;
}

.potag {
  position: absolute;
  right: 60rpx;
  top: 0;
}

.girdFather {
  background: #fff;
  position: relative;
  top: -15rpx;
  padding: 1rpx 0 0;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  box-sizing: border-box;
  
  .girdBox {
    top: 0;
    padding: 0 0 15rpx;
    border-bottom: 20rpx solid #ecf0f6
  }
  
  .ttt {
    margin: 30rpx 0 20rpx;
    padding: 0 20rpx 0;
  }
}

.rMainBox {
  position: relative;
  top: -120rpx;
  box-sizing: border-box;
  padding: 20rpx 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  margin: 25rpx;
  overflow: hidden;
}
</style>