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

const showModal = defineModel('showModal', { required: true })

const newPhone = ref('')
</script>

<template>
  <n-modal v-model:show="showModal" preset="card" style="width: 600px" title="修改手机号">
    <n-form label-placement="left">
      <n-p>你需要使用新的手机号接收一个验证码来完成修改。</n-p>
      <n-form-item path="to" label="新的手机号">
        <n-input v-model:value="newPhone" />
      </n-form-item>
      <n-flex>
        <n-button type="warning" disabled>获取验证码</n-button>
        <n-button type="tertiary">暂不支持喵！</n-button>
        <n-tag type="info">验证码有效期为 5 分钟，且不允许多个同时有效。</n-tag>
      </n-flex>
    </n-form>
  </n-modal>
</template>

<style scoped></style>
