<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-21 17:21:34
 * @FilePath: /swx/src/pages/apxUserInfo/index.vue
 * @Description: 补充资料
-->
<template>
  <div class="join-activity-page">
    <view class="activity-title">
      <view class="box">
        <text class="bg-gradient" style="font-size: 1.25rem;">请完善个人信息</text>
      </view>
    </view>
    <view class="at-input">
      <view class="at-input__container">
        <label class="h5-label at-input__title at-input__title--required">头像</label>
        <van-uploader v-if="!has_image" @after-read="afterRead">
          <view class="">
            <van-icon :name="icon_upload" size="3rem" color="" class="upload-icon" />
          </view>
        </van-uploader>
        <view v-else class="upload-box">
          <van-image :round="true" width="3rem" height="3rem" :src="uploader_image" />
          <van-icon name="clear" size="1.5rem" color="#000" class="upload-close" @tap="removeUploadImage" />
        </view>
      </view>
    </view>
    <AtInput required :border="true" title="昵称" type='text' placeholder='请输入昵称' v-model:value="nickname" />
  <bottom-button @on-submit="onSubmit">提交</bottom-button>
  </div>
  <van-toast id="van-toast" />

</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref, onMounted } from "vue";
import { AtInput } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/input.scss";
import bottomButton from "@/components/bottom-button";
import icon_upload from '@/images/icon/qiandao@2x.png'
import BASE_URL from '@/utils/config';
import Toast from '@/components/vant-weapp/toast/toast';
import { editUserAPI, infoUserAPI } from '@/api/User/index';

const nickname = ref('');
const has_image = ref(false)
const uploader_image = ref('')
const afterRead = (event) => {
  wx.showLoading({
    title: '上传中',
    mask: true
  });
  const { file } = event.detail;
  // 获取上传URL
  wx.uploadFile({
    url: BASE_URL + '/admin/?m=srv&a=upload',
    filePath: file.url,
    name: 'file',
    header: {
      'content-type': 'multipart/form-data',
    },
    success: function (res) {
      let upload_data = JSON.parse(res.data);
      wx.hideLoading({
        success: () => {
          if (res.statusCode === 200) {
            has_image.value = true;
            uploader_image.value = upload_data.data.src;
          } else {
            wx.showToast({
              icon: 'error',
              title: '服务器错误,稍后重试！',
              mask: true
            })
          }
        },
      });
    }
  });
}
const removeUploadImage = () => {
  has_image.value = false;
  uploader_image.value = ''
}

const onSubmit = async () => {
  if (!uploader_image.value) {
    Toast('头像不能为空');
    return false;
  }
  if (!nickname.value) {
    Toast('昵称不能为空');
    return false;
  }
  const params = {
    nickname: nickname.value,
    avatar: uploader_image.value
  }
  const { code, data } = await editUserAPI(params);
  if (code) {
    Taro.showToast({
      title: '保存成功',
      icon: 'success',
      duration: 2000
    });
    Taro.navigateBack()
  }
}

onMounted(async () => {
  const { code, data } = await infoUserAPI();
  if (code) {
    nickname.value = data.user.nickname;
    if (data.user.avatar) {
      has_image.value = true;
      uploader_image.value = data.user.avatar;
    }
  }
})
</script>

<script>
import "./index.less";

export default {
  name: "apxUserInfoPage",
};
</script>