<template>
  <view class="slot-swiper-example">
    <view class="demo-title">轮播组件插槽使用示例</view>

    <!-- 示例1: 基础插槽使用 -->
    <view class="demo-section">
      <view class="section-title">1. 基础插槽 - 自定义卡片</view>
      <simple-vertical-swiper
        :items="customItems"
        :height="100"
        type="custom"
        :autoplay="true"
        :interval="3000"
        :show-indicators="true"
      >
        <template #default="{ item, index }">
          <view class="custom-card">
            <view class="card-header">
              <text class="card-icon">{{ item.icon }}</text>
              <text class="card-title">{{ item.title }}</text>
            </view>
            <text class="card-desc">{{ item.description }}</text>
            <view class="card-badge">#{{ index + 1 }}</view>
          </view>
        </template>
      </simple-vertical-swiper>
    </view>

    <!-- 示例2: 通知类插槽 -->
    <view class="demo-section">
      <view class="section-title">2. 通知插槽 - 带按钮的通知</view>
      <simple-vertical-swiper
        :items="notificationItems"
        :height="80"
        type="custom"
        :autoplay="true"
        :interval="4000"
        :show-indicators="false"
      >
        <template #default="{ item, index }">
          <view class="notification-card">
            <view class="notification-content">
              <text class="notification-icon">{{ item.icon }}</text>
              <text class="notification-text">{{ item.message }}</text>
            </view>
            <view
              class="notification-action"
              @click="handleNotificationClick(item)"
            >
              <text class="action-text">{{ item.actionText }}</text>
            </view>
          </view>
        </template>
      </simple-vertical-swiper>
    </view>

    <!-- 示例3: 活动推广插槽 -->
    <view class="demo-section">
      <view class="section-title">3. 活动推广插槽 - 带图片和按钮</view>
      <simple-vertical-swiper
        :items="promotionItems"
        :height="120"
        type="custom"
        :autoplay="true"
        :interval="5000"
        :show-indicators="true"
      >
        <template #default="{ item, index }">
          <view class="promotion-card">
            <image
              class="promotion-bg"
              :src="item.bgImage"
              mode="aspectFill"
            ></image>
            <view class="promotion-content">
              <view class="promotion-info">
                <text class="promotion-title">{{ item.title }}</text>
                <text class="promotion-subtitle">{{ item.subtitle }}</text>
              </view>
              <view class="promotion-btn" @click="handlePromotionClick(item)">
                <text class="btn-text">{{ item.btnText }}</text>
              </view>
            </view>
          </view>
        </template>
      </simple-vertical-swiper>
    </view>

    <!-- 示例4: 复杂数据插槽 -->
    <view class="demo-section">
      <view class="section-title">4. 复杂数据插槽 - 用户动态</view>
      <simple-vertical-swiper
        :items="userActivityItems"
        :height="90"
        type="custom"
        :autoplay="true"
        :interval="6000"
        :circular="true"
      >
        <template #default="{ item, index }">
          <view class="activity-card">
            <view class="user-info">
              <image
                class="user-avatar"
                :src="item.user.avatar"
                mode="aspectFill"
              ></image>
              <view class="user-details">
                <text class="user-name">{{ item.user.name }}</text>
                <text class="activity-time">{{ item.timestamp }}</text>
              </view>
            </view>
            <view class="activity-content">
              <text class="activity-text">{{ item.activity }}</text>
              <view v-if="item.tags" class="activity-tags">
                <text v-for="tag in item.tags" :key="tag" class="tag">{{
                  tag
                }}</text>
              </view>
            </view>
          </view>
        </template>
      </simple-vertical-swiper>
    </view>

    <!-- 示例5: 交互式插槽 -->
    <view class="demo-section">
      <view class="section-title">5. 交互式插槽 - 可点击的项目</view>
      <simple-vertical-swiper
        :items="interactiveItems"
        :height="100"
        type="custom"
        :autoplay="false"
        :show-indicators="true"
      >
        <template #default="{ item, index }">
          <view class="interactive-card" @click="handleItemClick(item, index)">
            <view class="item-icon-wrapper">
              <text class="item-icon">{{ item.icon }}</text>
            </view>
            <view class="item-content">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-value">{{ item.value }}</text>
            </view>
            <view class="item-arrow">
              <text class="arrow-icon">→</text>
            </view>
          </view>
        </template>
      </simple-vertical-swiper>
    </view>
  </view>
</template>

<script>
import SimpleVerticalSwiper from './simple-vertical-swiper.vue'

export default {
  name: 'SlotSwiperExample',
  components: {
    SimpleVerticalSwiper,
  },
  data() {
    return {
      // 基础自定义数据
      customItems: [
        {
          icon: '🎉',
          title: '新功能上线',
          description: '体验全新的用户界面设计',
        },
        {
          icon: '🔥',
          title: '热门推荐',
          description: '发现最受欢迎的内容',
        },
        {
          icon: '⭐',
          title: '精选内容',
          description: '为您精心挑选的优质内容',
        },
      ],

      // 通知数据
      notificationItems: [
        {
          icon: '📦',
          message: '您的订单已发货，预计明天送达',
          actionText: '查看',
          orderId: '12345',
        },
        {
          icon: '💰',
          message: '恭喜获得5元优惠券',
          actionText: '使用',
          couponId: 'COUP001',
        },
        {
          icon: '🎁',
          message: '签到7天获得神秘礼品',
          actionText: '领取',
          giftId: 'GIFT001',
        },
      ],

      // 推广活动数据
      promotionItems: [
        {
          title: '双十一大促',
          subtitle: '全场5折起',
          btnText: '立即抢购',
          bgImage: '/static/images/promotion1.jpg',
          promoId: 'PROMO001',
        },
        {
          title: '新用户专享',
          subtitle: '注册送豪礼',
          btnText: '立即注册',
          bgImage: '/static/images/promotion2.jpg',
          promoId: 'PROMO002',
        },
        {
          title: '限时秒杀',
          subtitle: '每日10点开抢',
          btnText: '设置提醒',
          bgImage: '/static/images/promotion3.jpg',
          promoId: 'PROMO003',
        },
      ],

      // 用户动态数据
      userActivityItems: [
        {
          user: {
            name: '张小明',
            avatar: '/static/images/avatar1.jpg',
          },
          activity: '刚刚购买了iPhone 15 Pro',
          timestamp: '2分钟前',
          tags: ['数码', '热销'],
        },
        {
          user: {
            name: '李小红',
            avatar: '/static/images/avatar2.jpg',
          },
          activity: '分享了一篇关于旅行的文章',
          timestamp: '5分钟前',
          tags: ['旅行', '分享'],
        },
        {
          user: {
            name: '王小强',
            avatar: '/static/images/avatar3.jpg',
          },
          activity: '完成了今日运动目标',
          timestamp: '10分钟前',
          tags: ['运动', '健康'],
        },
      ],

      // 交互式数据
      interactiveItems: [
        {
          icon: '📊',
          title: '今日销售',
          value: '¥12,580',
          type: 'sales',
        },
        {
          icon: '👥',
          title: '新增用户',
          value: '156人',
          type: 'users',
        },
        {
          icon: '📈',
          title: '增长率',
          value: '+23.5%',
          type: 'growth',
        },
        {
          icon: '🎯',
          title: '完成率',
          value: '89.2%',
          type: 'completion',
        },
      ],
    }
  },
  methods: {
    // 处理通知点击
    handleNotificationClick(item) {
      console.log('通知点击:', item)
      uni.showToast({
        title: `点击了: ${item.actionText}`,
        icon: 'none',
      })
    },

    // 处理推广点击
    handlePromotionClick(item) {
      console.log('推广点击:', item)
      uni.showToast({
        title: `点击了: ${item.title}`,
        icon: 'none',
      })
    },

    // 处理项目点击
    handleItemClick(item, index) {
      console.log('项目点击:', item, index)
      uni.showModal({
        title: item.title,
        content: `当前值: ${item.value}\n类型: ${item.type}`,
        showCancel: false,
      })
    },
  },
}
</script>

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

  .demo-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
  }

  .demo-section {
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 2px solid #007aff;
    }
  }

  // 自定义卡片样式
  .custom-card {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    padding: 15px;
    margin: 0 10px;
    color: white;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    justify-content: center;

    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .card-icon {
        font-size: 20px;
        margin-right: 8px;
      }

      .card-title {
        font-size: 16px;
        font-weight: 600;
      }
    }

    .card-desc {
      font-size: 12px;
      opacity: 0.9;
      line-height: 1.4;
    }

    .card-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 2px 8px;
      font-size: 10px;
    }
  }

  // 通知卡片样式
  .notification-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 0 10px;
    height: calc(100% - 20px);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #ff9500;

    .notification-content {
      flex: 1;
      display: flex;
      align-items: center;

      .notification-icon {
        font-size: 18px;
        margin-right: 10px;
      }

      .notification-text {
        font-size: 14px;
        color: #333;
        line-height: 1.4;
      }
    }

    .notification-action {
      background-color: #007aff;
      border-radius: 16px;
      padding: 6px 12px;

      .action-text {
        color: white;
        font-size: 12px;
      }
    }
  }

  // 推广卡片样式
  .promotion-card {
    position: relative;
    border-radius: 10px;
    margin: 0 10px;
    height: calc(100% - 20px);
    overflow: hidden;

    .promotion-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .promotion-content {
      position: relative;
      z-index: 2;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .promotion-info {
        .promotion-title {
          display: block;
          color: white;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 4px;
        }

        .promotion-subtitle {
          color: rgba(255, 255, 255, 0.9);
          font-size: 12px;
        }
      }

      .promotion-btn {
        background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
        border-radius: 20px;
        padding: 8px 16px;

        .btn-text {
          color: white;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }
  }

  // 用户动态样式
  .activity-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    margin: 0 10px;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        margin-right: 10px;
        background-color: #f0f0f0;
      }

      .user-details {
        .user-name {
          display: block;
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 2px;
        }

        .activity-time {
          font-size: 11px;
          color: #999;
        }
      }
    }

    .activity-content {
      .activity-text {
        font-size: 13px;
        color: #666;
        line-height: 1.4;
        margin-bottom: 6px;
      }

      .activity-tags {
        display: flex;
        gap: 4px;

        .tag {
          background-color: #f0f0f0;
          color: #666;
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 8px;
        }
      }
    }
  }

  // 交互式卡片样式
  .interactive-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 0 10px;
    height: calc(100% - 20px);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .item-icon-wrapper {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: linear-gradient(135deg, #74b9ff, #0984e3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;

      .item-icon {
        font-size: 18px;
        color: white;
      }
    }

    .item-content {
      flex: 1;

      .item-title {
        display: block;
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
      }

      .item-value {
        font-size: 20px;
        font-weight: bold;
        color: #007aff;
      }
    }

    .item-arrow {
      .arrow-icon {
        font-size: 16px;
        color: #ccc;
      }
    }
  }
}
</style>
