<script setup lang="ts">
import { ref } from 'vue';

definePageMeta({
  layout: 'empty'
});

const dummy = ref<string>('phone');
const domain = ref(''); // 도메인 선택 부분

const domains = [
  { value: 'gmail.com', label: 'gmail.com' },
  { value: 'naver.com', label: 'naver.com' },
  { value: 'daum.net', label: 'daum.net' },
  { value: '직접 입력', label: '직접 입력' }
];

const handleDomainChange = (value) => {
  if (value !== '직접 입력') {
    domain.value = value;
  } else {
    domain.value = '';
  }
};
</script>

<template>
  <a-row justify="center" class="w-full h-full items-center">
    <a-col :span="12">
      <a-card
        bordered
        style="padding: 24px; background-color: #f9f9f9; border-radius: 8px"
      >
        <!-- 아이디 찾기 타이틀 -->
        <h2 style="text-align: center; font-weight: bold; font-size: 24px">
          비밀번호 재설정
        </h2>

        <!-- 검색 방법 선택 -->
        <div style="display: flex; justify-content: center; margin: 16px 0">
          <a-radio-group v-model:value="dummy">
            <a-radio defaultValue="phone">휴대폰으로 찾기</a-radio>
            <a-radio value="email">이메일로 찾기</a-radio>
          </a-radio-group>
        </div>

        <a-form :colon="false" label-align="left">
          <!-- 이름 -->
          <a-form-item
            label="이름"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-input placeholder="이름을 입력하세요" />
          </a-form-item>
          <!-- 아이디 -->
          <a-form-item
            label="아이디"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-input placeholder="아이디를 입력하세요" />
          </a-form-item>

          <!-- 휴대전화 (라디오 값이 'phone'일 때만 표시) -->
          <a-form-item
            v-if="dummy === 'phone'"
            label="휴대전화"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
          >
            <div style="display: flex; gap: 8px">
              <a-input style="width: 90px" maxlength="4" />
              <a-input style="width: 90px" maxlength="4" />
              <a-input style="width: 90px" maxlength="4" />
            </div>
          </a-form-item>

          <a-form-item
            v-if="dummy === 'email'"
            label="이메일"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
          >
            <!-- 이메일 입력 필드 -->
            <a-input v-model="dummy" style="width: 120px" />
            <span> @ </span>
            <!-- 도메인 입력 필드 -->
            <a-input v-model="dummy" style="width: 150px; margin-right: 18px" />
            <!-- 직접 입력 드롭다운 -->
            <a-select
              v-model="domains"
              style="width: 150px"
              @change="handleDomainChange"
            >
              <a-select-option value="직접 입력">직접 입력</a-select-option>
              <a-select-option value="gmail.com">gmail.com</a-select-option>
              <a-select-option value="naver.com">naver.com</a-select-option>
              <a-select-option value="daum.net">daum.net</a-select-option>
            </a-select>
          </a-form-item>

          <!-- 암호 찾기 버튼 -->
          <div style="text-align: center; margin-top: 16px">
            <a-button
              v-if="dummy === 'phone'"
              type="primary"
              style="background-color: #1e90ff; color: white; width: 100px"
            >
              휴대폰 인증
            </a-button>
            <a-button
              v-else
              type="primary"
              style="background-color: #1e90ff; color: white; width: 100px"
            >
              이메일 인증
            </a-button>
          </div>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>
