<template>
  <div class="message-demo">
    <h1>消息提示框示例</h1>
    
    <div class="demo-section">
      <h2>组件方式使用</h2>
      <div class="btn-group">
        <button @click="showSimpleMessage">显示简单提示</button>
        <button @click="showConfirmMessage">显示确认提示</button>
        <button @click="showCancelMessage">显示带取消的提示</button>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>函数式调用（推荐）</h2>
      <div class="btn-group">
        <button @click="showFnAlert" class="fn-btn">alert 提示</button>
        <button @click="showFnConfirm" class="fn-btn">confirm 确认</button>
        <button @click="showFnCustom" class="fn-btn">自定义提示</button>
      </div>
      <div class="code-tip">
        <pre>
// 使用方法
import MessageBox from '@/utils/messageBox'

// 简单提示
MessageBox.alert('这是一条提示信息', '提示')
  .then(() => {
    console.log('用户点击了确定')
  })
  .catch(() => {})

// 确认提示
MessageBox.confirm('确定要执行该操作吗?', '请确认')
  .then(() => {
    console.log('用户确认了操作')
  })
  .catch(() => {
    console.log('用户取消了操作')
  })
        </pre>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>自定义设置</h2>
      <div class="form-group">
        <label>标题：</label>
        <input v-model="customTitle" placeholder="输入标题（可选）">
      </div>
      <div class="form-group">
        <label>消息内容：</label>
        <input v-model="customMessage" placeholder="输入消息内容">
      </div>
      <div class="form-group">
        <label>确认按钮文字：</label>
        <input v-model="customConfirmText" placeholder="默认：确定">
      </div>
      <div class="form-group">
        <label>取消按钮文字：</label>
        <input v-model="customCancelText" placeholder="默认：取消">
      </div>
      <div class="form-group checkbox">
        <input type="checkbox" id="customCancel" v-model="showCancel">
        <label for="customCancel">显示取消按钮</label>
      </div>
      <div class="form-group checkbox">
        <input type="checkbox" id="customOverlayClose" v-model="closeOnOverlay">
        <label for="customOverlayClose">点击遮罩层关闭</label>
      </div>
      <button @click="showCustomMessage" class="primary-btn">显示自定义提示</button>
    </div>
    
    <!-- 消息提示框组件 -->
    <MessageBox 
      :visible="messageVisible"
      :title="title"
      :message="message"
      :confirm="confirmBtn"
      :cancel="cancelBtn"
      :confirmText="confirmText"
      :cancelText="cancelText"
      :closeOnClickOverlay="overlayClose"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
    
    <!-- 操作结果 -->
    <div class="result-section" v-if="result">
      <div class="result-box">
        <p>操作结果: <span>{{ result }}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import MessageBox from '@/components/MessageBox.vue'
import MessageBoxFn from '@/utils/messageBox.js'

export default {
  name: 'MessageDemo',
  components: {
    MessageBox
  },
  data() {
    return {
      // 消息框配置
      messageVisible: false,
      title: '',
      message: '',
      confirmBtn: true,
      cancelBtn: false,
      confirmText: '确定',
      cancelText: '取消',
      overlayClose: false,
      
      // 用户操作结果
      result: '',
      
      // 自定义消息表单
      customTitle: '',
      customMessage: '这是一条自定义消息',
      customConfirmText: '',
      customCancelText: '',
      showCancel: false,
      closeOnOverlay: false
    }
  },
  methods: {
    // 组件方式 - 显示简单消息
    showSimpleMessage() {
      this.title = '提示';
      this.message = '这是一条简单的提示信息';
      this.confirmBtn = true;
      this.cancelBtn = false;
      this.confirmText = '确定';
      this.cancelText = '取消';
      this.overlayClose = false;
      this.messageVisible = true;
    },
    
    // 组件方式 - 显示确认消息
    showConfirmMessage() {
      this.title = '确认操作';
      this.message = '您确定要执行此操作吗？';
      this.confirmBtn = true;
      this.cancelBtn = false;
      this.confirmText = '确定';
      this.cancelText = '取消';
      this.overlayClose = false;
      this.messageVisible = true;
    },
    
    // 组件方式 - 显示带取消的消息
    showCancelMessage() {
      this.title = '确认操作';
      this.message = '此操作不可撤销，是否继续？';
      this.confirmBtn = true;
      this.cancelBtn = true;
      this.confirmText = '继续';
      this.cancelText = '放弃';
      this.overlayClose = true;
      this.messageVisible = true;
    },
    
    // 组件方式 - 显示自定义消息
    showCustomMessage() {
      if (!this.customMessage) {
        alert('请输入消息内容');
        return;
      }
      
      this.title = this.customTitle;
      this.message = this.customMessage;
      this.confirmBtn = true;
      this.cancelBtn = this.showCancel;
      this.confirmText = this.customConfirmText || '确定';
      this.cancelText = this.customCancelText || '取消';
      this.overlayClose = this.closeOnOverlay;
      this.messageVisible = true;
    },
    
    // 函数方式 - Alert提示
    showFnAlert() {
      MessageBoxFn.alert('这是一条函数调用的提示信息', '提示')
        .then(() => {
          this.result = '用户点击了确定按钮';
          setTimeout(() => this.result = '', 2000);
        })
        .catch(() => {});
    },
    
    // 函数方式 - Confirm确认
    showFnConfirm() {
      MessageBoxFn.confirm('此操作将永久删除该数据, 是否继续?', '警告')
        .then(() => {
          this.result = '用户确认了删除操作';
          setTimeout(() => this.result = '', 2000);
        })
        .catch(() => {
          this.result = '用户取消了删除操作';
          setTimeout(() => this.result = '', 2000);
        });
    },
    
    // 函数方式 - 自定义选项
    showFnCustom() {
      MessageBoxFn({
        title: '自定义设置',
        message: '这是一个带有自定义设置的提示框',
        confirmText: '我知道了',
        cancelText: '关闭',
        cancel: true,
        closeOnClickOverlay: true
      })
        .then(() => {
          this.result = '用户点击了"我知道了"按钮';
          setTimeout(() => this.result = '', 2000);
        })
        .catch(() => {
          this.result = '用户关闭了提示框';
          setTimeout(() => this.result = '', 2000);
        });
    },
    
    // 组件方式 - 处理确认按钮
    handleConfirm() {
      this.result = '用户点击了「' + this.confirmText + '」按钮';
      this.messageVisible = false;
      
      // 2秒后清除结果
      setTimeout(() => {
        this.result = '';
      }, 2000);
    },
    
    // 组件方式 - 处理取消按钮
    handleCancel() {
      this.result = '用户取消了操作';
      this.messageVisible = false;
      
      // 2秒后清除结果
      setTimeout(() => {
        this.result = '';
      }, 2000);
    }
  }
}
</script>

<style scoped>
.message-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}

h2 {
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #444;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  background-color: #e0e0e0;
}

.fn-btn {
  background-color: #65b687;
  color: white;
}

.fn-btn:hover {
  background-color: #549c72;
}

.primary-btn {
  background-color: #3273dc;
  color: white;
  font-weight: 500;
  padding: 10px 20px;
  margin-top: 20px;
}

.primary-btn:hover {
  background-color: #2366d1;
}

.code-tip {
  margin-top: 20px;
  background-color: #f8f8f8;
  border-radius: 6px;
  padding: 15px;
  overflow-x: auto;
}

.code-tip pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #555;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input:not([type="checkbox"]) {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group.checkbox label {
  margin-bottom: 0;
}

.result-section {
  margin-top: 30px;
}

.result-box {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
  border-left: 4px solid #3273dc;
}

.result-box p {
  margin: 0;
  color: #666;
}

.result-box span {
  font-weight: 600;
  color: #333;
}

@media (max-width: 768px) {
  .message-demo {
    padding: 20px 15px;
  }
  
  .demo-section {
    padding: 15px;
  }
}
</style> 