<template>
  <view class="rushing-page">
    <!-- 页面内容 -->
    <scroll-view 
      scroll-y 
      class="scroll-view"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 顶部活动横幅 -->
      <view class="activity-banner">
        <view class="banner-content">
          <!-- <view class="banner-text">
            <text class="banner-title">贴心好礼大派送</text>
            <text class="banner-subtitle">最高不限次数哦</text>
          </view>
          <view class="banner-actions">
            <button class="claim-btn">立即查收</button>
          </view> -->
        </view>
      </view>
      
      <!-- 主要内容区 -->
      <view class="main-content">
        <!-- 标题行和跑马灯通知 -->
        <view class="title-row">
          <view class="title-with-icon">
            <image class="notice-icon" src="http://miao1.suzhouyuqi.com/static/images/notice-ico.png" mode="aspectFit"></image>
          </view>
          <view class="marquee-container">
            <view class="marquee-content">
              <text class="marquee-text">温馨提示：失，后果自担，请您谨慎操作 1.用户在多采购贸易平台</text>
            </view>
          </view>
        </view>
        
        <!-- 通知内容 -->
        <view class="notification-container"  @click="goToPurchaseList">
          <view class="notification-info">
            <view class="shop-name">禹岐商贸</view>
            <view class="time-info">
              <text class="open-time">开放时间：10:00~10:05</text>
              <view class="status-time">
                <view class="status-badge">采购进行中</view>
                <view class="countdown">
                  <text class="countdown-text">{{ countdownTime }}</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 商品图片 -->
          <view class="product-image">
            <image :src="productInfo.image" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <view class="nav-item" @click="goToHome">
        <image class="nav-icon" src="/static/tabBar/home.png" mode="aspectFit"></image>
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-item active">
        <image class="nav-icon" src="/static/tabBar/cartd.png" mode="aspectFit"></image>
        <text class="nav-text active">采购</text>
      </view>
      <view class="nav-item" @click="goToUser">
        <image class="nav-icon" src="/static/tabBar/user.png" mode="aspectFit"></image>
        <text class="nav-text">个人中心</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      refreshing: false,
      countdownTime: '00:03:00',
      countdownInterval: null,
      productInfo: {
        image: '/static/images/empty.png' // 默认图片，实际项目中替换为真实商品图片
      }
    }
  },
  
  onLoad() {
    this.startCountdown();
  },
  
  onUnload() {
    // 清除倒计时
    if (this.countdownInterval) {
      clearInterval(this.countdownInterval);
    }
  },
  
  methods: {
    // 下拉刷新
    async onRefresh() {
      this.refreshing = true;
      // 模拟刷新数据
      setTimeout(() => {
        this.refreshing = false;
      }, 1500);
    },
    
    // 开始倒计时
    startCountdown() {
      // 从3分钟开始倒计时
      let totalSeconds = 3 * 60;
      
      this.updateCountdownDisplay(totalSeconds);
      
      this.countdownInterval = setInterval(() => {
        totalSeconds--;
        
        if (totalSeconds <= 0) {
          clearInterval(this.countdownInterval);
          this.countdownTime = '00:00:00';
          // 可以在这里处理倒计时结束的逻辑
          return;
        }
        
        this.updateCountdownDisplay(totalSeconds);
      }, 1000);
    },
    
    // 更新倒计时显示
    updateCountdownDisplay(totalSeconds) {
      const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
      const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
      const seconds = (totalSeconds % 60).toString().padStart(2, '0');
      
      this.countdownTime = `${hours}:${minutes}:${seconds}`;
    },
    
    // 跳转到首页
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    
    // 跳转到个人中心
    goToUser() {
      uni.switchTab({
        url: '/pages/user/index'
      });
    },
    
    // 跳转到采购列表页
    goToPurchaseList() {
      console.log('跳转到采购列表页');
      uni.showToast({
        title: '正在跳转到采购列表',
        icon: 'none'
      });
      // 使用setTimeout确保toast显示后再跳转
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/rushing/detail',
          success: () => {
            console.log('跳转成功');
          },
          fail: (err) => {
            console.error('跳转失败:', err);
            uni.showToast({
              title: '跳转失败，请重试',
              icon: 'none'
            });
          }
        });
      }, 500);
    }
  }
}
</script>

<style lang="scss" scoped>
.rushing-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* 顶部活动横幅 */
.activity-banner {
  background: url('http://miao1.suzhouyuqi.com/static/images/bg1.png') no-repeat center center;
  background-size: cover;
  padding: 60rpx 30rpx;
  position: relative;
  overflow: hidden;
  height: 300rpx;
  
  .banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .banner-text {
    
    .banner-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #ffffff;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .banner-subtitle {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      display: block;
    }
  }
  
  .banner-actions {
    
    .claim-btn {
      background-color: #ffffff;
      color: #ff6b6b;
      border: none;
      border-radius: 20rpx;
      padding: 15rpx 30rpx;
      font-size: 26rpx;
      font-weight: bold;
    }
  }
}

/* 主要内容区 */
.main-content {
  padding: 30rpx;
}

/* 标题行 */
.title-row {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 0 10rpx;
  
  .title-with-icon {
    display: flex;
    align-items: center;
    margin-right: 15rpx;
    
    .notice-icon {
      width: 144rpx;
      height: 40rpx;
    }
  }
  
  .title-primary {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
}

/* 跑马灯通知 */
.marquee-container {
  flex: 1;
  height: 70rpx;
  // background-color: #fff3e0;
  // border-radius: 35rpx;
  overflow: hidden;
  position: relative;
  // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.marquee-content {
  position: absolute;
  white-space: nowrap;
  animation: marquee 12s linear infinite;
}

.marquee-text {
  font-size: 28rpx;
  color: #ff6b6b;
  line-height: 70rpx;
  padding: 0 30rpx;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 通知容器 */
.notification-container {
  display: flex;
  padding: 40rpx 30rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.1);
  margin-top: 20rpx;
}

/* 通知信息 */
.notification-info {
  flex: 1;
  margin-right: 30rpx;
  
  .shop-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
    border-left: 6rpx solid #ff6b6b;
  }
  
  .time-info {
    
    .open-time {
      display: block;
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
    }
    
    .status-time {
      display: flex;
      align-items: center;
    }
    
    .status-badge {
      background-color: #ff6b6b;
      color: #ffffff;
      padding: 8rpx 20rpx;
      border-radius: 15rpx;
      font-size: 26rpx;
      margin-right: 20rpx;
    }
    
    .countdown {
      background-color: #333333;
      color: #ffffff;
      padding: 8rpx 15rpx;
      border-radius: 15rpx;
      
      .countdown-text {
        font-size: 26rpx;
        font-family: monospace;
      }
    }
  }
}

/* 商品图片 */
.product-image {
  width: 240rpx;
  height: 240rpx;
  flex-shrink: 0;
  
  image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }
}

/* 底部导航栏 */
.bottom-nav {
  display: flex;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  height: 100rpx;
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .nav-icon {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 8rpx;
    }
    
    .nav-text {
      font-size: 24rpx;
      color: #999999;
      
      &.active {
        color: #ff6b6b;
      }
    }
    
    &.active {
      .nav-icon {
        /* 可以在这里添加激活状态的图标样式 */
      }
    }
  }
}
</style>

