<template>
  <view class="demo-container">
    <!-- 示例1: 基础用法 -->
    <view class="demo-section">
      <view class="demo-title">基础用法</view>
      <TopNavBar title="基础导航栏" />
    </view>

    <!-- 示例2: 固定在顶部 -->
    <view class="demo-section">
      <view class="demo-title">固定在顶部</view>
      <TopNavBar title="固定导航栏" :fixed="true" />
    </view>

    <!-- 示例3: 自定义颜色 -->
    <view class="demo-section">
      <view class="demo-title">自定义颜色</view>
      <TopNavBar 
        title="蓝色导航栏" 
        backgroundColor="#007AFF"
        titleColor="#ffffff"
        backIconColor="#ffffff"
      />
    </view>

    <!-- 示例4: 隐藏返回按钮 -->
    <view class="demo-section">
      <view class="demo-title">隐藏返回按钮</view>
      <TopNavBar title="无返回按钮" :showBack="false" />
    </view>

    <!-- 示例5: 标题左对齐 -->
    <view class="demo-section">
      <view class="demo-title">标题左对齐</view>
      <TopNavBar title="左对齐标题" titleAlign="left" />
    </view>

    <!-- 示例6: 标题居中对齐（默认） -->
    <view class="demo-section">
      <view class="demo-title">标题居中对齐（默认）</view>
      <TopNavBar title="居中对齐标题" titleAlign="center" />
    </view>

    <!-- 示例7: 使用插槽 -->
    <view class="demo-section">
      <view class="demo-title">使用插槽</view>
      <TopNavBar>
        <template #title>
          <view class="custom-title">
            <uni-icons type="star" size="16" color="#FFD700" />
            <text class="title-text">自定义标题</text>
          </view>
        </template>
        
        <template #right>
          <view class="right-actions">
            <uni-icons type="search" size="20" color="#333" style="margin-right: 10px;" />
            <uni-icons type="more" size="20" color="#333" />
          </view>
        </template>
      </TopNavBar>
    </view>

    <!-- 示例8: 渐变背景 -->
    <view class="demo-section">
      <view class="demo-title">渐变背景</view>
      <TopNavBar 
        title="渐变导航栏" 
        backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        titleColor="#ffffff"
        backIconColor="#ffffff"
      />
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <view class="content-item" v-for="i in 20" :key="i">
        <text>内容项 {{ i }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import TopNavBar from './index.vue'
</script>

<style scoped lang="scss">
.demo-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.demo-section {
  margin-bottom: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-title {
  padding: 15px 20px;
  background-color: #f8f9fa;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #e9ecef;
}

.custom-title {
  display: flex;
  align-items: center;
  justify-content: center;
  
  .title-text {
    margin-left: 8px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
}

.right-actions {
  display: flex;
  align-items: center;
}

.content-area {
  margin-top: 40px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.content-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  text {
    font-size: 16px;
    color: #666;
  }
}
</style>