<template>
  <view class="page-wrapper global-wrapper bgF2">
    <JMainCard wrapPd="30rpx" pd="32rpx">
      <view class="photo-wrapper">
        头像
        <!-- <image :src="userInfo.avatarUrl" mode="scaleToFill" @tap="editAvatar" /> -->
        <JeepayUpLoad
          ref="upLoad"
          :imgUrl="userInfo.avatarUrl"
          :userIsShowClear="false"
          @uploadSuccess="uploadSuccess"
        />
      </view>
    </JMainCard>
    <JMainCard wrapPd="0 30rpx" pd="32rpx">
      <view class="photo-wrapper">
        名称
        <input type="text" v-model="userInfo.realname" />
      </view>
    </JMainCard>
    <JButton pd="30rpx" @HandleTouch="modifyUserInfo">保存</JButton>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { $modifyUser, $userInfo } from "@/http/apiManager.js"
import JMainCard from "@/components//newComponents/JMainCard/JMainCard"
import JButton from "@/components//newComponents/JButton/JButton"
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"
import jeepyPreview from "@/components/jeepayUpLoad/enlarge.vue"
onLoad(() => {
  getUserInfo()
})
const userInfo = ref({})
const getUserInfo = () => {
  $userInfo().then(({ bizData }) => {
    userInfo.value = bizData
  })
}

const uploadSuccess = (res) => {
  userInfo.value.avatarUrl = res.data
}
const modifyUserInfo = () => {
  uni.showLoading({
    title: "正在保存",
    mask: true,
  })
  $modifyUser({
    realname: userInfo.value.realname,
    avatarUrl: userInfo.value.avatarUrl,
  }).then((res) => {
    uni.hideLoading()
    uni.showToast({
      title: "保存成功",
      icon: "success|none",
      mask: true,
    })
  })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  .photo-wrapper {
    display: flex;
    justify-content: space-between;
    font-size: 33rpx;
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 10rpx;
    }
    input {
      text-align: right;
    }
  }
}
</style>
