<template>
  <div class="TUIDialog-demo">
    <h1 class="page-title">TUIDialog 对话框</h1>
    <p class="page-description">在保留当前页面状态的情况下，告知用户并承载相关操作。</p>

    <!-- Basic Usage -->
    <DemoBlock
      title="基础用法"
      description="需要设置 visible 属性，它接收 Boolean，当为 true 时显示 Dialog。"
      :code="basicCode"
    >
      <TUIButton @click="showDialog1 = true">打开对话框</TUIButton>
      <TUIDialog
        v-model:visible="showDialog1"
        title="提示"
      >
        <p>这是一个基础对话框</p>
      </TUIDialog>
    </DemoBlock>

    <!-- Custom Content -->
    <DemoBlock
      title="自定义内容"
      description="Dialog 组件的内容可以是任意的，甚至可以是表格或表单。"
      :code="customContentCode"
    >
      <TUIButton @click="showDialog2 = true">打开对话框</TUIButton>
      <TUIDialog
        v-model:visible="showDialog2"
        title="自定义内容"
      >
        <template #default>
          <div class="custom-content">
            <p>这是一段自定义内容</p>
            <TUIInput v-model="inputValue" placeholder="请输入内容" />
          </div>
        </template>
        <template #footer>
          <TUIButton @click="showDialog2 = false">取消</TUIButton>
          <TUIButton type="primary" @click="handleConfirm">确定</TUIButton>
        </template>
      </TUIDialog>
    </DemoBlock>

    <!-- Center Layout -->
    <DemoBlock
      title="居中布局"
      description="设置 center 属性可以使对话框居中显示。"
      :code="centerCode"
    >
      <TUIButton @click="showDialog3 = true">居中对话框</TUIButton>
      <TUIDialog
        v-model:visible="showDialog3"
        title="提示"
        center
      >
        <p>居中对话框的内容</p>
      </TUIDialog>
    </DemoBlock>

    <!-- Custom Mount -->
    <DemoBlock
      title="自定义挂载位置"
      description="通过 append-to 属性可以将对话框挂载到指定的 DOM 元素上。"
      :code="appendToCode"
    >
      <TUIButton @click="showDialog4 = true">挂载到指定元素</TUIButton>
      <TUIDialog
        v-model:visible="showDialog4"
        title="自定义挂载"
        append-to="#custom-container"
      >
        <p>这个对话框被挂载到了指定的 DOM 元素上</p>
      </TUIDialog>
      <div id="custom-container" class="custom-mount-container">
        <p>自定义挂载容器</p>
      </div>
    </DemoBlock>

    <!-- With Select -->
    <DemoBlock
      title="嵌套 Select"
      description="Dialog 中可以嵌套 Select 等其他组件。"
      :code="selectCode"
    >
      <TUIButton @click="showDialog5 = true">打开 Select 对话框</TUIButton>
      <TUIDialog
        v-model:visible="showDialog5"
        title="选择项目"
        center
      >
        <template #default>
          <div class="select-dialog-content">
            <p>请选择一个选项：</p>
            <TUISelect v-model="selectedOption" placeholder="请选择...">
              <TUIOption value="option1" label="选项 1" />
              <TUIOption value="option2" label="选项 2" />
              <TUIOption value="option3" label="选项 3" />
              <TUIOption value="option4" label="选项 4 - 禁用" :disabled="true" />
            </TUISelect>
            <div v-if="selectedOption" class="selected-info">
              已选择: <strong>{{ selectedOption }}</strong>
            </div>
          </div>
        </template>
        <template #footer>
          <TUIButton @click="showDialog5 = false">取消</TUIButton>
          <TUIButton type="primary" @click="handleSelectConfirm" :disabled="!selectedOption">确定</TUIButton>
        </template>
      </TUIDialog>
    </DemoBlock>

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

      <!-- Props -->
      <div class="api-table-wrapper">
        <h3>Props</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">visible / v-model:visible</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">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">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">true</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">center</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">fullscreen</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">appendTo</div>
            <div class="api-table-cell">Dialog 挂载到哪个 DOM 元素</div>
            <div class="api-table-cell">CSSSelector | HTMLElement</div>
            <div class="api-table-cell">'body'</div>
          </div>
        </div>
      </div>

      <!-- Events -->
      <div class="api-table-wrapper">
        <h3>Events</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">关闭对话框时触发</div>
            <div class="api-table-cell">() => void</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">() => void</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">cancel</div>
            <div class="api-table-cell">点击取消按钮时触发</div>
            <div class="api-table-cell">() => void</div>
          </div>
        </div>
      </div>

      <!-- Slots -->
      <div class="api-table-wrapper">
        <h3>Slots</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">插槽名</div>
            <div class="api-table-cell">说明</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">default</div>
            <div class="api-table-cell">对话框内容</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">footer</div>
            <div class="api-table-cell">对话框底部内容</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TUIButton } from '@/components/Button';
import { TUIDialog } from '@/components/Dialog';
import { TUIInput } from '@/components/Input';
import { TUISelect } from '@/components/Select';
import { TUIOption } from '@/components/Option';
import DemoBlock from './components/DemoBlock.vue';

const showDialog1 = ref(false);
const showDialog2 = ref(false);
const showDialog3 = ref(false);
const showDialog4 = ref(false);
const showDialog5 = ref(false);
const inputValue = ref('');
const selectedOption = ref('');

const handleConfirm = () => {
  showDialog2.value = false;
};

const handleSelectConfirm = () => {
  console.log('选择的选项:', selectedOption.value);
  showDialog5.value = false;
};

// Code examples
const basicCode = `<template>
  <TUIButton @click="showDialog = true">打开对话框</TUIButton>
  <TUIDialog
    v-model:visible="showDialog"
    title="提示"
  >
    <p>这是一个基础对话框</p>
  </TUIDialog>
</template>

<script setup>
import { ref } from 'vue';
const showDialog = ref(false);
<\/script>`;

const customContentCode = `<template>
  <TUIButton @click="showDialog = true">打开对话框</TUIButton>
  <TUIDialog v-model:visible="showDialog" title="自定义内容">
    <template #default>
      <div class="custom-content">
        <p>这是一段自定义内容</p>
        <TUIInput v-model="inputValue" placeholder="请输入内容" />
      </div>
    </template>
    <template #footer>
      <TUIButton @click="showDialog = false">取消</TUIButton>
      <TUIButton type="primary" @click="handleConfirm">确定</TUIButton>
    </template>
  </TUIDialog>
</template>`;

const centerCode = `<template>
  <TUIButton @click="showDialog = true">居中对话框</TUIButton>
  <TUIDialog
    v-model:visible="showDialog"
    title="提示"
    center
  >
    <p>居中对话框的内容</p>
  </TUIDialog>
</template>`;

const appendToCode = `<template>
  <TUIButton @click="showDialog = true">挂载到指定元素</TUIButton>
  <TUIDialog
    v-model:visible="showDialog"
    title="自定义挂载"
    append-to="#custom-container"
  >
    <p>这个对话框被挂载到了指定的 DOM 元素上</p>
  </TUIDialog>
  <div id="custom-container"></div>
</template>`;

const selectCode = `<template>
  <TUIButton @click="showDialog = true">打开 Select 对话框</TUIButton>
  <TUIDialog v-model:visible="showDialog" title="选择项目" center>
    <template #default>
      <TUISelect v-model="selectedOption" placeholder="请选择...">
        <TUIOption value="option1" label="选项 1" />
        <TUIOption value="option2" label="选项 2" />
        <TUIOption value="option3" label="选项 3" />
      </TUISelect>
    </template>
    <template #footer>
      <TUIButton @click="showDialog = false">取消</TUIButton>
      <TUIButton type="primary" @click="handleConfirm">确定</TUIButton>
    </template>
  </TUIDialog>
</template>`;
</script>

<style scoped lang="scss">
.TUIDialog-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;
}

.custom-content {
  padding: 20px 0;

  p {
    margin-bottom: 16px;
  }
}

.custom-mount-container {
  margin-top: 16px;
  padding: 16px;
  border: 2px dashed var(--stroke-color-primary, #e4e7ed);
  border-radius: 8px;
  background-color: var(--bg-color-bubble-reciprocal, #f5f7fa);
  text-align: center;

  p {
    margin: 0;
    color: var(--text-color-secondary, #606266);
    font-size: 14px;
  }
}

.select-dialog-content {
  padding: 20px 0;

  p {
    margin: 0 0 16px 0;
    color: var(--text-color-primary, #303133);
    font-size: 14px;
  }

  .selected-info {
    margin-top: 16px;
    color: var(--text-color-secondary, #606266);
  }
}

// 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>
