<script setup lang="ts">
import { ref, reactive } from "vue";
import { imgUrl } from "../../utils/http";
import { useMemberStore } from "@/stores";
import { userInfoUpdateApi } from "@/services/my";
import type { UserInfoT } from "@/types/my";

const valiFormData = reactive({
  userName: "",
  mail: "",
});

//从缓存取个人用户信息
const userInfo = useMemberStore();
//将缓存里边取出来的东西拿出来//放在这个用户的字段里
valiFormData.userName = userInfo.userInfo.userName;
valiFormData.mail = userInfo.userInfo.mail;
const valiForm = ref();
const submit = (ref: string) => {
  if (valiFormData.userName == "") {
    uni.showToast({
      title: "请填写名称",
      duration: 2000,
      icon: "error",
    });
    return;
  }
  userInfoUpdate({
    id: userInfo.userInfo.id,
    avatar: userInfo.userInfo.photoPath,
    userName: valiFormData.userName,
    mail: valiFormData.mail,
  });
};
const userInfoUpdate = async (val: UserInfoT) => {
  const res = await userInfoUpdateApi(val);
  //修改用户信息
  console.log("修改用户信息");
  if (res.code) {
    uni.showToast({
      title: "修改成功",
      duration: 2000,
      icon: "success",
    });
  }
};

//获取用户头像
const getAvatar = (e: any) => {
  //需要调用上传接口将图片上传至自己的服务器
  //然后返回个地址就是头像的地址
  uni.uploadFile({
    url: "/file/customUpload",
    filePath: e.detail.avatarUrl,
    name: "file",
    success: (res) => {
      let photo = `${imgUrl}${JSON.parse(res.data).data}`;
      console.log(photo);

      userInfo.userInfo.photoPath = photo;
      console.log(userInfo.userInfo);
      userInfo.saveUserInfo(userInfo.userInfo);
    },
  });
};
//提交并进行表单校验
//注释
// const valiForm = ref();
// const submit = (ref: string) => {
//   valiForm.value
//     .validate()
//     .then((res: any) => {
//       console.log("success", res);
//       uni.showToast({
//         title: `校验通过`,
//       });
//     })
//     .catch((err: any) => {
//       console.log("err", err);
//     });
// };
</script>
<template>
  <view class="my_edit">
    <uni-forms label-position="right" ref="valiForm" :modelValue="valiFormData">
      <uni-forms-item label="">
        <view class="avatar_class">
          <view>头像</view>
          <!-- 获取用户头像 -->
          <!-- 获取用户头像 -->
          <view>
            <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="getAvatar">
              <image
                style="
                  width: 80rpx;
                  height: 80rpx;
                  background-color: #eeeeee;
                  border-radius: 50%;
                "
                :src="userInfo.userInfo.photoPath"
              ></image>
              <!-- <u-avatar
              @click="handleAva"
              class="avatar"
              size="80"
                 :src="userInfo.userInfo.photo"
              :src="userStore.userAvatar"
            ></u-avatar> -->
            </button></view
          >

          <!-- <uni-file-picker
            style="width: 100rpx"
            limit="1"
            :del-icon="false"
            disable-preview
            :imageStyles="imageStyles"
            file-mediatype="image"
            >&nbsp;</uni-file-picker
          > -->
          <!-- <image
            @click="getAvatarFun"
            style="width: 200px; height: 200px; background-color: #eeeeee"
            src=""
          ></image> -->
        </view>
      </uni-forms-item>
      <uni-forms-item label="">
        <view class="name_class">
          <view>名字</view>
          <uni-easyinput
            :clearable="false"
            :inputBorder="false"
            v-model="valiFormData.userName"
            placeholder="请输入名字"
          ></uni-easyinput>
        </view>
      </uni-forms-item>
      <uni-forms-item label="">
        <view class="name_class">
          <view> 邮箱 </view>
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
            v-model="valiFormData.mail"
            placeholder="请输入邮箱"
          ></uni-easyinput>
        </view>
      </uni-forms-item>
      <uni-forms-item></uni-forms-item>
    </uni-forms>
    <button class="submit_user" @click="submit('valiForm')">提交</button>
  </view>
</template>
<style lang="scss">
.my_edit .uni-easyinput {
  text-align: right;
}

.my_edit .uni-easyinput__content {
  background-color: transparent !important;
}

page {
  height: 100%;
}

.my_edit {
  background: rgb(243, 250, 248);
  height: 100%;
  padding: 0rpx 20rpx;
  .submit_user {
    background: linear-gradient(rgb(0, 89, 255), rgb(153, 0, 255));
    color: #ffffff;
  }
  .avatar_class {
    padding-bottom: 14rpx;
    border-bottom: 2rpx solid #dbd8d8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .uni-file-picker {
      flex: none;
      width: auto;
    }

    .file-picker__box-content {
      border-color: #c5c2c2 !important;
    }
  }

  .name_class {
    padding-bottom: 14rpx;
    border-bottom: 2rpx solid #dbd8d8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
