<template>
  <div class="messagebox-demo">
    <h1>TUIMessageBox 消息弹框</h1>
    <p class="component-desc">模拟系统的消息提示框，用于消息提示、确认消息和提交内容。</p>

    <!-- Basic Usage -->
    <DemoBlock
      title="基础用法"
      description="调用 alert、confirm、prompt 方法即可打开消息弹框。"
      :code="basicCode"
    >
      <div class="demo-row">
        <TUIButton @click="showAlert">Alert 提示</TUIButton>
        <TUIButton @click="showConfirm">Confirm 确认</TUIButton>
        <TUIButton @click="showPrompt">Prompt 输入</TUIButton>
      </div>
    </DemoBlock>

    <!-- Different Types -->
    <DemoBlock
      title="不同类型"
      description="通过 type 属性设置消息类型，支持 success、warning、error、info。"
      :code="typeCode"
    >
      <div class="demo-row">
        <TUIButton @click="showSuccess">成功</TUIButton>
        <TUIButton @click="showWarning">警告</TUIButton>
        <TUIButton @click="showError">错误</TUIButton>
        <TUIButton @click="showInfo">信息</TUIButton>
      </div>
    </DemoBlock>

    <!-- Custom Content -->
    <DemoBlock
      title="自定义内容"
      description="可以自定义按钮文本和显示关闭按钮。"
      :code="customCode"
    >
      <div class="demo-row">
        <TUIButton @click="showCustom">自定义内容</TUIButton>
      </div>
    </DemoBlock>

    <!-- Instance Close -->
    <DemoBlock
      title="实例 close 方法"
      description="调用返回的实例的 close 方法可以手动关闭消息弹框。"
      :code="closeCode"
    >
      <div class="demo-row">
        <TUIButton @click="showWithCloseHandle">显示 MessageBox</TUIButton>
        <TUIButton :disabled="!messageBoxHandle" @click="closeMessageBox">关闭 MessageBox</TUIButton>
      </div>
    </DemoBlock>

    <!-- API Documentation -->
    <section class="api-section">
      <h2>API</h2>

      <div class="api-table-wrapper">
        <h3>配置选项</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">属性名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">类型</div>
            <div class="api-table-cell">默认值</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">title</div>
            <div class="api-table-cell">标题</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">content</div>
            <div class="api-table-cell">内容</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">type</div>
            <div class="api-table-cell">消息类型</div>
            <div class="api-table-cell enum-type" title="'success' | 'warning' | 'error' | 'info'">enum</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">modal</div>
            <div class="api-table-cell">是否显示遮罩层</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">true</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">showClose</div>
            <div class="api-table-cell">是否显示关闭按钮</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">cancelText</div>
            <div class="api-table-cell">取消按钮文本</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">'取消'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">confirmText</div>
            <div class="api-table-cell">确认按钮文本</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">'确定'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">showInput</div>
            <div class="api-table-cell">是否显示输入框</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">inputValue</div>
            <div class="api-table-cell">输入框的初始值</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">''</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">inputPlaceholder</div>
            <div class="api-table-cell">输入框占位符</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">duration</div>
            <div class="api-table-cell">显示时长 (ms)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">-</div>
          </div>
        </div>
      </div>

      <div class="api-table-wrapper">
        <h3>方法</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">方法名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">参数</div>
            <div class="api-table-cell">返回值</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">alert</div>
            <div class="api-table-cell">显示提示框</div>
            <div class="api-table-cell">options</div>
            <div class="api-table-cell">MessageBoxHandle</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">confirm</div>
            <div class="api-table-cell">显示确认框</div>
            <div class="api-table-cell">options</div>
            <div class="api-table-cell">MessageBoxHandle</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">prompt</div>
            <div class="api-table-cell">显示输入框</div>
            <div class="api-table-cell">options</div>
            <div class="api-table-cell">MessageBoxHandle</div>
          </div>
        </div>
      </div>

      <div class="api-table-wrapper">
        <h3>MessageBoxHandle 实例方法</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">方法名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">参数</div>
            <div class="api-table-cell">返回值</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">close</div>
            <div class="api-table-cell">关闭 MessageBox</div>
            <div class="api-table-cell">-</div>
            <div class="api-table-cell">void</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TUIButton, TUIMessageBox } from '../src/components';
import type { MessageBoxHandle } from '../src/components/MessageBox';
import DemoBlock from './components/DemoBlock.vue';

const messageBoxHandle = ref<MessageBoxHandle | null>(null);

const showAlert = async () => {
  try {
    await TUIMessageBox.alert({
      title: '提示',
      content: '这是一条提示消息',
    });
  } catch {
    console.log('User closed the dialog');
  }
};

const showConfirm = async () => {
  try {
    await TUIMessageBox.confirm({
      title: '确认',
      content: '确定要执行此操作吗？',
    });
    console.log('User confirmed');
  } catch {
    console.log('User cancelled');
  }
};

const showPrompt = async () => {
  try {
    const result = await TUIMessageBox.prompt({
      title: '请输入',
      content: '请输入您的姓名',
      inputPlaceholder: '姓名',
    });
    console.log('User input:', result);
  } catch {
    console.log('User cancelled');
  }
};

const showSuccess = async () => {
  await TUIMessageBox.alert({ title: '成功', content: '操作成功完成', type: 'success' });
};

const showWarning = async () => {
  await TUIMessageBox.alert({ title: '警告', content: '请注意此操作的风险', type: 'warning' });
};

const showError = async () => {
  await TUIMessageBox.alert({ title: '错误', content: '操作执行失败', type: 'error' });
};

const showInfo = async () => {
  await TUIMessageBox.alert({ title: '信息', content: '这是一条普通信息', type: 'info' });
};

const showCustom = async () => {
  await TUIMessageBox.alert({
    title: '自定义内容',
    content: '这是一条自定义消息，支持更多个性化设置',
    confirmText: '知道了',
    showClose: true,
  });
};

const showWithCloseHandle = () => {
  messageBoxHandle.value = TUIMessageBox.confirm({
    title: '实例 close 方法测试',
    content: '这个 MessageBox 可以通过实例的 close 方法关闭',
    duration: Infinity,
  });
};

const closeMessageBox = () => {
  if (messageBoxHandle.value) {
    messageBoxHandle.value.close();
    messageBoxHandle.value = null;
  }
};

// Code examples
const basicCode = `<script setup>
import { TUIMessageBox } from '@/components';

const showAlert = async () => {
  await TUIMessageBox.alert({
    title: '提示',
    content: '这是一条提示消息',
  });
};

const showConfirm = async () => {
  try {
    await TUIMessageBox.confirm({
      title: '确认',
      content: '确定要执行此操作吗？',
    });
    console.log('User confirmed');
  } catch {
    console.log('User cancelled');
  }
};

const showPrompt = async () => {
  try {
    const result = await TUIMessageBox.prompt({
      title: '请输入',
      content: '请输入您的姓名',
      inputPlaceholder: '姓名',
    });
    console.log('User input:', result);
  } catch {
    console.log('User cancelled');
  }
};
<\/script>`;

const typeCode = `<script setup>
import { TUIMessageBox } from '@/components';

const showSuccess = async () => {
  await TUIMessageBox.alert({ title: '成功', content: '操作成功完成', type: 'success' });
};

const showWarning = async () => {
  await TUIMessageBox.alert({ title: '警告', content: '请注意此操作的风险', type: 'warning' });
};

const showError = async () => {
  await TUIMessageBox.alert({ title: '错误', content: '操作执行失败', type: 'error' });
};

const showInfo = async () => {
  await TUIMessageBox.alert({ title: '信息', content: '这是一条普通信息', type: 'info' });
};
<\/script>`;

const customCode = `<script setup>
import { TUIMessageBox } from '@/components';

const showCustom = async () => {
  await TUIMessageBox.alert({
    title: '自定义内容',
    content: '这是一条自定义消息',
    confirmText: '知道了',
    showClose: true,
  });
};
<\/script>`;

const closeCode = `<script setup>
import { ref } from 'vue';
import { TUIMessageBox } from '@/components';

const messageBoxHandle = ref(null);

const showWithCloseHandle = () => {
  messageBoxHandle.value = TUIMessageBox.confirm({
    title: '实例 close 方法测试',
    content: '这个 MessageBox 可以通过实例的 close 方法关闭',
    duration: Infinity,
  });
};

const closeMessageBox = () => {
  if (messageBoxHandle.value) {
    messageBoxHandle.value.close();
    messageBoxHandle.value = null;
  }
};
<\/script>`;
</script>

<style lang="scss" scoped>
@import './styles/demo-common.scss';
</style>
