<template>
  <div>
    <div class="flex justify-evenly w-full px-8 my-8">
      <n-input v-model:value="qq" type="text" placeholder="请输入qq号" @keyup.enter="submit" @input="inputChange"></n-input>
      <n-button class="w-32 ml-8" type="primary" size="medium" @click="submit">确认</n-button>
    </div>
    <div class="px-8" v-if="isSuccess">
      <div class="mb-2">手机号： <span class="text-pp-400">{{ result.phone }}</span></div>
      <div class="diqu">手机号地区： <span class="text-pp-400">{{ result.phonediqu }}</span></div>
    </div>
    <div class=" text-center text-[red]" v-else>
      该qq号不存在或未绑定手机号！
    </div>
  </div>
</template>

<script setup>
//mark import

//mark data
const qq = ref('');
const result = ref({});
const isSuccess = ref(true);
//mark method
function inputChange() {
  //只接受数字
  qq.value = qq.value.replace(/\D/g, '');

}
async function submit() {
  if (qq.value.length == 0) {
    return;
  }
  const res = await $http.mix.qq2phone(qq.value);
  console.log(res);

  if (res.status == 200) {
    result.value = res;
    isSuccess.value = true;

  } else {
    isSuccess.value = false;
  }
}
//mark 周期、内置函数等


</script>

<style scoped></style>