<template>
  <div class="drawer-demo">
    <h1>TUIDrawer 抽屉</h1>
    <p class="component-desc">从屏幕边缘滑出的浮层面板，用于展示临时内容。</p>

    <!-- Basic Usage -->
    <DemoBlock
      title="基础用法"
      description="从右侧滑出的基础抽屉。"
      :code="basicCode"
    >
      <div class="demo-row">
        <TUIButton @click="showDrawer = true">
          打开抽屉
        </TUIButton>
        <TUIDrawer
          v-model="showDrawer"
          title="基础抽屉"
          direction="rtl"
        >
          <p>这是一个基础的抽屉组件</p>
          <p>支持从右侧滑出</p>
        </TUIDrawer>
      </div>
    </DemoBlock>

    <!-- Different Directions -->
    <DemoBlock
      title="不同方向"
      description="抽屉可以从四个方向滑出：左侧 (ltr)、右侧 (rtl)、顶部 (ttb)、底部 (btt)。"
      :code="directionCode"
    >
      <div class="demo-row">
        <TUIButton @click="showLeftDrawer = true">
          左侧抽屉
        </TUIButton>
        <TUIButton @click="showTopDrawer = true">
          顶部抽屉
        </TUIButton>
        <TUIButton @click="showBottomDrawer = true">
          底部抽屉
        </TUIButton>

        <TUIDrawer
          v-model="showLeftDrawer"
          title="左侧抽屉"
          direction="ltr"
        >
          <p>从左侧滑出的抽屉</p>
        </TUIDrawer>

        <TUIDrawer
          v-model="showTopDrawer"
          title="顶部抽屉"
          direction="ttb"
        >
          <p>从顶部滑出的抽屉</p>
        </TUIDrawer>

        <TUIDrawer
          v-model="showBottomDrawer"
          title="底部抽屉"
          direction="btt"
        >
          <p>从底部滑出的抽屉</p>
        </TUIDrawer>
      </div>
    </DemoBlock>

    <!-- Custom Size -->
    <DemoBlock
      title="自定义尺寸"
      description="通过 size 属性设置抽屉的宽度或高度。"
      :code="sizeCode"
    >
      <div class="demo-row">
        <TUIButton @click="showCustomSizeDrawer = true">
          自定义尺寸 (50%)
        </TUIButton>
        <TUIDrawer
          v-model="showCustomSizeDrawer"
          title="自定义尺寸"
          size="50%"
        >
          <p>宽度为 50% 的抽屉</p>
        </TUIDrawer>
      </div>
    </DemoBlock>

    <!-- Custom Header and Footer -->
    <DemoBlock
      title="自定义头部和底部"
      description="使用 header 和 footer 插槽自定义抽屉的头部和底部内容。"
      :code="customCode"
    >
      <div class="demo-row">
        <TUIButton @click="showCustomDrawer = true">
          自定义内容
        </TUIButton>
        <TUIDrawer
          v-model="showCustomDrawer"
          :show-close="false"
        >
          <template #header>
            <div class="custom-header">
              <h3>自定义头部</h3>
              <TUIButton
                size="small"
                @click="showCustomDrawer = false"
              >
                关闭
              </TUIButton>
            </div>
          </template>

          <div class="custom-content">
            <p>自定义内容区域</p>
            <p>可以放置任何内容</p>
          </div>

          <template #footer>
            <div class="custom-footer">
              <TUIButton @click="showCustomDrawer = false">
                取消
              </TUIButton>
              <TUIButton
                type="primary"
                @click="showCustomDrawer = false"
              >
                确定
              </TUIButton>
            </div>
          </template>
        </TUIDrawer>
      </div>
    </DemoBlock>

    <!-- Delay -->
    <DemoBlock
      title="延迟显示"
      description="通过 open-delay 和 close-delay 设置打开和关闭的延迟时间。"
      :code="delayCode"
    >
      <div class="demo-row">
        <TUIButton @click="showDelayDrawer = true">
          延迟显示
        </TUIButton>
        <TUIDrawer
          v-model="showDelayDrawer"
          title="延迟抽屉"
          :open-delay="1000"
          :close-delay="500"
        >
          <p>打开延迟 1 秒，关闭延迟 0.5 秒</p>
        </TUIDrawer>
      </div>
    </DemoBlock>

    <!-- Events -->
    <DemoBlock
      title="事件回调"
      description="监听抽屉的 open 和 close 事件。"
      :code="eventCode"
    >
      <div class="demo-row">
        <TUIButton @click="showEventDrawer = true">
          事件抽屉
        </TUIButton>
        <TUIDrawer
          v-model="showEventDrawer"
          title="事件抽屉"
          @open="handleOpen"
          @close="handleClose"
        >
          <p>查看控制台输出事件</p>
        </TUIDrawer>
      </div>
    </DemoBlock>

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

      <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">modelValue</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">direction</div>
            <div class="api-table-cell">抽屉方向</div>
            <div class="api-table-cell enum-type" title="'rtl' | 'ltr' | 'ttb' | 'btt'">enum</div>
            <div class="api-table-cell">'rtl'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">size</div>
            <div class="api-table-cell">抽屉尺寸</div>
            <div class="api-table-cell">number | string</div>
            <div class="api-table-cell">'30%'</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">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">closeOnClickModal</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">closeOnPressEscape</div>
            <div class="api-table-cell">按 ESC 键是否关闭</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">openDelay</div>
            <div class="api-table-cell">打开延迟时间 (ms)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">0</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">closeDelay</div>
            <div class="api-table-cell">关闭延迟时间 (ms)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">0</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">update:modelValue</div>
            <div class="api-table-cell">值更新时触发</div>
            <div class="api-table-cell">(value: boolean)</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">open</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">()</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">header</div>
            <div class="api-table-cell">抽屉头部</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 class="api-table-cell">-</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

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

// Basic drawer
const showDrawer = ref(false);

// Different directions
const showLeftDrawer = ref(false);
const showTopDrawer = ref(false);
const showBottomDrawer = ref(false);

// Custom size
const showCustomSizeDrawer = ref(false);

// Custom content
const showCustomDrawer = ref(false);

// Delay
const showDelayDrawer = ref(false);

// Events
const showEventDrawer = ref(false);

const handleOpen = () => {
  console.log('Drawer opened');
};

const handleClose = () => {
  console.log('Drawer closed');
};

// Code examples
const basicCode = `<template>
  <TUIButton @click="showDrawer = true">打开抽屉</TUIButton>
  <TUIDrawer
    v-model="showDrawer"
    title="基础抽屉"
    direction="rtl"
  >
    <p>这是一个基础的抽屉组件</p>
  </TUIDrawer>
</template>

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

const directionCode = `<template>
  <TUIButton @click="showLeftDrawer = true">左侧抽屉</TUIButton>
  <TUIDrawer v-model="showLeftDrawer" title="左侧抽屉" direction="ltr">
    <p>从左侧滑出的抽屉</p>
  </TUIDrawer>

  <TUIButton @click="showTopDrawer = true">顶部抽屉</TUIButton>
  <TUIDrawer v-model="showTopDrawer" title="顶部抽屉" direction="ttb">
    <p>从顶部滑出的抽屉</p>
  </TUIDrawer>

  <TUIButton @click="showBottomDrawer = true">底部抽屉</TUIButton>
  <TUIDrawer v-model="showBottomDrawer" title="底部抽屉" direction="btt">
    <p>从底部滑出的抽屉</p>
  </TUIDrawer>
</template>`;

const sizeCode = `<template>
  <TUIButton @click="showDrawer = true">自定义尺寸</TUIButton>
  <TUIDrawer
    v-model="showDrawer"
    title="自定义尺寸"
    size="50%"
  >
    <p>宽度为 50% 的抽屉</p>
  </TUIDrawer>
</template>`;

const customCode = `<template>
  <TUIButton @click="showDrawer = true">自定义内容</TUIButton>
  <TUIDrawer v-model="showDrawer" :show-close="false">
    <template #header>
      <div class="custom-header">
        <h3>自定义头部</h3>
        <TUIButton size="small" @click="showDrawer = false">关闭</TUIButton>
      </div>
    </template>

    <div class="custom-content">
      <p>自定义内容区域</p>
    </div>

    <template #footer>
      <div class="custom-footer">
        <TUIButton @click="showDrawer = false">取消</TUIButton>
        <TUIButton type="primary" @click="showDrawer = false">确定</TUIButton>
      </div>
    </template>
  </TUIDrawer>
</template>`;

const delayCode = `<template>
  <TUIButton @click="showDrawer = true">延迟显示</TUIButton>
  <TUIDrawer
    v-model="showDrawer"
    title="延迟抽屉"
    :open-delay="1000"
    :close-delay="500"
  >
    <p>打开延迟 1 秒，关闭延迟 0.5 秒</p>
  </TUIDrawer>
</template>`;

const eventCode = `<template>
  <TUIButton @click="showDrawer = true">事件抽屉</TUIButton>
  <TUIDrawer
    v-model="showDrawer"
    title="事件抽屉"
    @open="handleOpen"
    @close="handleClose"
  >
    <p>查看控制台输出事件</p>
  </TUIDrawer>
</template>

<script setup>
const handleOpen = () => console.log('Drawer opened');
const handleClose = () => console.log('Drawer closed');
<\/script>`;
</script>

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

.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  h3 {
    margin: 0;
  }
}

.custom-content {
  padding: 20px 0;
}

.custom-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
