<script setup lang="ts">
import router from '@/router'

definePage({
  name: 'common-user-center',
  islogin: true,
  style: {
    navigationBarTitleText: '账户设置',
  },
})
const { userInfo, getUserAvatar } = storeToRefs(useUserStore())
async function handleChooseAvatar(e: UniHelper.ButtonOnChooseavatarEvent) {
  const res = await Apis.sys.uploadFile({ data: { filePath: e.avatarUrl, name: 'file' }, fileType: 'image', requestType: 'upload', headers: {
    'Content-Type': 'multipart/form-data',
  } })
  useUserStore().updataUserInfo({ ...userInfo.value, avatarUrl: res.url })
}
</script>

<template>
  <view class="pages p24rpx">
    <view class="rounded-16rpx bg-white bg-white p24rpx">
      <view class="flex items-center justify-between">
        <view>头像</view>
        <view class="h60rpx w60rpx">
          <wd-button :icon="getUserAvatar" type="icon" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar" />
        </view>
      </view>
      <view class="mt26rpx flex items-center justify-between" @click="router.push({ name: 'common-nickName' })">
        <view>昵称</view>
        <view>{{ userInfo.nickName }}</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.btn{
  all: unset;
}
.pages{
  :deep(){
    .wd-icon--image{
      width: 60rpx !important;
      height: 60rpx !important;
    }
  }
}
</style>
