<!-- 微信授权信息 mpAuthorization  -->
<template>
  <view>
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-60 ss-flex-col">
      <view class="ss-flex ss-m-b-20">
        <view class="head-title ss-m-r-40 head-title-animation">完善资料</view>
      </view>
      <view class="head-subtitle">完善您的交友名片、个人相册</view>
    </view>

    <!-- 表单项 -->
    <uni-forms
      ref="accountLoginRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="140"
      labelAlign="center"
    >
      <!-- 获取头像昵称：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html -->
      <uni-forms-item name="qrcode" label="微信名片">
        <button
          class="ss-reset-button avatar-btn"
          @click="onChooseAvatar"
        >
          <image
            class="avatar-img"
            :src="sheep.$url.cdn(state.model.qrcode)"
            mode="aspectFill"
          />
          <text class="cicon-forward" />
        </button>
      </uni-forms-item>
	  <form-qrcode v-model="state.model.qrcodeShow"></form-qrcode>
	  <form-image :number="5" v-model="state.imgList"></form-image>
      <view class="foot-box">
        <button class="ss-reset-button authorization-btn" @tap="onConfirm"> 确认保存 </button>
      </view>
    </uni-forms>
  </view>
</template>

<script setup>
  import { computed, ref, reactive } from 'vue';
  import sheep from '@/sheep';
  import { closeAuthModal } from '@/sheep/hooks/useModal';
  import formQrcode from '@/sheep/components/s-auth-modal/components/formQrcode.vue';
  import formImage from '@/sheep/components/s-auth-modal/components/formImage.vue';
  import FileApi from '@/sheep/api/infra/file';
  import UserApi from '@/sheep/api/member/user';

  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  const userInfo = computed(() => sheep.$store('user').userInfo);

  const accountLoginRef = ref(null);
  
  // 数据
  const state = reactive({
    model: {
      nickname: userInfo.value.nickname,
      avatar: userInfo.value.avatar,
	  sex: userInfo.value.sex,
	  age: userInfo.value.age,
	  qrcode: userInfo.value.qrcode,
	  photo: userInfo.value.photo,
	  qrcodeShow: userInfo.value.qrcodeShow,
    },
	imgList: userInfo.value.photo ? userInfo.value.photo.split(',') : [],
    rules: {},
    disabledStyle: {
      color: '#999',
      disableColor: '#fff',
    },
  });

  function onChooseAvatar() {
	uni.chooseImage({
		count: 1, //默认9
		sourceType: ['album', 'camera'],
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		success: (res) => {
			for (let i = 0; i < res.tempFilePaths.length; i++) {
				uni.getImageInfo({
					src: res.tempFilePaths[i],
					success: (image) => {
						uploadAvatar(image.path);
					}
				});
			}
		}
	});
    
  }

  // 选择头像（来自文件系统）
  async function uploadAvatar(tempUrl) {
    if (!tempUrl) {
      return;
    }
    let { data } = await FileApi.uploadFile(tempUrl);
    state.model.qrcode = data;
  }

  // 确认授权
  async function onConfirm() {
    const { model, imgList } = state;
    const { qrcode } = model;
	if (!qrcode) {
	  sheep.$helper.toast('请上传微信名片');
	  return;
	}
	if (imgList.length < 1) {
	  sheep.$helper.toast('请上传相册');
	  return;
	}
	
    // 发起更新
    const { code } = await UserApi.updateUser({
      photo: imgList.join(','),
      qrcode: state.model.qrcode,
	  qrcodeShow: state.model.qrcodeShow,
    });
    // 更新成功
    if (code === 0) {
      sheep.$helper.toast('保存成功');
      await sheep.$store('user').getInfo();
      closeAuthModal();
    }
  }
</script>

<style lang="scss" scoped>
  @import '../index.scss';

  .foot-box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .authorization-btn {
    width: 686rpx;
    height: 80rpx;
    background-color: var(--ui-BG-Main);
    border-radius: 40rpx;
    color: #fff;
  }
  .avatar-img {
    width: 72rpx;
    height: 72rpx;
  }
  .cicon-forward {
    font-size: 30rpx;
    color: #595959;
  }
  .avatar-btn {
    width: 100%;
    justify-content: space-between;
  }
  
  .form-item {
	  
  }
</style>
