<template>
  <!-- <view class="dialog-overlay" @click.self="handleCancel">
    <view class="dialog-container">
      <view class="dialog-content">
        <view class="dialog-title">{{ title }}</view>
        <view class="dialog-message">{{ message }}</view>
        <view class="dialog-buttons">
          <button class="dialog-button dialog-cancel" @click="handleCancel">
            取消
          </button>
          <button class="dialog-button dialog-confirm" @click="handleConfirm">
            确认
          </button>
        </view>
      </view>
    </view>
  </view> -->
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示'
  },
  message: {
    type: String,
    default: '您确定要继续吗？',
  },
  category: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(['update:modelValue', 'confirm', 'cancel']);
const emit = emits;

const handleCancel = () => {
  emit('update:modelValue', false);
  emit('cancel');
};

const handleConfirm = () => {
  emit('update:modelValue', false);
  emit('confirm', props.category);
};
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 400px;
}

.dialog-content {
  text-align: center;
}

.dialog-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.dialog-message {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.dialog-buttons {
  display: flex;
  justify-content: space-around;
}

.dialog-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.dialog-cancel {
  background-color: #ccc;
  color: #000;
}

.dialog-confirm {
  background-color: #007BFF;
  color: #fff;
}
</style>