<script setup>
import { ref } from "vue";
import { LoadUserInfoAPI, updateUserInfoAPI } from "../services/auth";
import { useRouter } from "vue-router";
import { post } from "../utils/request";
import { delImg } from "../utils/tools";
import { areaList } from "@vant/area-data";
const router = useRouter();
const realname = ref("");
const birthday = ref(["1999", "10", "10"]);
const age = ref("");
const avatar = ref("");
const area = ref("");
const address = ref("");
const showPicker = ref(false);
const sex = ref(1);

const minDate = new Date(1800, 1, 2);
const maxDate = new Date(2023, 10, 12);
//出生日期选择器
const onConfirmBirthday = ({ selectedValues }) => {
  birthday.value = selectedValues.join("/");
  showPicker.value = false;
};

const showArea = ref(false);
const addressClickHandle = () => {
  showArea.value = true;
};
//地区选择器
const onConfirm = ({ selectedOptions }) => {
  showArea.value = false;
  address.value = selectedOptions.map((item) => item.text).join("/");
};
LoadUserInfoAPI().then((res) => {
  // console.log(res.data);
  birthday.value = res.result.userInfo.birthday;  
  sex.value = res.result.userInfo.sex;
  avatar.value = res.result.userInfo.avatar;
  area.value = res.result.userInfo.area;
  address.value = res.result.userInfo.address;
  realname.value = res.result.userInfo.realname;
  age.value = res.result.userInfo.age;
  if (avatar.value) {
    //如果图片存在设置预览图
    fileList.value = [
      {
        url: delImg(avatar.value),
      },
    ];
  }
});

//保存修改信息
const save = async () => {
  const res = await updateUserInfoAPI({
    birthday: birthday.value,
    age: age.value,
    avatar: avatar.value,
    area: area.value,
    address: address.value,
    realname: realname.value,
    sex: sex.value,
  });
  router.push({
    name: "User",
  });
};

const fileList = ref([]); //需要一个url属性表示当前图片的地址

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  // console.log(file);
  const formData = new FormData(); //实现文件上传
  formData.append("file", file.file);
  post("/api/v1/common/upload_file", formData).then((res) => {
    avatar.value = res.data;
    // console.log(res);
    fileList.value = [
      {
        url: delImg(res.data),
      },
    ];
  });
};
</script>
<template>
  <div class="info">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- $router.back()回退 -->

    <van-uploader
      style="margin: 20px auto; display: block"
      :after-read="afterRead"
      v-model="fileList"
      :maxCount="1"
    />
    <van-form @submit="save">
      <van-cell-group inset>
        <van-field
          v-model="realname"
          label="姓名"
          placeholder="请输入昵称"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="birthday"
          is-link
          readonly
          name="datePicker"
          label="生日"
          placeholder="点击选择出生日期"
          :rules="[{ required: true, message: '请选择生日' }]"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmBirthday"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="age"
          label="年龄"
          type="digit"
          placeholder="请输入年龄"
          :rules="[{ required: true, message: '请填写年龄' }]"
        />
        <van-field
          v-model="area"
          label="楼栋信息"
          placeholder="请输入楼栋信息"
          :rules="[{ required: true, message: '请填写楼栋信息' }]"
        />
        <van-field
          v-model="address"
          is-link
          readonly
          name="address"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="addressClickHandle"
        />
        <van-popup v-model:show="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <van-field name="radio" label="单选框">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="1" label-disabled>男</van-radio>
              <van-radio name="2" label-disabled>女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<style scoped>
:deep(.van-uploader__wrapper) {
  justify-content: center;
}
</style>
