<script setup>
  import { ref, watch } from 'vue'

  const show = defineModel({
    type: Boolean,
    default: false
  })

  const name = defineModel('name', {
    type: [String, Number],
    default: ''
  })

  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    /** 是否为性别选项 */
    isSex: {
      type: Boolean,
      default: false
    }
  })

  const emits = defineEmits(['confirm'])

  const inputDialog = ref(null)

  watch(
    () => show.value,
    v => {
      if (v) {
        // 'bottom'
        inputDialog.value.open()
      }
    }
  )

  const close = () => {
    show.value = false
  }
  const dialogInputConfirm = () => {
    close()
    emits('confirm')
  }
</script>

<template>
  <uni-popup ref="inputDialog" type="dialog">
    <uni-popup-dialog
      v-model="name"
      mode="input"
      :title="props.title"
      :placeholder="`请输入${props.title}`"
      @close="close"
      @confirm="dialogInputConfirm"
    >
      <uni-data-checkbox
        v-if="props.isSex"
        v-model="name"
        :localdata="[
          {
            text: '男',
            value: '0'
          },
          {
            text: '女',
            value: '1'
          },
          {
            text: '未知',
            value: '2'
          }
        ]"
      ></uni-data-checkbox>
    </uni-popup-dialog>
  </uni-popup>
</template>

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