<template>
  <div class="popup-demo">
    <h1>TUIPopup 弹出层</h1>
    <p class="component-desc">从屏幕边缘滑出的浮层面板，仅在移动端可用。</p>

    <div v-if="!isMobile" class="mobile-only-notice">
      <div class="notice-icon">📱</div>
      <h3>仅移动端可用</h3>
      <p>Popup 组件仅在移动端可用，请切换到移动端视图查看效果</p>
    </div>

    <template v-else>
      <!-- Basic Usage -->
      <DemoBlock
        title="基础用法"
        description="从底部弹出的基础弹出层。"
        :code="basicCode"
      >
        <div class="demo-row">
          <TUIButton @click="showBasicPopup = true">打开 Popup</TUIButton>
          <TUIPopup v-model:visible="showBasicPopup" placement="bottom">
            <div class="popup-content">
              <h3>基础弹出层</h3>
              <p>这是一个基础的 Popup 弹出层</p>
            </div>
          </TUIPopup>
        </div>
      </DemoBlock>

      <!-- Different Placements -->
      <DemoBlock
        title="不同方向"
        description="通过 placement 属性设置弹出方向：top、bottom、left、right、center。"
        :code="placementCode"
      >
        <div class="demo-row">
          <TUIButton @click="showTopPopup = true">顶部弹出</TUIButton>
          <TUIButton @click="showBottomPopup = true">底部弹出</TUIButton>
          <TUIButton @click="showLeftPopup = true">左侧弹出</TUIButton>
          <TUIButton @click="showRightPopup = true">右侧弹出</TUIButton>
          <TUIButton @click="showCenterPopup = true">居中弹出</TUIButton>

          <TUIPopup v-model:visible="showTopPopup" placement="top">
            <div class="popup-content popup-content--horizontal">
              <h3>顶部弹出</h3>
              <p>从顶部滑入的 Popup</p>
            </div>
          </TUIPopup>

          <TUIPopup v-model:visible="showBottomPopup" placement="bottom">
            <div class="popup-content popup-content--horizontal">
              <h3>底部弹出</h3>
              <p>从底部滑入的 Popup</p>
            </div>
          </TUIPopup>

          <TUIPopup v-model:visible="showLeftPopup" placement="left">
            <div class="popup-content popup-content--vertical">
              <h3>左侧弹出</h3>
              <p>从左侧滑入的 Popup</p>
            </div>
          </TUIPopup>

          <TUIPopup v-model:visible="showRightPopup" placement="right">
            <div class="popup-content popup-content--vertical">
              <h3>右侧弹出</h3>
              <p>从右侧滑入的 Popup</p>
            </div>
          </TUIPopup>

          <TUIPopup v-model:visible="showCenterPopup" placement="center">
            <div class="popup-content popup-content--center">
              <h3>居中弹出</h3>
              <p>居中显示的 Popup</p>
            </div>
          </TUIPopup>
        </div>
      </DemoBlock>

      <!-- With Close Button -->
      <DemoBlock
        title="带关闭按钮"
        description="设置 close-btn 属性显示关闭按钮。"
        :code="closeBtnCode"
      >
        <div class="demo-row">
          <TUIButton @click="showCloseBtnPopup = true">带关闭按钮</TUIButton>
          <TUIPopup v-model:visible="showCloseBtnPopup" placement="bottom" :close-btn="true">
            <div class="popup-content">
              <h3>带关闭按钮</h3>
              <p>点击右上角关闭按钮可关闭</p>
            </div>
          </TUIPopup>
        </div>
      </DemoBlock>

      <!-- Prevent Overlay Close -->
      <DemoBlock
        title="禁止点击遮罩关闭"
        description="设置 close-on-overlay-click 为 false 禁止点击遮罩关闭。"
        :code="noOverlayCloseCode"
      >
        <div class="demo-row">
          <TUIButton @click="showNoOverlayClosePopup = true">禁止遮罩关闭</TUIButton>
          <TUIPopup
            v-model:visible="showNoOverlayClosePopup"
            placement="bottom"
            :close-btn="true"
            :close-on-overlay-click="false"
          >
            <div class="popup-content">
              <h3>禁止遮罩关闭</h3>
              <p>点击遮罩层不会关闭，只能点击关闭按钮</p>
            </div>
          </TUIPopup>
        </div>
      </DemoBlock>

      <!-- Custom Height -->
      <DemoBlock
        title="自定义高度"
        description="通过 height 属性设置弹出层容器的固定高度。"
        :code="customHeightCode"
      >
        <div class="demo-row">
          <TUIButton @click="showCustomHeightPopup = true">固定高度 (300px)</TUIButton>
          <TUIButton @click="showCustomHeightPopup2 = true">固定高度 (50%)</TUIButton>
          <TUIPopup
            v-model:visible="showCustomHeightPopup"
            placement="bottom"
            :close-btn="true"
            height="300px"
          >
            <div class="popup-content">
              <h3>固定高度弹出层</h3>
              <p>这个弹出层的高度固定为 300px</p>
              <p>内容不会撑开高度</p>
            </div>
          </TUIPopup>
          <TUIPopup
            v-model:visible="showCustomHeightPopup2"
            placement="bottom"
            :close-btn="true"
            height="50%"
          >
            <div class="popup-content">
              <h3>百分比高度弹出层</h3>
              <p>这个弹出层的高度为屏幕的 50%</p>
              <p>支持任意 CSS 高度值</p>
            </div>
          </TUIPopup>
        </div>
      </DemoBlock>

      <!-- Custom Style -->
      <DemoBlock
        title="自定义样式"
        description="通过 customStyle 属性自定义弹出层容器的样式，如去除圆角、修改背景色等。"
        :code="customStyleCode"
      >
        <div class="demo-row">
          <TUIButton @click="showCustomStylePopup = true">无圆角</TUIButton>
          <TUIButton @click="showCustomStylePopup2 = true">自定义背景</TUIButton>
          <TUIPopup
            v-model:visible="showCustomStylePopup"
            placement="bottom"
            :close-btn="true"
            :customStyle="{ borderRadius: 0 }"
          >
            <div class="popup-content">
              <h3>无圆角弹出层</h3>
              <p>通过 customStyle 设置 borderRadius: 0</p>
            </div>
          </TUIPopup>
          <TUIPopup
            v-model:visible="showCustomStylePopup2"
            placement="bottom"
            :close-btn="true"
            :customStyle="{ borderRadius: '24px 24px 0 0', background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)' }"
          >
            <div class="popup-content popup-content--light">
              <h3>自定义背景</h3>
              <p>通过 customStyle 设置渐变背景和更大圆角</p>
            </div>
          </TUIPopup>
        </div>
      </DemoBlock>

      <!-- Events -->
      <DemoBlock
        title="事件回调"
        description="监听 open、opened、close、closed、visible-change 事件。"
        :code="eventCode"
      >
        <div class="demo-row">
          <TUIButton @click="showEventPopup = true">事件回调</TUIButton>
          <TUIPopup
            v-model:visible="showEventPopup"
            placement="bottom"
            :close-btn="true"
            @open="handleOpen"
            @opened="handleOpened"
            @close="handleClose"
            @closed="handleClosed"
          >
            <div class="popup-content">
              <h3>事件回调</h3>
              <p>打开控制台查看事件输出</p>
              <p class="event-log">{{ eventLog }}</p>
            </div>
          </TUIPopup>
        </div>
      </DemoBlock>
    </template>

    <!-- 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">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">placement</div>
            <div class="api-table-cell">弹出位置</div>
            <div class="api-table-cell enum-type" title="'top' | 'left' | 'right' | 'bottom' | 'center'">enum</div>
            <div class="api-table-cell">'bottom'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">closeBtn</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">closeOnOverlayClick</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">showOverlay</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">destroyOnClose</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">duration</div>
            <div class="api-table-cell">动画时长 (ms)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">240</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">height</div>
            <div class="api-table-cell">弹出层容器高度，支持任意 CSS 高度值</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">zIndex</div>
            <div class="api-table-cell">组件层级</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">1500</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">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">opened</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">(context: { e: MouseEvent })</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">closed</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-change</div>
            <div class="api-table-cell">显示/隐藏时触发</div>
            <div class="api-table-cell">(visible: boolean, trigger: PopupSource)</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">closeBtn</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, TUIPopup, isMobile } from '../src/components';
import DemoBlock from './components/DemoBlock.vue';

// Basic popup
const showBasicPopup = ref(false);

// Different placements
const showTopPopup = ref(false);
const showBottomPopup = ref(false);
const showLeftPopup = ref(false);
const showRightPopup = ref(false);
const showCenterPopup = ref(false);

// With close button
const showCloseBtnPopup = ref(false);

// No overlay close
const showNoOverlayClosePopup = ref(false);

// Custom height
const showCustomHeightPopup = ref(false);
const showCustomHeightPopup2 = ref(false);

// Custom style
const showCustomStylePopup = ref(false);
const showCustomStylePopup2 = ref(false);

// Event popup
const showEventPopup = ref(false);
const eventLog = ref('');

const handleOpen = () => {
  console.log('Popup open');
  eventLog.value = 'open';
};

const handleOpened = () => {
  console.log('Popup opened');
  eventLog.value = 'opened';
};

const handleClose = () => {
  console.log('Popup close');
  eventLog.value = 'close';
};

const handleClosed = () => {
  console.log('Popup closed');
  eventLog.value = 'closed';
};

// Code examples
const basicCode = `<template>
  <TUIButton @click="showPopup = true">打开 Popup</TUIButton>
  <TUIPopup v-model:visible="showPopup" placement="bottom">
    <div class="popup-content">
      <h3>基础弹出层</h3>
      <p>这是一个基础的 Popup 弹出层</p>
    </div>
  </TUIPopup>
</template>

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

const placementCode = `<template>
  <TUIButton @click="showTopPopup = true">顶部弹出</TUIButton>
  <TUIPopup v-model:visible="showTopPopup" placement="top">...</TUIPopup>

  <TUIButton @click="showBottomPopup = true">底部弹出</TUIButton>
  <TUIPopup v-model:visible="showBottomPopup" placement="bottom">...</TUIPopup>

  <TUIButton @click="showLeftPopup = true">左侧弹出</TUIButton>
  <TUIPopup v-model:visible="showLeftPopup" placement="left">...</TUIPopup>

  <TUIButton @click="showRightPopup = true">右侧弹出</TUIButton>
  <TUIPopup v-model:visible="showRightPopup" placement="right">...</TUIPopup>

  <TUIButton @click="showCenterPopup = true">居中弹出</TUIButton>
  <TUIPopup v-model:visible="showCenterPopup" placement="center">...</TUIPopup>
</template>`;

const closeBtnCode = `<template>
  <TUIButton @click="showPopup = true">带关闭按钮</TUIButton>
  <TUIPopup v-model:visible="showPopup" placement="bottom" :close-btn="true">
    <div class="popup-content">
      <h3>带关闭按钮</h3>
      <p>点击右上角关闭按钮可关闭</p>
    </div>
  </TUIPopup>
</template>`;

const noOverlayCloseCode = `<template>
  <TUIButton @click="showPopup = true">禁止遮罩关闭</TUIButton>
  <TUIPopup
    v-model:visible="showPopup"
    placement="bottom"
    :close-btn="true"
    :close-on-overlay-click="false"
  >
    <div class="popup-content">
      <h3>禁止遮罩关闭</h3>
      <p>点击遮罩层不会关闭</p>
    </div>
  </TUIPopup>
</template>`;

const customHeightCode = `<template>
  <!-- 固定像素高度 -->
  <TUIButton @click="showPopup1 = true">固定高度 (300px)</TUIButton>
  <TUIPopup
    v-model:visible="showPopup1"
    placement="bottom"
    :close-btn="true"
    height="300px"
  >
    <div class="popup-content">
      <h3>固定高度弹出层</h3>
      <p>高度固定为 300px</p>
    </div>
  </TUIPopup>

  <!-- 百分比高度 -->
  <TUIButton @click="showPopup2 = true">固定高度 (50%)</TUIButton>
  <TUIPopup
    v-model:visible="showPopup2"
    placement="bottom"
    :close-btn="true"
    height="50%"
  >
    <div class="popup-content">
      <h3>百分比高度弹出层</h3>
      <p>高度为屏幕的 50%</p>
    </div>
  </TUIPopup>
</template>`;

const customStyleCode = `<template>
  <!-- 无圆角 -->
  <TUIButton @click="showPopup1 = true">无圆角</TUIButton>
  <TUIPopup
    v-model:visible="showPopup1"
    placement="bottom"
    :close-btn="true"
    :customStyle="{ borderRadius: 0 }"
  >
    <div class="popup-content">
      <h3>无圆角弹出层</h3>
      <p>通过 customStyle 设置 borderRadius: 0</p>
    </div>
  </TUIPopup>

  <!-- 自定义背景 -->
  <TUIButton @click="showPopup2 = true">自定义背景</TUIButton>
  <TUIPopup
    v-model:visible="showPopup2"
    placement="bottom"
    :close-btn="true"
    :customStyle="{
      borderRadius: '24px 24px 0 0',
      background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)'
    }"
  >
    <div class="popup-content">
      <h3>自定义背景</h3>
      <p>通过 customStyle 设置渐变背景</p>
    </div>
  </TUIPopup>
</template>`;

const eventCode = `<template>
  <TUIPopup
    v-model:visible="showPopup"
    placement="bottom"
    @open="handleOpen"
    @opened="handleOpened"
    @close="handleClose"
    @closed="handleClosed"
  >
    ...
  </TUIPopup>
</template>

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

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

.mobile-only-notice {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-color-secondary);

  .notice-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }

  h3 {
    margin: 0 0 8px 0;
    color: var(--text-color-primary);
  }

  p {
    margin: 0;
    font-size: 14px;
  }
}

.popup-content {
  padding: 24px;

  h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-primary);
  }

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

  &--horizontal {
    min-height: 120px;
  }

  &--vertical {
    width: 200px;
    min-height: 100%;
  }

  &--center {
    width: 280px;
    text-align: center;
  }
}

.event-log {
  margin-top: 12px !important;
  padding: 8px 12px;
  background: var(--bg-color-secondary);
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  color: var(--text-color-link) !important;
}
</style>
