<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">{{ pageTitle }}</h3>

      <van-field
        v-model="form.area"
        is-link
        readonly
        :placeholder="$t('auth.pleaseSelect')"
        class="grey-input-field"
        @click="showAreaPicker = true"
      />

      <!-- 已修正 Key -->
      <h3 class="form-label">{{ $t('auth.detail') }}</h3>

      <van-field
        v-model="form.detail"
        rows="4"
        autosize
        type="textarea"
        :placeholder="$t('auth.detailPlaceholder')"
        class="grey-input-field textarea-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="showAreaPicker" round position="bottom">
      <van-picker
        :title="$t('auth.area')"
        :columns="areaColumns"
        @confirm="onAreaConfirm"
        @cancel="showAreaPicker = false"
        :confirm-button-text="$t('common.confirm')"
        :cancel-button-text="$t('common.cancel')"
      />
    </van-popup>
  </div>
</template>

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

const router = useRouter();
const route = useRoute();
const { t, locale } = useI18n();

const pageType = route.query.type;

const pageTitle = computed(() => {
  const _ignore = locale.value; // 强制依赖
  // console.log(_ignore,'lll')
  if (pageType === 'work') return t('home.workAddr');
  return t('auth.area');
});

const form = reactive({ area: '', detail: '' });
const showAreaPicker = ref(false);

const areaColumns = [
  { text: 'Beijing', value: '110000' },
  { text: 'Shanghai', value: '310000' },
  { text: 'Shenzhen', value: '440300' },
];

const onAreaConfirm = ({ selectedOptions }) => {
  form.area = selectedOptions.map(option => option.text).join('');
  showAreaPicker.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; }
:deep(.van-cell.grey-input-field) {
  background-color: #f7f8fa; border-radius: 8px; padding: 12px 16px;
  &::after { display: none; }
  .van-field__control { font-size: 15px; color: #323233; &::placeholder { color: #969799; } }
}
.textarea-field { min-height: 100px; }
.submit-bar { padding: 20px 16px 40px; background-color: #fff; }
</style>