<template>
  <v-dialog v-model="isActive" persistent :width="options.width">
    <v-card :color="options.color">
      <v-card-title>{{ options.title }}</v-card-title>
      <v-card-text>
        <v-text-field
          v-model="inputValue"
          :label="options.label"
          :placeholder="options.placeholder"
          :type="options.inputType || 'text'"
          outlined
          dense
        />
        <div v-if="options.text" class="mt-2">
          {{ options.text }}
        </div>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn text @click="cancel">{{ options.cancelText || '取消' }}</v-btn>
        <v-btn text @click="confirm">{{ options.confirmText || '确定' }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMessageStore } from '@/stores/message'

const messageStore = useMessageStore()
const inputValue = ref('')

// 使用 computed 获取响应式数据
const isActive = computed(() => messageStore.prompt?.isActive || false)
const options = computed(() => messageStore.prompt?.options || {})

// 确认操作
const confirm = () => {
  // 如果 options.onConfirm 存在则执行回调
  if (typeof options.value.onConfirm === 'function') {
    options.value.onConfirm(inputValue.value)
  }
  messageStore.hide('prompt')
  inputValue.value = '' // 清空输入值
}

// 取消操作
const cancel = () => {
  // 如果 options.onCancel 存在则执行回调
  if (typeof options.value.onCancel === 'function') {
    options.value.onCancel()
  }
  messageStore.hide('prompt')
  inputValue.value = '' // 清空输入值
}
</script>