<template>
  <view class="normal-register-container">

    <!-- 基础表单校验 -->
    <uni-forms ref="valiForm"
      :rules="rules"
      :modelValue="formData">
      <uni-forms-item label="头像"
        required
        name="avatarUrl">
        <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>
      </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>
      <view>本手机号第一次注册，请补充资料完成注册登录</view>
    </uni-forms>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { uploadFile, submitUserInfoAPI, loginAPI } from '../api'
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)
    // this.formData.avatarUrl = this.user.avatarUrl
    // this.formData.name = this.user.nickName
  },
  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: '名字不能为空'
          }]
        }
      }
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    // 选择了头像
    async chooseavatarFn(obj) {
      this.formData.avatarUrl = await uploadFile(`avatarAndIdentify/${this.phone}/${this.phone}-avatar.png`, obj.detail.avatarUrl)
    },
    // 选择了身份证
    async selectIdenPhotoFrontFn(obj) {
      this.formData.idenFrontUrl = await uploadFile(`avatarAndIdentify/${this.phone}/${this.phone}-frontId.png`, obj.tempFiles[0].path)
    },
    async selectIdenPhotoBackFn(obj) {
      this.formData.idenBackUrl = await uploadFile(`avatarAndIdentify/${this.phone}/${this.phone}-backId.png`, obj.tempFiles[0].path)
    },
    submit(ref) {
      this.$refs[ref].validate().then(async res => {
        //　TODO: 后面需要后台提供促销员信息注册接口
        const result = 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)

        uni.showToast({
          title: `注册成功`
        })
        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;
}

.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;
  }
}
</style>
