<template>
  <view class="normal-register-container">
    <!-- 基础表单校验 -->
    <uni-forms ref="valiForm"
      :rules="rules"
      :modelValue="formData">
      <uni-forms-item label="头像"
        required
        name="avatarUrl">
        <view class="header_wrap">
          <button class="avatar"
            open-type="chooseAvatar"
            @chooseavatar="chooseavatarFn">
            <img v-if="formData.avatarUrl"
              class="avatar_img"
              :src="formData.avatarUrl" />
            <img v-else
              class="avatar_img"
              src="/static/default_user.jpg">
          </button>
        </view>
      </uni-forms-item>
      <uni-forms-item label="姓名"
        required
        name="name">
        <uni-easyinput v-model="formData.name"
          placeholder="请填写姓名" />
      </uni-forms-item>
      <uni-forms-item label="身份证">
        <view class="id_card">
          <uni-file-picker fileMediatype="image"
            mode="grid"
            limit="1"
            return-type="object"
            title="正面图片"
            v-model="formData.idenFrontPhotoUrl"
            @select="selectIdenPhotoFrontFn"></uni-file-picker>
          <uni-file-picker fileMediatype="image"
            mode="grid"
            limit="1"
            return-type="object"
            title="反面图片"
            v-model="formData.idenReversePhotoUrl"
            @select="selectIdenPhotoBackFn"></uni-file-picker>
        </view>
      </uni-forms-item>
      <button class="bg-blue register-btn"
        @click="submit('valiForm')">提交注册</button>
    </uni-forms>
    <view class="reg-info">{{ phone }} 首次注册，补充资料完成注册</view>
  </view>
</template>

<script>
import { uploadFile, submitUserInfoAPI, loginAPI } from '../api'
import { v4 as uuidv4 } from 'uuid'
import storage from '../utils/storage'
import constant from '../utils/constant'

export default {
  created() {
    this.phone = storage.get(constant.loginPhone)
    this.openId = storage.get(constant.loginOpenId)
  },
  data() {
    return {
      phone: '',
      // 校验表单数据
      formData: {
        avatarUrl: undefined,
        name: '',
        idenFrontPhotoUrl: undefined, // 组件展示地址
        idenReversePhotoUrl: undefined,
        idenFrontUrl: '', // 后台需要的 OSS 上身份证图片地址
        idenBackUrl: '' // 后台需要的 OSS 上身份证图片地址
      },
      // 校验规则
      rules: {
        avatarUrl: {
          rules: [{
            required: true,
            errorMessage: '头像不能为空'
          }]
        },
        name: {
          rules: [{
            required: true,
            errorMessage: '名字不能为空'
          }]
        }
      }
    }
  },
  methods: {
    // 选择了头像
    async chooseavatarFn(obj) {
      this.formData.avatarUrl = await uploadFile(`avatarAndIdentify/${this.phone}/${uuidv4()}-avatar.png`, obj.detail.avatarUrl)
    },
    // 选择了身份证-正面
    async selectIdenPhotoFrontFn(obj) {
      this.formData.idenFrontUrl = await uploadFile(`avatarAndIdentify/${this.phone}/${uuidv4()}-frontId.png`, obj.tempFiles[0]?.path)
    },
    // 选择了身份证-背面
    async selectIdenPhotoBackFn(obj) {
      this.formData.idenBackUrl = await uploadFile(`avatarAndIdentify/${this.phone}/${uuidv4()}-backId.png`, obj.tempFiles[0]?.path)
    },
    // 注册完成
    submit(ref) {
      this.$refs[ref].validate().then(async res => {
        // 手机号首次需要调用此接口注册-拿到后台 token（以后调用后台登录接口才能通过拿到 token）
        await submitUserInfoAPI({
          avatarUrl: this.formData.avatarUrl,
          openId: storage.get(constant.loginOpenId),
          name: this.formData.name,
          idenFrontPhotoUrl: this.formData.idenFrontUrl,
          idenReversePhotoUrl: this.formData.idenBackUrl,
          phone: this.phone,
          phoneCode: '111111' // 先随便写一个
        })
        // 单独调用登录拿到 token
        const { data } = await loginAPI({
          phone: this.phone,
          openId: this.openId
        })
        this.$store.commit('SET_TOKEN', data.token)
        this.$store.commit('SET_USER', data.user)

        this.$modal.msgSuccess("注册成功")
        // 申请地理位置权限
        // await this.$store.dispatch('GetLocation')
        this.$tab.switchTab('/pages/home/index')
      }).catch(err => {
        console.log('err', err)
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

::v-deep .header_wrap {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #d8d8d8;
}

::v-deep .uni-forms-item__label text {
  font-size: 30rpx;
}

::v-deep .uni-easyinput__content-input {
  font-size: 30rpx !important;
}

::v-deep .uni-easyinput__placeholder-class {
  font-size: 30rpx !important;
}

.file-title {
  font-size: 30rpx !important;
}

.normal-register-container {
  width: 100%;
  padding: 40rpx;


  button {
    padding-left: 0 !important;
  }

  // 头像
  .avatar {
    background: transparent;
    float: left;
  }

  .avatar::after {
    border: none;
  }

  .avatar_img {
    width: 120rpx;
    height: 120rpx;
  }

  // 身份证
  .id_card {
    display: flex;
    justify-content: space-between;
  }

  .uni-file-picker__header text:last-of-type {
    display: none;
  }

  .uni-file-picker__container {
    // padding: 40rpx;
    margin-right: 10px;
    padding-top: 10rpx;
  }

  .file-picker__box {

    height: 200rpx !important;
    width: 100% !important;
    background-color: #f1f1f1;

    .icon-add {
      background-color: #c9c9c9;
    }
  }

  .register-btn {
    border-radius: 50rpx;
  }

  // 注册提示信息
  .reg-info {
    color: #999;
    text-align: center;
    margin-top: 30rpx;
    font-size: 30rpx;
  }
}

::v-deep .uni-file-picker {
  margin-top: 5rpx !important;
}
</style>
