<template>
  <div class="bg-[#f8f8f8] pt-20">
    <van-form>
      <van-cell-group inset>
        <van-field name="uploader" label="头像">
          <template #input>
            <div @click="handleChangeAvatar">
              <van-image
                v-if="form.headImageUrl"
                :src="form.headImageUrl"
                width="75px"
                height="75px"
                radius="37.5px"
              />
              <div
                v-else
                class="w-75 h-75 rounded-full bg-black-d flex items-center justify-center"
              >
                <span
                  class="iconfont icon-profile text-black-6"
                  style="font-size: 36px"
                ></span>
              </div>
            </div>

            <!-- <van-uploader
              style="--van-uploader-border-radius: 40px"
              :after-read="afterRead"
              :max-count="1"
              :deletable="false"
              :multiple="false"
              v-model="fileList"
              result-type="file"
              accept="image/*"
              reupload
            /> -->
          </template>
        </van-field>
        <van-field
          v-model="userInfo.showName"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          maxlength="20"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="userInfo.sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="userInfo.email"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          maxlength="100"
          :rules="[
            {
              required: true,
              validator: validatorEmail,
              message: '请填写正确的邮箱',
            },
          ]"
        />
        <van-field
          v-model="userInfo.job"
          name="职业"
          label="职业"
          placeholder="职业"
          maxlength="100"
        />
        <van-field
          v-model="userInfo.address"
          name="居住地"
          label="居住地"
          maxlength="100"
          placeholder="居住地"
        />
        <van-field
          v-model="userInfo.personalSign"
          rows="3"
          autosize
          label="个性签名"
          maxlength="80"
          type="textarea"
          placeholder="请输入留言"
          show-word-limit
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          @click="handleSubmit"
          round
          block
          style="background-color: #fa8446; color: #fff; font-size: 18px"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
const userInfoStore = useUserInfoStore();
const { userInfo } = storeToRefs(userInfoStore);

const form = reactive({
  showName: null,
  email: null,
  sex: null,
  email: null,
  headImageUrl: null,
  address: null,
  job: null,
  personalSign: null,
});

const validatorEmail = (val) =>
  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
    val
  );

const { open, onChange } = useFileDialog({
  accept: ".png,.png,.jpeg,.JPG,Png ",
});

function handleChangeAvatar() {
  open();
}

onChange(async (files) => {
  if (!files.length) return;

  const formData = new FormData();
  formData.append("uploadFile", files[0]);
  formData.append("asImage", true);
  formData.append("fieldName", "headImageUrl");

  try {
    showLoadingToast({
      message: "图片上传中...",
      duration: 1000000,
    });
    const { data } = await request("/website/tourism/user/upload", {
      method: "post",
      body: formData,
    });
    form.headImageUrl = data.fileUrl;
    closeToast();
    // userInfoStore.getUserInfo();
  } catch (error) {
    closeToast();
    showToast("图片上传失败");
    console.log("图片上传失败");
  }
});

watch(
  userInfo,
  () => {
    form.showName = userInfo.value.showName;
    form.email = userInfo.value.email;
    form.sex = userInfo.value.sex;
    form.headImageUrl = userInfo.value.headImageUrl;
    form.address = userInfo.value.address;
    form.job = userInfo.value.job;
    form.personalSign = userInfo.value.personalSign;
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {
  userInfoStore.getUserInfo();
});

async function handleSubmit() {
  try {
    await request("/website/tourism/user/update", {
      method: "post",
      body: {
        ...form,
      },
    });
    showToast("保存成功");
    userInfoStore.getUserInfo();
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped></style>
