<template>
  <div class="TUIToast-demo">
    <h1 class="page-title">TUIToast 消息提示</h1>
    <p class="page-description">常用于主动操作后的反馈提示。</p>

    <!-- Basic Usage -->
    <DemoBlock
      title="基础用法"
      description="从顶部出现，3 秒后自动消失。"
      :code="basicCode"
    >
      <TUIButton @click="showBasic">显示消息提示</TUIButton>
    </DemoBlock>

    <!-- Different Types -->
    <DemoBlock
      title="不同类型"
      description="用来显示「成功、警告、消息、错误」类的操作反馈。"
      :code="typeCode"
    >
      <TUIButton @click="showSuccess">成功</TUIButton>
      <TUIButton @click="showWarning">警告</TUIButton>
      <TUIButton @click="showError">错误</TUIButton>
      <TUIButton @click="showInfo">信息</TUIButton>
    </DemoBlock>

    <!-- Multiple Toasts -->
    <DemoBlock
      title="同时显示多个"
      description="可以同时显示多个 Toast 消息。"
      :code="multipleCode"
    >
      <TUIButton @click="showMultipleToasts">显示两个 Toast</TUIButton>
    </DemoBlock>

    <!-- Custom Duration -->
    <DemoBlock
      title="自定义时长"
      description="通过 duration 属性自定义显示时长。"
      :code="durationCode"
    >
      <TUIButton @click="showCustomDuration">显示 5 秒</TUIButton>
    </DemoBlock>

    <!-- With Close Button -->
    <DemoBlock
      title="显示关闭按钮"
      description="设置 showClose 属性显示关闭按钮。"
      :code="closeCode"
    >
      <TUIButton @click="showWithClose">带关闭按钮</TUIButton>
    </DemoBlock>

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

      <!-- Options -->
      <div class="api-table-wrapper">
        <h3>TUIToast 配置选项</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">message</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">TOAST_TYPE</div>
            <div class="api-table-cell">TOAST_TYPE.INFO</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">3000</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">offset</div>
            <div class="api-table-cell">距离顶部的偏移量 (px)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">60</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">showIcon</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">onClose</div>
            <div class="api-table-cell">关闭时的回调函数</div>
            <div class="api-table-cell">() => void</div>
            <div class="api-table-cell">-</div>
          </div>
        </div>
      </div>

      <!-- TOAST_TYPE -->
      <div class="api-table-wrapper">
        <h3>TOAST_TYPE 类型</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>
          <div class="api-table-row">
            <div class="api-table-cell">TOAST_TYPE.SUCCESS</div>
            <div class="api-table-cell">成功提示</div>
            <div class="api-table-cell">绿色</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">TOAST_TYPE.WARNING</div>
            <div class="api-table-cell">警告提示</div>
            <div class="api-table-cell">橙色</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">TOAST_TYPE.ERROR</div>
            <div class="api-table-cell">错误提示</div>
            <div class="api-table-cell">红色</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">TOAST_TYPE.INFO</div>
            <div class="api-table-cell">信息提示</div>
            <div class="api-table-cell">蓝色</div>
          </div>
        </div>
      </div>

      <!-- Return Value -->
      <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>
          <div class="api-table-row">
            <div class="api-table-cell">close</div>
            <div class="api-table-cell">关闭 Toast 的方法</div>
            <div class="api-table-cell">() => void</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { TUIButton, TUIToast, TOAST_TYPE } from '@/components';
import DemoBlock from './components/DemoBlock.vue';

const showBasic = () => {
  TUIToast({
    message: '这是一条消息提示',
    type: TOAST_TYPE.INFO,
  });
};

const showSuccess = () => {
  TUIToast({
    message: '操作成功完成',
    type: TOAST_TYPE.SUCCESS,
  });
};

const showWarning = () => {
  TUIToast({
    message: '请注意此操作的风险',
    type: TOAST_TYPE.WARNING,
  });
};

const showError = () => {
  TUIToast({
    message: '操作执行失败',
    type: TOAST_TYPE.ERROR,
  });
};

const showInfo = () => {
  TUIToast({
    message: '这是一条信息提示',
    type: TOAST_TYPE.INFO,
  });
};

const showMultipleToasts = () => {
  TUIToast({
    message: '第一个 Toast 消息',
    type: TOAST_TYPE.SUCCESS,
  });
  TUIToast({
    message: '第二个 Toast 消息',
    type: TOAST_TYPE.WARNING,
  });
};

const showCustomDuration = () => {
  TUIToast({
    message: '这条消息将显示 5 秒',
    type: TOAST_TYPE.INFO,
    duration: 5000,
  });
};

const showWithClose = () => {
  TUIToast({
    message: '点击右侧按钮关闭',
    type: TOAST_TYPE.INFO,
    showClose: true,
    duration: 10000,
  });
};

// Code examples
const basicCode = `<script setup>
import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';

const showToast = () => {
  TUIToast({
    message: '这是一条消息提示',
    type: TOAST_TYPE.INFO,
  });
};
<\/script>`;

const typeCode = `<script setup>
import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';

// 成功
TUIToast({ message: '操作成功', type: TOAST_TYPE.SUCCESS });

// 警告
TUIToast({ message: '请注意', type: TOAST_TYPE.WARNING });

// 错误
TUIToast({ message: '操作失败', type: TOAST_TYPE.ERROR });

// 信息
TUIToast({ message: '提示信息', type: TOAST_TYPE.INFO });
<\/script>`;

const multipleCode = `<script setup>
import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';

const showMultiple = () => {
  TUIToast({ message: '第一个消息', type: TOAST_TYPE.SUCCESS });
  TUIToast({ message: '第二个消息', type: TOAST_TYPE.WARNING });
};
<\/script>`;

const durationCode = `<script setup>
import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';

TUIToast({
  message: '这条消息将显示 5 秒',
  type: TOAST_TYPE.INFO,
  duration: 5000,
});
<\/script>`;

const closeCode = `<script setup>
import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';

TUIToast({
  message: '点击右侧按钮关闭',
  type: TOAST_TYPE.INFO,
  showClose: true,
  duration: 10000,
});
<\/script>`;
</script>

<style scoped lang="scss">
.TUIToast-demo {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.page-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-color-primary, #303133);
}

.page-description {
  margin: 0 0 32px;
  font-size: 14px;
  color: var(--text-color-secondary, #606266);
  line-height: 1.6;
}

// API Documentation
.api-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--stroke-color-primary, #e4e7ed);

  h2 {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color-primary, #303133);
  }

  h3 {
    margin: 24px 0 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color-secondary, #606266);
  }
}

.api-table-wrapper {
  margin-bottom: 24px;
}

.api-table {
  border: 1px solid var(--stroke-color-primary, #e4e7ed);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-color-operate, #fff);

  .api-table-header {
    display: flex;
    background: var(--bg-color-default, #fafafa);
    border-bottom: 1px solid var(--stroke-color-primary, #e4e7ed);
    font-weight: 600;
    color: var(--text-color-secondary, #606266);
  }

  .api-table-row {
    display: flex;
    border-bottom: 1px solid var(--stroke-color-secondary, #ebeef5);

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: var(--list-color-hover, #f5f7fa);
    }
  }

  .api-table-cell {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color-primary, #303133);

    &:first-child {
      flex: 0.8;
      font-weight: 500;
      color: var(--text-color-link, #409eff);
    }

    &:nth-child(2) {
      flex: 1.4;
    }

    &:nth-child(3) {
      flex: 1.2;
      color: var(--text-color-warning, #e6a23c);
      font-family: 'Monaco', 'Menlo', monospace;
      font-size: 13px;
    }

    &:last-child {
      flex: 0.6;
      color: var(--text-color-tertiary, #909399);
    }
  }
}
</style>
