<template>
  <div class="page-container">
    <van-nav-bar
      :title="$t('auth.advanced')"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
      class="custom-nav-bar"
    />

    <div class="form-content">
      <h3 class="form-label">{{ $t('auth.name') }}</h3>
      <van-field
        v-model="form.name"
        :placeholder="$t('auth.pleaseInput')"
        class="blue-border-input-field"
      />

      <h3 class="form-label">{{ $t('auth.relationType') }}</h3>
      <van-field
        v-model="form.relation"
        is-link
        readonly
        :placeholder="$t('auth.pleaseSelect')"
        class="grey-input-field"
        @click="showRelationPicker = true"
      />

      <h3 class="form-label">{{ $t('auth.phone') }}</h3>
      <van-field
        v-model="form.phone"
        type="tel"
        :placeholder="$t('auth.pleaseInput')"
        class="grey-input-field"
      />
    </div>

    <div class="submit-bar">
      <van-button type="danger" block round @click="onSubmit">
        {{ $t('common.confirm') }}
      </van-button>
    </div>

    <van-popup v-model:show="showRelationPicker" round position="bottom">
      <van-picker
        :title="$t('auth.relationType')"
        :columns="relationColumns"
        @confirm="onRelationConfirm"
        @cancel="showRelationPicker = false"
        :confirm-button-text="$t('common.confirm')"
        :cancel-button-text="$t('common.cancel')"
      />
    </van-popup>
  </div>
</template>

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

const router = useRouter();
const { t } = useI18n();

const form = reactive({ name: '', relation: '', phone: '' });
const showRelationPicker = ref(false);

// ✅ 性能优化写法：使用 computed
// 这样即使不刷新页面，下拉菜单里的中文也会变成英文
const relationColumns = computed(() => [
  { text: '父母', value: 'parents' }, // 建议这里也可以换成 t('relation.parents')
  { text: '配偶', value: 'spouse' },
  { text: '子女', value: 'children' },
  { text: '兄弟姐妹', value: 'siblings' },
]);

const onRelationConfirm = ({ selectedOptions }) => {
  form.relation = selectedOptions[0].text;
  showRelationPicker.value = false;
};

const onSubmit = () => {
  console.log('Submit:', form);
  router.back();
};
</script>

<style scoped lang="less">
/* --- 重点修改：自定义导航栏样式 --- */
:deep(.custom-nav-bar) {
  /* 修改图标（返回箭头）颜色为黑色 */
  --van-nav-bar-icon-color: #323233;
  /* 修改标题颜色为黑色，保持一致 */
  --van-nav-bar-title-text-color: #323233;
  /* 如果有左侧文字，也改为黑色 */
  --van-nav-bar-text-color: #323233;
   --van-nav-bar-arrow-size: 19px;
}
.page-container { min-height: 100vh; background-color: #fff; display: flex; flex-direction: column; }
.form-content { flex: 1; padding: 10px 16px; }
.form-label { font-size: 15px; font-weight: bold; color: #323233; margin-bottom: 10px; margin-top: 20px; }
.submit-bar { padding: 20px 16px 40px; background-color: #fff; }

:deep(.van-cell.grey-input-field) {
  background-color: #f7f8fa; border-radius: 8px; padding: 12px 16px;
  &::after { display: none; }
}
:deep(.van-cell.blue-border-input-field) {
  background-color: #fff; border-radius: 8px; padding: 12px 16px;
  border: 1px solid #1989fa; &::after { display: none; }
}
</style>