<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'
definePageMeta({
  name: 'personal-info',
})
const {t} = useI18n()
const {t:$t} = useI18n()
const showPicker = ref(false)
const showPicker1 = ref(false)
const onConfirm = () => {

}
const router = useRouter()
const columns = ref([
  {text: t('realAuth.male'), value: 1},
  {text: t('realAuth.female'), value: 2},
])
const goCountryRegion=()=>{
  router.push({
    path:'/countryRegion'
  })
}
const adress=ref('')
</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">
      {{$t('personal.title')}}
    </div>
    <div class="grow-1 px-34px">
      <van-field type="tel" :label-width="161" :label="$t('personal.text')" class="mb-10px" :placeholder="$t('login.phonePlaceholder')">
        <template #label>
          <div class="flex">
            <div class="mr-41px whitespace-nowrap">{{$t('profile.phone')}}</div>
            <div @click="goCountryRegion">
              <span class="mr-13px">+ 86</span>
              <van-icon name="arrow-down" class="text-#777777"/>
            </div>
          </div>
        </template>
      </van-field>
      <van-field :label="$t('profile.name')" class="mb-10px" :placeholder="$t('realAuth.namePlaceholder')"/>
      <x-van-select :label="$t('realAuth.gender')" :columns="columns"/>
      <x-van-date :label="$t('realAuth.birthday')"/>
      <van-field v-model="adress" :label="$t('realAuth.adress')" class="mb-10px" :placeholder="$t('realAuth.adressPlaceholder')"/>
      <van-field :label="$t('realAuth.bank')" class="mb-10px" :placeholder="$t('realAuth.bankPlaceholder')"/>
      <van-field :label="$t('realAuth.bankCard')" class="mb-10px" :placeholder="$t('realAuth.bankCardPlaceholder')"/>
    </div>
    <div class="h-81px bg-#fff flex justify-center pt-7px border-t">
      <van-button color="#2B53AC" class="w-213px van-btn-h-38px">{{$t('personal.next')}}</van-button>
    </div>
  </div>
</template>

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

</style>