<script setup>
import {useI18n} from "vue-i18n";
import XVanSelect from '@/components/x-van-select/index.vue'
import XVanDate from '@/components/x-van-date/index.vue'
import {codeAuthStore} from "@/stores-collect-code/auth/index.js";
import {message} from "@/components/x-message/useMessage.js";
import {fddInfo, offlineQrcode} from "~/api-collect-code/goods/index.js";
import {signOffline} from "~/api/goods/index.js";
const {formData,number,auctionArtworkUuid,qrUid,qrData}=codeAuthStore()
definePageMeta({
  layout: 'default',
  i18n: 'menu.profile',
})

const {t} = useI18n()
const router = useRouter()
const route = useRoute()
const columns = ref([
  {text: t('realAuth.male'), value: 1},
  {text: t('realAuth.female'), value: 2},
])
const columns1 = ref([
  {text: '身份证', value: 1},
  {text: '护照', value: 2},
  {text: '其他', value: 3},
])
const goCountryRegion=()=>{
  router.push({
    path:'/countryRegion'
  })
}
function isFormComplete(obj) {
  for (const key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      if (!isFormComplete(obj[key])) {
        return false;
      }
    } else if (obj[key] === "") {
      return false;
    }
  }
  return true;
}

const getData=async ()=>{
const res=await  offlineQrcode({
  qrUid:qrUid.value
})
  if (res.status===0){
    qrData.value=res.data
  }
}
const initData= async ()=>{
  if (route.query.number){
    number.value=Number(route.query.number)
  }
  if (route.query.qrUid){
    qrUid.value=route.query.qrUid
  }
  //扫付款码进来才有的步骤
  if (number.value==2){
    await getData()
    if (qrData.value.payStatus===4){
      router.replace('/collectCode/payment')
    }
  }

  if (route.query.zone){
    formData.value.countryCode=route.query.zone
  }else {
    formData.value.countryCode='86'
  }
}
const nextClick=async ()=>{
  console.log('number.value',number.value)
  //扫号牌
if (number.value==1){
  if (!isFormComplete(formData.value)){
    message.warning('请填写完整信息')
    return
  }
  //国内签署要用法大大
  if (formData.value.countryCode==='86'&&formData.value.cardType===1){
    const res=await fddInfo({
      phone:formData.value.phone
    })
    if (res.status===0){
      if (res.data.status===2){
        router.push('/collectCode/signature/protocol')
      }else {
        const res1=await signOffline({
          userInfo:formData.value,
          signOrder:Number(number.value),
        })
        if (res1.status===0){
          window.location.href=res1.data.fddVerifyUrl
        }

      }
    }
    //国外签署直接去确认然后签字版
  }else {
    router.push('/collectCode/signature/protocol')
  }
  //扫付款
}else if(number.value==2) {
  if (!formData.value.phone&&formData.value.countryCode&&formData.value.userName){
    message.warning('请填写完整信息')
    return
  }
  router.push('/collectCode/signature/protocol')
}
}
initData()
</script>

<template>
  <div
      class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] h-screen-nav bg-cover pt-77px flex-grow-1 flex flex-col ">
    <div class="text-16px text-#191919 font-bold mb-40px px-34px">
      请填写个人相关信息
    </div>
    <div class="grow-1 px-34px">
      <van-field v-model="formData.phone" type="tel" :label-width="161" label="文本" class="mb-10px" placeholder="请输入手机号">
        <template #label>
          <div class="flex">
            <div class="mr-41px whitespace-nowrap">手机号</div>
            <div @click="goCountryRegion">
              <span class="mr-13px">+ {{ formData.countryCode }}</span>
              <van-icon name="arrow-down" class="text-#777777"/>
            </div>
          </div>
        </template>
      </van-field>
      <van-field label="姓名" v-model="formData.userName" class="mb-10px" placeholder="请输入姓名"/>
      <template v-if="number===1">
        <x-van-select  v-model="formData.gender" label="性别" :columns="columns"/>
        <x-van-date  label="出生日期" v-model="formData.birthday" />
        <van-field  label="家庭住址" v-model="formData.address" class="mb-10px" placeholder="请输入家庭住址"/>
        <van-field  label="所属银行" v-model="formData.bankName" class="mb-10px" placeholder="请输入所属银行"/>
        <van-field  label="银行卡号码" v-model="formData.bankNo" class="mb-10px" placeholder="请输入银行卡号码"/>
        <x-van-select  v-model="formData.cardType" label="证件类型" :columns="columns1"/>
        <van-field  label="证件号" v-model="formData.cardId" class="mb-10px" placeholder="请输入证件号"/>
      </template>
    
    </div>
    <div class="h-81px bg-#fff flex justify-center pt-7px border-t shrink-0">
      <van-button color="#2B53AC" class="w-213px van-btn-h-38px" @click="nextClick">下一步</van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.van-cell.van-field){
  padding-left: 0;
}

</style>