<template>
  <view class="wrapper">
    <view class="oneText"> <span class="nameSpan">姓名：</span><input type="text" class="nameInp" placeholder="请输入姓名" v-model="name" /> </view>
    <view class="twoText"> <span class="cardSpan">身份证号：</span><input type="text" class="cardInp" placeholder="请输入身份证号" v-model="card" /> </view>
    <view class="cccc">
      <text class="cccText">请使用前置摄头录制一段2～3秒人脸视频，录制完成后上传进行实人认证</text>
      <button class="cccBut" @click="chooseVideo">{{ videoYes ? '重新录制' : '录制实人认证视频' }}</button>
    </view>
    <view class="postFrom" v-if="!logNice">
      <button type="primary" class="fromBut" @click="getAuthen">确认提交</button>
    </view>
    <view class="postFrom" v-if="logNice">
      <button class="fromBut" @click="back">返回</button>
    </view>
    <u-modal confirmText="我已知晓" :show="modalShow" @confirm="onModalConfirm">
      <view class="modal" :style="`max-height: ${modalHeight}rpx; overflow-y: scroll; white-space: pre-wrap`">
        <u-parse
          content="1.确保摄像头无遮挡物，录制清晰、稳定的视频。
							2.调整光线：选择明亮、均匀的环境，避免强光或阴影。
							3.角度和距离：将摄像设备置于与人脸平行的位置，并保持适当距离。
							4.简洁背景：选择无干扰的背景，突出人脸。
							5.面部配合：被拍摄者需保持自然面部表情，避免遮挡物。
							6.确保人脸清晰可见，无噪点或模糊现象。"
        />
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      card: '',
      videoUrl: {},
      videoYes: false,
      Jbool: false,
      logNice: false,
      modalShow: false,
    }
  },
  computed: {
    modalHeight() {
      // console.log(innerHeight);
      return Math.ceil(window.innerHeight * 2 * 0.6)
    },
  },
  methods: {
    chooseVideo() {
      // console.log(this.name,this.card);
      if (this.name == '') {
        return uni.$u.toast('请输入姓名')
      } else if (this.card == '') {
        return uni.$u.toast('请输入身份证号')
      }
      this.modalShow = true
    },
    back() {
      uni.navigateBack()
    },
    onModalConfirm() {
      this.modalShow = false
      uni.chooseVideo({
        sourceType: ['camera'],
        compressed: true,
        maxDuration: 4,
        camera: 'front',
        success: (res) => {
          // console.log(res.tempFile);
          this.videoYes = true
          this.videoUrl = res.tempFile
        },
        fail: (e) => {
          console.log(e)
        },
      })
    },
    getAuthen() {
      uni.showLoading({
        title: '加载中',
      })
      if (this.name == '') {
        return uni.$u.toast('请输入姓名')
      } else if (this.card == '') {
        return uni.$u.toast('请输入身份证号')
      } else if (!this.videoYes) {
        return uni.$u.toast('请完成实名验证')
      }
      uni.uploadFile({
        url: '/api/user/real_person_auth',
        file: this.videoUrl,
        name: 'video',
        formData: {
          name: this.name,
          id_card: this.card, //其他表单字段，可根据需求添加
        },
        success: function (res) {
          this.Jbool = false
          uni.hideLoading()
          return uni.$u.toast('实名认证完成')
          setTimeout(function () {
            uni.navigateTo({
              url: '../index/index',
            })
          }, 2000)
          // this.logNice = true
        },
        fail: function (err) {
          this.Jbool = false
          // uni.hideLoading()
          return uni.$u.toast('实名认证失败')
        },
      })
    },
  },
}
</script>

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