<script setup>
  import { reactive } from 'vue'
  import { useAuthUser } from '@/composables/useAuthUser'
  import PopupBox from '../components/popup-box.vue'
  import { chooseImage } from '@/utils/media.js'
  import { uploadSingleFile } from '@/utils/uploadFile'
  import { useUserStore } from '@/stores/user'
  import { navigateTo } from '../../../utils/router'

  const { updateUserInfo } = useUserStore()

  const itemList = [
    { title: '我的二维码', key: '1', value: '' },
    { title: 'ID', key: '2', value: 'userId' },
    { title: '昵称', key: '3', value: 'userName' },
    { title: '性别', key: '4', value: 'sex' },
    { title: '手机号码', key: '5', value: 'mobile' },
    { title: '个性签名', key: '6', value: 'perSignature' }
  ]
  /** 可修改的 key  */
  const MODIFY_KEY = ['3', '4', '6']

  const { userInfo } = useAuthUser()

  const popupData = reactive({
    show: false,
    title: '修改信息',
    name: '',
    key: '',
    value: ''
  })
  const formData = reactive({
    avatar: '',
    userName: '',
    sex: '',
    perSignature: ''
  })
  const upInfo = (key, value) => {
    if (key === '1') {
      navigateTo('/pages/my-index/qr-code/index')
      return
    }
    if (MODIFY_KEY.includes(key)) {
      const titleData = {
        3: '昵称',
        4: '性别',
        6: '个性签名'
      }[key]
      popupData.value = value
      popupData.key = key
      popupData.title = titleData
      popupData.name = userInfo.value[value]
      popupData.show = true
      return
    }
  }

  const editAvatar = async () => {
    const paths = await chooseImage({ count: 1 })
    const url = await uploadSingleFile(paths[0], {
      url: '/api/common/admin/upload/up/single'
    })
    formData.avatar = url
    updateUserInfo({ avatar: url })
  }

  const onConfirm = () => {
    if (MODIFY_KEY.includes(popupData.key)) {
      if (popupData.name === userInfo.value[popupData.value]) return
      if (popupData.name === '') return
      updateUserInfo({ [popupData.value]: popupData.name })
    }
  }
</script>

<template>
  <nav-bar isTopBg isPlaceholder title="个人中心"></nav-bar>
  <view class="personal-center">
    <view class="public-card" @click="editAvatar">
      <view class="left-img">
        <image
          v-if="userInfo.avatar"
          :src="userInfo.avatar"
          mode="aspectFill"
          class="avatar"
        ></image>
        <uni-icons v-else type="contact-filled" size="60"></uni-icons>
      </view>
      <view class="right-box">
        <text class="value">换头像</text>
        <uni-icons type="right" size="16" color="#999999"></uni-icons>
      </view>
    </view>

    <view
      v-for="(item, index) in itemList"
      :key="index"
      class="public-card"
      @click="upInfo(item.key, item.value)"
    >
      <view class="left-box">
        <text>{{ item.title }}</text>
        <text v-if="item.key === '6'" class="text">
          {{ userInfo[item.value] || '这个人很懒，什么也没有' }}
        </text>
      </view>
      <view class="right-box">
        <view v-if="!['1', '6'].includes(item.key)" class="value">
          <text v-if="item.key === '4'">
            {{
              userInfo[item.value] === '2'
                ? '未设置'
                : userInfo[item.value] === '0'
                ? '男'
                : '女'
            }}
          </text>
          <text v-else>{{ item.value ? userInfo[item.value] : '' }}</text>
        </view>
        <uni-icons type="right" size="16" color="#999999"></uni-icons>
      </view>
    </view>
    <popup-box
      v-model="popupData.show"
      v-model:name="popupData.name"
      :isSex="popupData.key === '4'"
      :title="popupData.title"
      @confirm="onConfirm"
    />
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';
  .personal-center {
    padding: 32rpx 24rpx;
  }
</style>
