<route lang="json">
{ "style": { "navigationBarTitleText": "个人设置" } }
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import { updateMemberUserInfo } from '../../../core/libs/requests'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { setUserInfo } = userStore
const handleChooseAvatar = async ({ detail: { avatarUrl } }) => {
  const { data } = await uni.uploadFile({
    url: '/app-api/infra/file/upload',
    filePath: avatarUrl,
    name: 'file',
  })
  const { data: url } = JSON.parse(data)
  console.log(url)

  const { code, msg } = await updateMemberUserInfo({ avatar: url })
  if (code === 0) {
    uni.showToast({
      title: '修改成功',
      icon: 'none',
    })
    setUserInfo({
      ...userInfo.value,
      avatar: url,
    })
    return
  }
  uni.showToast({
    title: msg,
    icon: 'none',
    mask: true,
  })
}
</script>
<template>
  <div class="flex-grow bg-white flex flex-col p-4.5 gap-8">
    <div class="flex flex-col items-center">
      <button
        class="p-0 leading-0 bg-transparent"
        open-type="chooseAvatar"
        @chooseavatar="handleChooseAvatar"
      >
        <wd-img
          round
          width="97"
          height="97"
          :src="
            (userInfo.avatar ?? '') === '' ? 'https://via.placeholder.com/97x97' : userInfo.avatar
          "
          custom-class="border border-white border-solid"
        ></wd-img>
      </button>
      <div class="text-center text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
        更换头像
      </div>
    </div>
    <SectionHeading title="姓名" size="sm" :end-text="userInfo.nickname" end-arrow></SectionHeading>
    <SectionHeading title="性别" size="sm" end-text="设置" end-arrow></SectionHeading>
    <SectionHeading title="生日" size="sm" end-text="设置" end-arrow></SectionHeading>

    <!-- <SectionHeading title="手机号" size="sm" :end-text="''" end-arrow></SectionHeading>
    <SectionHeading title="公司" size="sm"></SectionHeading>
    <SectionHeading title="推荐人" size="sm"></SectionHeading>
    <SectionHeading title="经纪人" size="sm"></SectionHeading> -->
    <div class="flex-1"></div>
    <div><wd-button block :round="false">退出登录</wd-button></div>
  </div>
</template>
