<script setup>
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'

const router = useRouter();
const route = useRoute();
const showPicker = ref(false);
const pickerValue = ref([]);
const gender = ref('男')
const birthday = ref('')
const birthdayDate = ref([])
const showBirthdayPicker = ref(false)
const minDate = new Date(1950, 0, 1)
const maxDate = new Date(2025, 12, 31)

const { t } = useI18n()

const columns = computed(() => [
  { text: t('realAuth.male'), value: t('realAuth.male') },
  { text: t('realAuth.female'), value: t('realAuth.female') },
]);
const onConfirm = ({ selectedValues, selectedOptions }) => {
  pickerValue.value = selectedValues
  gender.value = selectedOptions[0].text
  showPicker.value = false
}
const onBirthdayConfirm = (value) => {
  birthdayDate.value = value.selectedValues
  birthday.value = value.selectedValues.join('-')
  showBirthdayPicker.value = false
}
definePageMeta({
  title: '实名认证',
  i18n: 'realAuth.title',
})
</script>

<template>
  <div class="px-[31px] bg-#fff w-100vw h-100vh pt-[46px]">
    <van-tabs animated swipeable>
      <van-tab :title="$t('realAuth.cnTab')" class="pt-[80px]">
        <div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.cnTabDesc') }}</div>
        <div class="mb-[100px]">
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :label="$t('realAuth.idCard')" clearable
              :placeholder="$t('realAuth.idCardPlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
          </div>
        </div>
        <div class="flex justify-between">
          <van-button style="width: 151px;height: 48px" color="#E9F1F8">
            <div class="text-#2B53AC text-16px">{{ $t('realAuth.cancel') }}</div>
          </van-button>
          <van-button style="width: 151px;height: 48px" color="#2B53AC">
            <div class="text-#FFFFFF text-16px">{{ $t('realAuth.confirm') }}</div>
          </van-button>
        </div>
      </van-tab>
      <van-tab :title="$t('realAuth.otherTab')" class="pt-[80px]">
        <div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.otherTabDesc') }}</div>
        <div class="mb-[100px]">
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field v-model="gender" is-link readonly name="picker" :label="$t('realAuth.gender')"
              @click="showPicker = true" />

          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field v-model="birthday" is-link readonly name="birthdayPicker" :label="$t('realAuth.birthday')"
              :placeholder="$t('realAuth.birthdayPlaceholder')" @click="showBirthdayPicker = true" />

          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :label="$t('realAuth.adress')" clearable
              :placeholder="$t('realAuth.adressPlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :label="$t('realAuth.bank')" clearable :placeholder="$t('realAuth.bankPlaceholder')"></van-field>
          </div>
          <div class="border-b-[1.7px] mt-[8px]">
            <van-field :label="$t('realAuth.bankCard')" clearable
              :placeholder="$t('realAuth.bankCardPlaceholder')"></van-field>
          </div>
          <div class="flex justify-between mt-[100px]">
            <van-button style="width: 151px;height: 48px" color="#E9F1F8">
              <div class="text-#2B53AC text-16px">{{ $t('realAuth.cancel') }}</div>
            </van-button>
            <van-button style="width: 151px;height: 48px" color="#2B53AC">
              <div class="text-#FFFFFF text-16px">{{ $t('realAuth.confirm') }}</div>
            </van-button>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
      <van-picker :columns="columns" :model-value="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <van-popup v-model:show="showBirthdayPicker" destroy-on-close position="bottom">
      <van-date-picker v-model="birthdayDate" :min-date="minDate" :max-date="maxDate"
        @cancel="showBirthdayPicker = false" @confirm="onBirthdayConfirm" />
    </van-popup>
  </div>
</template>

<style scoped>
:deep(.van-tabs__line) {
  height: 2px;
  width: 107px;
}

:deep(.van-cell) {
  padding-left: 0;
}
</style>