<template>
  <div v-if="dialog.visible.value" class="dialog-overlay open" @click.self="dialog.closeDialog(null)">
    <div class="dialog-box">
      <div class="dialog-msg">{{ dialog.message.value }}</div>
      <input
        v-if="dialog.type.value !== 'confirm'"
        class="dialog-input"
        :type="dialog.inputType.value"
        v-model="dialog.inputValue.value"
        @keydown.enter="dialog.closeDialog(dialog.inputValue.value)"
        ref="inputEl"
      >
      <div class="dialog-btns">
        <button class="dialog-cancel" @click="dialog.closeDialog(dialog.type.value === 'confirm' ? false : null)">取消</button>
        <button
          v-if="dialog.type.value === 'date'"
          class="dialog-cancel"
          @click="dialog.closeDialog('')"
        >清除</button>
        <button
          :class="dialog.type.value === 'confirm' ? 'dialog-danger' : 'dialog-ok'"
          @click="dialog.closeDialog(dialog.type.value === 'confirm' ? true : dialog.inputValue.value)"
        >确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { useDialog } from '../composables/useDialog'

const dialog = useDialog()
const inputEl = ref(null)

watch(() => dialog.visible.value, (v) => {
  if (v && dialog.type.value !== 'confirm') {
    nextTick(() => inputEl.value?.focus())
  }
})
</script>
