<script setup lang="ts">
import { manualBindApi } from '@/api'
import hud from '@/utils/hud'
import { computed, ref } from 'vue'

defineOptions({ name: 'ManualBindChild' })
const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'finished'): void
}>()

const show = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val)
    if (val) {
      childAccount.value = ''
    }
  },
})
const childAccount = ref('')

// 确认手动绑定
function confirmHandBind() {
  if (!childAccount.value.trim()) {
    hud.error('请输入孩子账号')
    return
  }

  hud.load({
    task: async () => {
      const res = Number(await manualBindApi(childAccount.value))
      if (res === 1) {
        hud.success('绑定成功')
      } else if (res === 0) {
        hud.error('绑定失败')
      } else if (res === 2) {
        hud.success('已向管理员发送绑定请求')
      }
      emit('update:modelValue', false)
      emit('finished')
    },
    option: '绑定',
  })
}
</script>

<template>
  <mj-dialog v-model="show" title="手动绑定孩子账号" okText="绑定" :ok="confirmHandBind">
    <input v-model="childAccount" class="single-input" placeholder="请输入孩子账号" type="text" />
  </mj-dialog>
</template>

<style lang="scss" scoped></style>
