<template>
  <j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false"/>
  <van-form @submit="saveUserInfoBtn">
    <div class="content">
      <j-gap height="120" background="#F9BF3A" opacity="0"/>
      <div class="action">
        <view class="tt">填写真实有效的信息，审核才会通过哦~</view>
        <van-field required v-model="userInfo.realName" type="text" label="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>
        <van-field required v-model="userInfo.cardNum" type="text" label="身份证号" placeholder="请输入真实身份证号" :rules="[{ required: true, message: '请输入真实身份证号' }]"/>
<!--        <van-field required label="身份证号" placeholder="请输入真实身份证号" v-model="userInfo.cardNum" readonly clickable @touchstart.stop="idCardKeyboardShow = true" :rules="[{ required: true, message: '请输入真实身份证号' }]"/>-->

<!--        <van-number-keyboard-->
<!--          :show="idCardKeyboardShow"-->
<!--          v-model="userInfo.cardNum"-->
<!--          extra-key="X"-->
<!--          close-button-text="完成"-->
<!--          @blur="idCardKeyboardShow = false"-->
<!--        />-->
      </div>

      <div class="action">
        <view class="tt">
          <view>*需本人身份证，且内容清晰可辨</view>
          <view>请您确认拍照权限已开启</view>
        </view>

        <view class="action-content">

          <view class="action-content-item">
            <van-uploader :rules="[{ required: true, message: '点击上传身份证人像面' }]" required :after-read="afterReadIdFront" :before-read="beforeRead" :max-count="1">
              <div class="id-card-box">
                <van-image v-if="userInfo.cardBackPicture" :height="px2vw(156)" :src="userInfo.cardBackPicture"
                           :width="px2vw(236)"/>
                <van-image v-if="!userInfo.cardBackPicture" :height="px2vw(156)" :src="getAssetsImages('my/idcard1.png')"
                           :width="px2vw(236)"/>
                <div :style="{fontSize: px2vw(26)}" style="color: #858B9C; width: 100%; text-align: center; padding-top: 10px">
                  点击上传身份证人像面
                </div>
              </div>
            </van-uploader>
          </view>

          <view class="action-content-item">
            <van-uploader :rules="[{ required: true, message: '点击上传身份证国徽面' }]" required :after-read="afterReadIdBack" :before-read="beforeRead" :max-count="1">
              <div class="id-card-box">
                <van-image v-if="userInfo.cardFrontPicture" :height="px2vw(156)" :src="userInfo.cardFrontPicture"
                           :width="px2vw(236)"/>
                <van-image v-if="!userInfo.cardFrontPicture" :height="px2vw(156)" :src="getAssetsImages('my/idcard1.png')"
                           :width="px2vw(236)"/>
                <div :style="{fontSize: px2vw(26)}" style="color: #858B9C; width: 100%; text-align: center; padding-top: 10px">
                  点击上传身份证国徽面
                </div>
              </div>
            </van-uploader>
          </view>

          <view class="action-content-item">
            <van-uploader :rules="[{ required: true, message: '点击上传手持身份证照' }]" required :after-read="afterReadAvatar" :before-read="beforeRead" :max-count="1">
              <div class="id-card-box">
                <van-image v-if="userInfo.handCardPicture" :height="px2vw(156)" :src="userInfo.handCardPicture"
                           :width="px2vw(236)"/>
                <van-image v-if="!userInfo.handCardPicture" :height="px2vw(156)" :src="getAssetsImages('my/idcard1.png')"
                           :width="px2vw(236)"/>
                <div :style="{fontSize: px2vw(26)}" style="color: #858B9C; width: 100%; text-align: center; padding-top: 10px">
                  点击上传手持身份证照
                </div>
              </div>
            </van-uploader>
          </view>


          <view style="width: 100%; padding: 20px 0">
            <view>拍摄要求</view>
            <view style="display: flex; justify-content: space-between; align-items: center">
              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard2.png')"/>
                <view class="gray_color font-22">√标准拍摄</view>
              </view>
              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard3.png')"/>
                <view class="gray_color font-22">×边框缺失</view>
              </view>
              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard4.png')"/>
                <view class="gray_color font-22">×照片模糊</view>
              </view>
              <view style="display: flex; justify-content: center; align-items: center; flex-flow: column">
                <van-image :height="px2vw(92)" :width="px2vw(148)" :src="getAssetsImages('my/idcard5.png')"/>
                <view class="gray_color font-22">×闪光强烈</view>
              </view>
            </view>
          </view>
        </view>



      </div>
    </div>

    <div style="padding: 0 20px 60px">
      <van-button
        color="linear-gradient(to right, #D2A64C, #F9D88D)"
        round
        style="width: 100%; "
        native-type="submit"
        :disabled="!useEdit || !(userInfo.realName && userInfo.cardNum)"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {getBorrowPage, getUserInfo, updateCustomerCard, uploadCommon} from "@/api";
import {resetData} from "@/utils/dataUtil";
import {getAssetsImages, px2vw} from "@/utils";
import {showToast} from "vant";
import {useRouter} from "vue-router";
import {useUpload} from "@/hooks/useUpload";

const idCardKeyboardShow = ref(false)

const userInfo = reactive({
  backCardNum: '',
  bankType: '',
  cardBackPicture: '',
  cardFrontPicture: '',
  handCardPicture: '',
  cardNum: '',
  companyAddress: '',
  companyAddressInfo: '',
  companyName: '',
  companyPhone: '',
  companyTitle: '',
  companyYear: '',
  customerAddress: '',
  customerAddressInfo: '',
  customerId: 0,
  id: 0,
  kinsfolkName: '',
  kinsfolkPhone: '',
  kinsfolkRef: '',
  realName: ''
})
const _getUserInfo = () => {
  getUserInfo().then(res => {
    resetData(userInfo, res)
  })
}

const borrowPage = {
  pageNum: 0,
  pageSize: 3,
}
const useEdit = ref(true)
const _getBorrowPage = () => {
  getBorrowPage(borrowPage).then(res => {
    useEdit.value = res.length === 0;
  })
}

const beforeRead = (file) => {
  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
    showToast('请上传 jpg 或者 png 格式图片');
    return false;
  }
  return true;
};

const afterReadAvatar = (file) => {
  // 此时可以自行将文件上传至服务器
  upLoadImage(file, 'handCardPicture')
};
const afterReadIdFront = (file) => {
  upLoadImage(file, 'cardBackPicture')
};
const afterReadIdBack = (file) => {
  upLoadImage(file, 'cardFrontPicture')
};

const upload = useUpload()

const upLoadImage = (file, flag) => {

  upload.aliOssUpload(file, url => {
    console.log(url)
    userInfo[flag] = url
  })

  // uploadCommon(file.file).then(res => {
  //   if (res.data.code == 200) {
  //     userInfo[flag] = res.data.data.url
  //   } else {
  //     showToast('上传失败');
  //   }
  // })
}

const router = useRouter()
const saveUserInfoBtn = () => {
  updateCustomerCard(userInfo).then(res => {
    console.log('')
    router.back()
  })
}



onMounted(() => {
  _getBorrowPage()
  _getUserInfo()
})

</script>

<style lang="scss" scoped>
.content {
  background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
  padding-bottom: 30px;


  .action {
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-flow: column;
    box-shadow: 0 0 1vw 0px #e0e0e0;
    &-content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      padding: 20px 20px;
      box-shadow: 0 0 1vw 0px #e0e0e0;

      &-item {
        margin: 20px 0;
      }

      .id-card-box {
        border-radius: 10px;
        box-shadow: 0 0 1vw 0px #e0e0e0;
        width: 500px;
        height: 300px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
    }

    .tt {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: #f6f9fd;
      color: #738aa4;
      padding: 20px 0;
    }
    //
  }

}

.font-22 {
  font-size: 22px;
}

</style>
