<template>
  <div class="dropdown-demo">
    <h1>TUIDropdown 下拉菜单</h1>
    <p class="component-desc">向下弹出的列表，用于展示更多操作选项。</p>

    <!-- Basic Usage -->
    <DemoBlock
      title="基础用法"
      description="悬停或点击触发下拉菜单。"
      :code="basicCode"
    >
      <div class="demo-row">
        <TUIDropdown trigger="hover" placement="bottom">
          <TUIButton>悬停显示</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="item1">选项 1</TUIDropdownItem>
            <TUIDropdownItem command="item2">选项 2</TUIDropdownItem>
            <TUIDropdownItem command="item3" divided>选项 3</TUIDropdownItem>
          </template>
        </TUIDropdown>

        <TUIDropdown trigger="click" placement="bottom">
          <TUIButton>点击显示</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="item1">选项 1</TUIDropdownItem>
            <TUIDropdownItem command="item2">选项 2</TUIDropdownItem>
            <TUIDropdownItem command="item3" divided>选项 3</TUIDropdownItem>
          </template>
        </TUIDropdown>
      </div>
    </DemoBlock>

    <!-- Different Placements -->
    <DemoBlock
      title="不同位置"
      description="通过 placement 属性设置下拉菜单的弹出位置。"
      :code="placementCode"
    >
      <div class="demo-row">
        <TUIDropdown trigger="hover" placement="top">
          <TUIButton>顶部</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="top">顶部选项</TUIDropdownItem>
          </template>
        </TUIDropdown>

        <TUIDropdown trigger="hover" placement="bottom-start">
          <TUIButton>底部左侧</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="bottom-start">底部左侧选项</TUIDropdownItem>
          </template>
        </TUIDropdown>

        <TUIDropdown trigger="hover" placement="bottom-end">
          <TUIButton>底部右侧</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="bottom-end">底部右侧选项</TUIDropdownItem>
          </template>
        </TUIDropdown>
      </div>
    </DemoBlock>

    <!-- Hide On Click -->
    <DemoBlock
      title="点击后隐藏"
      description="通过 hideOnClick 属性控制点击菜单项后是否自动隐藏下拉菜单。"
      :code="hideOnClickCode"
    >
      <div class="demo-row">
        <TUIDropdown trigger="click" placement="bottom" :hide-on-click="true">
          <TUIButton>点击后隐藏</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="hide1">选项 1（点击后隐藏）</TUIDropdownItem>
            <TUIDropdownItem command="hide2">选项 2（点击后隐藏）</TUIDropdownItem>
          </template>
        </TUIDropdown>

        <TUIDropdown trigger="click" placement="bottom" :hide-on-click="false">
          <TUIButton>点击后保持</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="keep1">选项 1（点击后保持）</TUIDropdownItem>
            <TUIDropdownItem command="keep2">选项 2（点击后保持）</TUIDropdownItem>
          </template>
        </TUIDropdown>
      </div>
    </DemoBlock>

    <!-- Disabled -->
    <DemoBlock
      title="禁用状态"
      description="可以禁用整个下拉菜单或单个菜单项。"
      :code="disabledCode"
    >
      <div class="demo-row">
        <TUIDropdown trigger="hover" placement="bottom" disabled>
          <TUIButton disabled>禁用下拉菜单</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="disabled">禁用选项</TUIDropdownItem>
          </template>
        </TUIDropdown>

        <TUIDropdown trigger="hover" placement="bottom">
          <TUIButton>正常下拉菜单</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="normal">正常选项</TUIDropdownItem>
            <TUIDropdownItem command="disabled" disabled>禁用选项</TUIDropdownItem>
            <TUIDropdownItem command="normal2">正常选项 2</TUIDropdownItem>
          </template>
        </TUIDropdown>
      </div>
    </DemoBlock>

    <!-- Max Height -->
    <DemoBlock
      title="最大高度"
      description="通过 maxHeight 属性限制下拉菜单的最大高度。"
      :code="maxHeightCode"
    >
      <div class="demo-row">
        <TUIDropdown trigger="hover" placement="bottom" max-height="200px">
          <TUIButton>限制高度</TUIButton>
          <template #dropdown>
            <TUIDropdownItem v-for="i in 20" :key="i" :command="`item${i}`">
              选项 {{ i }}
            </TUIDropdownItem>
          </template>
        </TUIDropdown>
      </div>
    </DemoBlock>

    <!-- Events -->
    <DemoBlock
      title="事件回调"
      description="监听 command 和 visible-change 事件。"
      :code="eventCode"
    >
      <div class="demo-row">
        <TUIDropdown
          trigger="click"
          placement="bottom"
          @command="handleCommand"
          @visible-change="handleVisibleChange"
        >
          <TUIButton>事件下拉菜单</TUIButton>
          <template #dropdown>
            <TUIDropdownItem command="event1">事件选项 1</TUIDropdownItem>
            <TUIDropdownItem command="event2">事件选项 2</TUIDropdownItem>
            <TUIDropdownItem command="event3" divided>事件选项 3</TUIDropdownItem>
          </template>
        </TUIDropdown>

        <div v-if="eventLogs.length" class="event-log">
          <h4>事件日志:</h4>
          <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
            {{ log }}
          </div>
        </div>
      </div>
    </DemoBlock>

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

      <div class="api-table-wrapper">
        <h3>Dropdown 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">trigger</div>
            <div class="api-table-cell">触发方式</div>
            <div class="api-table-cell enum-type" title="'hover' | 'click'">enum</div>
            <div class="api-table-cell">'hover'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">placement</div>
            <div class="api-table-cell">弹出位置</div>
            <div class="api-table-cell enum-type" title="'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'">enum</div>
            <div class="api-table-cell">'bottom'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">disabled</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">hideOnClick</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">maxHeight</div>
            <div class="api-table-cell">下拉菜单最大高度</div>
            <div class="api-table-cell">string | number</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">teleported</div>
            <div class="api-table-cell">是否插入至 body</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
        </div>
      </div>

      <div class="api-table-wrapper">
        <h3>DropdownItem 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">command</div>
            <div class="api-table-cell">点击菜单项触发的命令</div>
            <div class="api-table-cell">string | number | object</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">disabled</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">divided</div>
            <div class="api-table-cell">是否显示分割线</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
        </div>
      </div>

      <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">command</div>
            <div class="api-table-cell">点击菜单项时触发</div>
            <div class="api-table-cell">(command: string | number | object)</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">visible-change</div>
            <div class="api-table-cell">下拉菜单显示/隐藏时触发</div>
            <div class="api-table-cell">(visible: boolean)</div>
          </div>
        </div>
      </div>

      <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 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 class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">dropdown</div>
            <div class="api-table-cell">下拉菜单内容</div>
            <div class="api-table-cell">-</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TUIDropdown, TUIDropdownItem, TUIButton } from '../src/components';
import DemoBlock from './components/DemoBlock.vue';

const eventLogs = ref<string[]>([]);

const handleCommand = (command: string | number | object) => {
  eventLogs.value.push(`command: ${command}`);
  console.log('Dropdown command:', command);
};

const handleVisibleChange = (visible: boolean) => {
  eventLogs.value.push(`visible-change: ${visible}`);
  console.log('Dropdown visible change:', visible);
};

// Code examples
const basicCode = `<template>
  <TUIDropdown trigger="hover" placement="bottom">
    <TUIButton>悬停显示</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="item1">选项 1</TUIDropdownItem>
      <TUIDropdownItem command="item2">选项 2</TUIDropdownItem>
      <TUIDropdownItem command="item3" divided>选项 3</TUIDropdownItem>
    </template>
  </TUIDropdown>
</template>`;

const placementCode = `<template>
  <TUIDropdown trigger="hover" placement="top">
    <TUIButton>顶部</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="top">顶部选项</TUIDropdownItem>
    </template>
  </TUIDropdown>

  <TUIDropdown trigger="hover" placement="bottom-start">
    <TUIButton>底部左侧</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="bottom-start">底部左侧选项</TUIDropdownItem>
    </template>
  </TUIDropdown>
</template>`;

const hideOnClickCode = `<template>
  <TUIDropdown trigger="click" :hide-on-click="true">
    <TUIButton>点击后隐藏</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="hide1">选项 1</TUIDropdownItem>
    </template>
  </TUIDropdown>

  <TUIDropdown trigger="click" :hide-on-click="false">
    <TUIButton>点击后保持</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="keep1">选项 1</TUIDropdownItem>
    </template>
  </TUIDropdown>
</template>`;

const disabledCode = `<template>
  <TUIDropdown trigger="hover" disabled>
    <TUIButton disabled>禁用下拉菜单</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="disabled">禁用选项</TUIDropdownItem>
    </template>
  </TUIDropdown>

  <TUIDropdown trigger="hover">
    <TUIButton>正常下拉菜单</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="normal">正常选项</TUIDropdownItem>
      <TUIDropdownItem command="disabled" disabled>禁用选项</TUIDropdownItem>
    </template>
  </TUIDropdown>
</template>`;

const maxHeightCode = `<template>
  <TUIDropdown trigger="hover" max-height="200px">
    <TUIButton>限制高度</TUIButton>
    <template #dropdown>
      <TUIDropdownItem v-for="i in 20" :key="i" :command="\`item\${i}\`">
        选项 {{ i }}
      </TUIDropdownItem>
    </template>
  </TUIDropdown>
</template>`;

const eventCode = `<template>
  <TUIDropdown
    trigger="click"
    @command="handleCommand"
    @visible-change="handleVisibleChange"
  >
    <TUIButton>事件下拉菜单</TUIButton>
    <template #dropdown>
      <TUIDropdownItem command="event1">事件选项 1</TUIDropdownItem>
      <TUIDropdownItem command="event2">事件选项 2</TUIDropdownItem>
    </template>
  </TUIDropdown>
</template>

<script setup>
const handleCommand = (command) => console.log('command:', command);
const handleVisibleChange = (visible) => console.log('visible:', visible);
<\/script>`;
</script>

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

.event-log {
  margin-left: 16px;
  padding: 12px;
  background: var(--bg-color-secondary);
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
  min-width: 200px;

  h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--text-color-primary);
  }

  .log-item {
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-color-secondary);
    border-bottom: 1px solid var(--stroke-color-secondary);

    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
