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

definePageMeta({
  layout: 'empty'
});

const dummy = ref('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: '직접 입력' }
];
</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 value="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>

          <!-- 자동입력방지문자 (라디오 값이 'phone'일 때만 표시) -->
          <a-form-item
            v-if="dummy === 'phone'"
            label="자동입력방지문자"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
          >
            <div style="display: flex; gap: 8px">
              <a-input
                disabled
                value="564866"
                style="width: 100px; text-align: center"
              />
              <a-button>새로고침</a-button>
              <a-button>음성듣기</a-button>
            </div>
            <a-input
              placeholder="자동입력 방지문자를 입력하세요."
              style="margin-top: 8px"
            />
          </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: 60px" maxlength="4" />
              <a-input style="width: 60px" maxlength="4" />
              <a-input style="width: 60px" maxlength="4" />
              <a-button>인증번호</a-button>
            </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>

          <!-- 인증번호 (라디오 값이 'phone'일 때만 표시) -->
          <a-form-item
            v-if="dummy === 'phone'"
            label="인증번호"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-input placeholder="인증번호를 입력하세요" />
          </a-form-item>

          <!-- 아이디 찾기 버튼 -->
          <div style="text-align: center; margin-top: 16px">
            <a-button
              type="primary"
              style="background-color: #1e90ff; color: white; width: 100px"
            >
              아이디 찾기
            </a-button>
          </div>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>
