<template>
  <view class="px-base">
    <CuNavbar title="修改个人资料">
      <template #right>
        <view class="text-24rpx text-white" @click="submit">保存</view>
      </template>
    </CuNavbar>
    <view class="card-shadow bg-white rounded-19rpx p-base">
      <uv-form
        labelWidth="150rpx"
        :model="form"
        ref="formRef"
        errorType="toast"
        :rules="rules"
      >
        <uv-form-item label="头像" prop="avatar">
          <view class="flex justify-end w-full" @click="chooseAvatar">
            <view class="w-90rpx h-90rpx overflow-hidden rounded-full">
              <image class="w-full h-full" :src="form.avatar"></image>
            </view>
          </view>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item label="姓名" prop="name">
          <uv-input
            v-model="form.name"
            inputAlign="right"
            :border="`none`"
            placeholder="请输入姓名"
            type="text"
          ></uv-input>
        </uv-form-item>
        <uv-line color="#f5f5f5"></uv-line>
        <uv-form-item label="手机号" prop="phone">
          <uv-input
            v-model="form.phone"
            inputAlign="right"
            placeholder="请输入手机号"
            :border="`none`"
            type="number"
            maxlength="11"
          ></uv-input>
        </uv-form-item>
      </uv-form>
    </view>

    <uv-modal
      ref="modalRef"
      title="提示"
      content="确定修改？"
      @confirm="onUpdateUserInfo"
      :showCancelButton="true"
    ></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index.vue'
import { ref, reactive, computed, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/request'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const modalRef = ref(null)
const userInfo = computed(() => {
  return userStore.userInfo
})

const formRef = ref(null)
const form = reactive({
  name: '',
  phone: '',
  avatar: '',
})
const rules = reactive({
  name: [{ required: true, message: '请输入姓名' }],
  phone: [{ required: true, message: '请输入手机号' }],
  avatar: [{ required: true, message: '请上传头像' }],
})

const submit = () => {
  formRef.value.validate().then(() => {
    modalRef.value.open()
  })
}

const onUpdateUserInfo = () => {
  http.post('/auth/profile', form).then(() => {
    uni.showToast({
      title: '修改成功',
      icon: 'success',
    })
    userStore.fetchUserInfo()
    uni.navigateBack()
  })
}

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    http
      .upload('/fileupload', {
        filePath: url,
        name: 'file',
      })
      .then((res) => {
        resolve(res.url)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      console.log(res)
      try {
        const data = await uploadFilePromise(res.tempFilePaths[0])
        form.avatar = data
      } catch (error) {
        console.log(error)
      }
    },
  })
}

watch(
  userInfo,
  (val) => {
    form.name = val.name
    form.phone = val.phone
    form.avatar = val.avatar
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>
