<template>
    <view class="container">
        <view style="display: flex; justify-content: center; position: relative;">
            <up-avatar v-if="avatar" :src="avatar" @click="handleToAvatar" size="150"></up-avatar>
            <up-avatar v-else :src="avatar2" @click="handleToAvatar" size="150"></up-avatar>
            <view
                style="position: absolute; bottom: 0rpx; right: 220rpx; background-color: #bdbdbdd0; padding: 5px 5px 5px 5px; border-radius: 100px;">
                <view class="iconfont icon-zhaoxiangji  icon" style="font-size: 50rpx; color: white; "></view>
            </view>

        </view>

        <view>
            <!-- <up-list enableFlex=true>
                <up-list-item >
                   
                    <view style="display: flex; justify-content: space-between; width: 95%; border-bottom: 1px solid #000; ">
                        <span>昵称</span>
                        <view style="flex-basis: 40%; justify-content: flex-end;margin: 1%; "><up-input placeholder="请输入昵称" border="surround" v-model="nickName"></up-input></view>
                    </view>
                    
                </up-list-item>

                <up-list-item >
                    <view style="display: flex; justify-content: space-between; width: 95%; border-bottom: 1px solid #000; ">
                        <span>ID</span>
                        <view style="flex-basis: 40%; justify-content: flex-end; margin: 1%;"><up-input placeholder="请输入ID" border="surround" v-model="ID"></up-input></view>
                        
                    </view>
                </up-list-item>

                <up-list-item >
                    <view style="display: flex; justify-content: space-between; width: 95%; border-bottom: 1px solid #000; ">
                        <span>简介</span>
                        <view style="flex-basis: 40%; justify-content: flex-end; margin: 1%; "><up-input placeholder="请输入简介" border="surround" v-model="remark"></up-input></view>
                        
                    </view>
                </up-list-item>
            </up-list> -->
        </view>
 
        <uni-list>
            <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称"
                :rightText="user.nickName" />
            <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="ID"
                :rightText="user.phonenumber" />
            <!-- <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱"
                :rightText="user.email" /> -->

                <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="简介"
                :rightText="remark" />
                <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="性别"
                :rightText="sex" />
                <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="职称"
                :rightText="postGroup" />
                <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="院校"
                :rightText="infoSchool" />
                <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="院系"
                :rightText="infoDepartment" />
                <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="年级"
                :rightText="infoGrade" />

            <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位"
                :rightText="postGroup" />
            <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色"
                :rightText="roleGroup" />
            <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期"
                :rightText="user.createTime" />
        </uni-list>
        <view v-for="(item,index) in imgList" :key="index">
            <img :src="baseUrl+item"/>
        </view>
    </view>
</template>
  
  <script setup>
  import config from "@/config";
  const baseUrl = config.baseUrl;
  import { getUserProfile } from "@/api/system/user"
  import defaultAvatar from "@/static/images/profile.jpg";
  import { ref, getCurrentInstance } from 'vue';
  const { proxy } = getCurrentInstance();
  const avatar = ref(proxy.$store.state.user.avatar)
  const avatar2 = ref(defaultAvatar);
  const user = ref({})
  const roleGroup = ref("");
  const postGroup = ref("");
  const fruits = ref([])
  const imgList =  ref([])
          
    const  nickName = ref(proxy.$store.state.user.nickName) 
    const  ID = ref(proxy.$store.state.user.name) 
    const  sex = ref(proxy.$store.state.user.sex) 

    const  birthday = ref(proxy.$store.state.userInfo.birthday) /** 生日 */
    const  infoSchool = ref(proxy.$store.state.userInfo.infoSchool) /** 实名信息学校 */
    const  infoDepartment = ref(proxy.$store.state.userInfo.infoDepartment) /** 实名信息系别 */
    const  infoGrade = ref(proxy.$store.state.userInfo.infoGrade) /** 实名信息年级 */
    const  infoCode = ref(proxy.$store.state.userInfo.infoCode) /** 实名信息学号 */
    const  infoDocument = ref(proxy.$store.state.userInfo.infoDocument) /** 实名信息证件图片 */
    const  remark = ref(proxy.$store.state.userInfo.remark) /** 简介 */

    const imgInfo = () => {
  
        console.log('infoDocument.value:', infoDocument.value);
        imgList.value = infoDocument.value.split(",");
        console.log('imgList.value:', imgList.value);
    }
  const getUser = () => {
    getUserProfile().then(response => {
      user.value = response.data
      roleGroup.value  =  response.roleGroup 
      fruits.value = response.postGroup.split(",");
      console.log("信息：",fruits.value[0]);
      postGroup.value = fruits.value[0]
    })
    imgInfo();
  }
  function handleToAvatar() {
        proxy.$tab.navigateTo('/pages/mine/avatar/index')
      }
  getUser();
  
  </script>
  
  <style lang="scss">
  page {
    background-color: #ffffffd0;
  }
  </style>
  