<template>
  <view class="limo-mobile">
    <!-- 首页内容 -->
    <view v-if="currentPage === 'home'">
      <!-- Header with logo and energy button -->
      <view class="header">
      <view class="header-content">
        <image :src="logoSrc" class="logo" mode="aspectFit" />
        <!-- <view class="energy-button" @click="goToMSpace">
          <text class="energy-icon">⚡</text>
        </view> -->
      </view>

      <!-- Navigation Tabs -->
      <view class="nav-tabs">
        <view class="tab-item active">
          <text class="tab-text">发现</text>
          <view class="tab-underline"></view>
        </view>
        <view class="tab-item">
          <text class="tab-text">关注</text>
        </view>
      </view>
    </view>

    <!-- Sports Categories -->
    <view class="sports-section">
      <view class="sports-container">
        <view class="sport-item all-category" :class="{ active: selectedSport === 'all' }" @tap="selectSport('all')">
          <view class="category-content">
            <text class="category-text">全部</text>
            <text class="category-text">项目</text>
          </view>
        </view>
        <view class="sport-item" :class="{ active: selectedSport === 'basketball' }" @tap="selectSport('basketball')">
          <view class="sport-icon-container basketball">
            <text class="sport-emoji">🏀</text>
          </view>
          <text class="sport-label">篮球</text>
        </view>
        <view class="sport-item" :class="{ active: selectedSport === 'football' }" @tap="selectSport('football')">
          <view class="sport-icon-container football">
            <text class="sport-emoji">⚽</text>
          </view>
          <text class="sport-label">足球</text>
        </view>
        <view class="sport-item" :class="{ active: selectedSport === 'tennis' }" @tap="selectSport('tennis')">
          <view class="sport-icon-container tennis">
            <text class="sport-emoji">🎾</text>
          </view>
          <text class="sport-label">网球</text>
        </view>
      </view>
    </view>

    <!-- Location Bar -->
    <view class="location-bar">
      <view class="location-content">
        <text class="location-pin">📍</text>
        <text class="location-text">杭州市文一西路未来科技城万利大厦0701</text>
        <text class="location-switch" @tap="switchLocation">切换</text>
      </view>
    </view>

    <!-- Venue Cards -->
    <view class="venue-section">
      <!-- Timeline -->
      <view class="timeline-container">
        <view class="timeline-line"></view>
      </view>

      <!-- First Venue -->
      <view class="venue-card">
        <view class="timeline-dot active"></view>
        <view class="venue-meta">
          <text class="distance">120km</text>
          <text class="separator"></text>
          <view class="update-time">
            <text class="clock-icon">🕐</text>
            <text class="time-text">2分钟前更新</text>
          </view>
        </view>
        <view class="venue-content">
          <view class="venue-image">
            <view class="image-placeholder ronin-bg">
              <text class="placeholder-text">RONIN篮球馆</text>
            </view>
            <view class="play-overlay" @tap="playVideo">
              <view class="play-button">
                <text class="play-icon">▶</text>
              </view>
            </view>
            <view class="live-badge">
              <view class="live-dot"></view>
              <text class="live-text">直播中</text>
            </view>
          </view>
          <view class="venue-info">
            <view class="venue-header">
              <view class="venue-logo ronin-logo">
                <image :src="roninLogoSrc" class="venue-logo-image" mode="aspectFit" />
              </view>
              <view class="venue-details">
                <text class="venue-name">RONIN黄金篮球馆</text>
                <text class="venue-address">杭州拱墅区黑马路124号（肯德基对面）</text>
              </view>
            </view>
            <view class="venue-action">
              <view class="zone-button" @tap="enterZone('ronin')">
                <text class="button-text">进入ZONE</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Second Venue -->
      <view class="venue-card">
        <view class="timeline-dot"></view>
        <view class="venue-meta">
          <text class="distance">140km</text>
          <text class="separator"></text>
          <view class="update-time">
            <text class="clock-icon">🕐</text>
            <text class="time-text">5分钟前更新</text>
          </view>
        </view>
        <view class="venue-content">
          <view class="venue-image">
            <view class="image-placeholder panda-bg">
              <text class="placeholder-text">Panda运动俱乐部</text>
            </view>
            <view class="play-overlay" @tap="playVideo">
              <view class="play-button">
                <text class="play-icon">▶</text>
              </view>
            </view>
            <view class="live-badge">
              <view class="live-dot"></view>
              <text class="live-text">直播中</text>
            </view>
          </view>
          <view class="venue-info">
            <view class="venue-header">
              <view class="venue-logo panda-logo">
                <text class="logo-text">P</text>
              </view>
              <view class="venue-details">
                <text class="venue-name">Panda惊怒熊猫运动俱乐部</text>
                <text class="venue-address">杭州拱墅区黑马路124号（肯德基对面）</text>
              </view>
            </view>
            <view class="venue-action">
              <view class="zone-button" @tap="enterZone('panda')">
                <text class="button-text">进入ZONE</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>

    <!-- 我的页面内容 -->
    <view v-if="currentPage === 'profile'" class="profile-content">
      <!-- User Profile Section -->
      <view class="profile-section">
        <view class="profile-card">
          <view class="profile-header-info">
            <view class="avatar-container">
              <view class="avatar">
                <text class="avatar-initial">U</text>
              </view>
              <view class="online-status"></view>
            </view>
            <view class="profile-info">
              <view class="profile-name-row">
                <text class="profile-name">用户昵称</text>
                <view class="edit-icon" @tap="editProfile">
                  <text class="edit-text">✎</text>
                </view>
              </view>
              <text class="profile-id">ID: 123456789</text>
              <view class="profile-stats">
                <text class="stat-text">积分 2,580</text>
                <view class="stat-divider"></view>
                <text class="stat-text">等级 LV.8</text>
              </view>
            </view>
          </view>
          <view class="member-card-button" @tap="openMemberBenefits">
            <view class="card-background">
              <view class="card-pattern"></view>
              <view class="card-shine"></view>
            </view>
            <view class="card-content">
              <view class="card-left">
                <view class="card-header">
                  <text class="card-title">LIMO</text>
                  <text class="card-subtitle">会员卡</text>
                </view>
                <view class="card-info">
                  <text class="member-level">VIP黄金会员</text>
                  <text class="member-expiry">有效期至 2025.12.31</text>
                </view>
              </view>
              <view class="card-arrow">
                <text class="arrow-icon">›</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Stats Cards -->
      <view class="stats-section">
        <view class="stats-grid">
          <view class="stat-card">
            <text class="stat-number">12</text>
            <text class="stat-label">观看场次</text>
          </view>
          <view class="stat-card">
            <text class="stat-number">5</text>
            <text class="stat-label">收藏场馆</text>
          </view>
          <view class="stat-card">
            <text class="stat-number">28</text>
            <text class="stat-label">观看时长(h)</text>
          </view>
        </view>
      </view>

      <!-- Menu Items -->
      <view class="menu-section">
        <view class="menu-card">
          <view class="menu-item" @tap="goToFavorites">
            <view class="menu-content">
              <text class="menu-title">我的下载</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>

          <view class="menu-item" @tap="goToHistory">
            <view class="menu-content">
              <text class="menu-title">观看历史</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>

          <view class="menu-item" @tap="goToNotifications">
            <view class="menu-content">
              <text class="menu-title">消息通知</text>
            </view>
            <view class="menu-right">
              <view class="notification-dot"></view>
              <text class="menu-arrow">›</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Recent Activity -->
      <view class="activity-section">
        <view class="activity-card">
          <view class="activity-header">
            <view class="activity-indicator"></view>
            <text class="activity-title">最近活动</text>
          </view>
          <view class="activity-list">
            <view class="activity-item">
              <view class="activity-content">
                <text class="activity-title-text">观看了 RONIN黄金篮球馆</text>
                <text class="activity-subtitle">2小时前 · 观看时长 45分钟</text>
              </view>
              <text class="activity-points">+10</text>
            </view>
            <view class="activity-item">
              <view class="activity-content">
                <text class="activity-title-text">收藏了 Panda惊怒熊猫运动俱乐部</text>
                <text class="activity-subtitle">1天前</text>
              </view>
              <text class="activity-points">+5</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Bottom Spacing -->
    <view class="bottom-spacing"></view>

    <!-- Bottom Navigation -->
    <view class="bottom-nav">
      <view class="nav-item" :class="{ active: currentPage === 'home' }" @tap="goHome">
        <view class="nav-icon-container" :class="{ 'home-active': currentPage === 'home' }">
          <image :src="homeIcon" class="nav-icon-svg" mode="aspectFit" />
        </view>
        <text class="nav-label" :class="{ active: currentPage === 'home' }">首页</text>
      </view>
      <view class="nav-item" :class="{ active: currentPage === 'profile' }" @tap="goProfile">
        <view class="nav-icon-container" :class="{ 'profile-active': currentPage === 'profile' }">
          <image :src="userIcon" class="nav-icon-svg" mode="aspectFit" />
        </view>
        <text class="nav-label" :class="{ active: currentPage === 'profile' }">我的</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import './index.scss'

// 静态资源
const logoSrc = 'https://wx-static.drip.im/img/limo/miniapp/logo.svg'
const homeIcon = require('@/assets/images/home.svg')
const userIcon = require('@/assets/images/user.svg')
const backIcon = require('@/assets/images/back.svg')
const roninLogoSrc = 'https://qiniu.drip.im/gh_09bd6126eab8/20250711/upload/4d0efe5313d38f0db01d0cfba4dac9d848bb43a2'

// 响应式状态
const selectedSport = ref('all')
const currentPage = ref('home') // 'home' | 'profile'

// 方法
const selectSport = (sport: string) => {
  selectedSport.value = sport
  console.log('选择运动项目:', sport)
}

const switchLocation = () => {
  console.log('🔥 switchLocation 方法被调用！')
  Taro.showActionSheet({
    itemList: ['杭州市文一西路未来科技城万利大厦0701', '杭州市西湖区文三路123号', '杭州市滨江区江南大道456号'],
    success: (res) => {
      console.log('选择位置:', res.tapIndex)
    }
  })
}

const playVideo = () => {
  Taro.showToast({
    title: '播放视频',
    icon: 'none'
  })
}

const enterZone = (venueType: string) => {
  Taro.navigateTo({
    url: '/pages/zone/index?venue=' + venueType
  }).then(() => {
    console.log('✅ 成功跳转到zone页面')
  }).catch((err) => {
    console.error('❌ 跳转失败:', err)
    Taro.showToast({
      title: '跳转失败',
      icon: 'none'
    })
  })
}

// 页面切换方法
const switchToHome = () => {
  currentPage.value = 'home'
}

const switchToProfile = () => {
  currentPage.value = 'profile'
}

// 导航方法
const goHome = () => {
  currentPage.value = 'home'
}

const goProfile = () => {
  currentPage.value = 'profile'
}

// 我的页面功能方法
const editProfile = () => {
  Taro.showToast({
    title: '编辑用户信息功能开发中',
    icon: 'none'
  })
}

const openMemberBenefits = () => {
  Taro.navigateTo({
    url: '/pages/vip/index'
  })
}

const goToVip = () => {
  Taro.navigateTo({
    url: '/pages/vip/index'
  })
}

const goToFavorites = () => {
  Taro.showToast({
    title: '我的收藏',
    icon: 'none'
  })
}

const goToHistory = () => {
  Taro.showToast({
    title: '观看历史',
    icon: 'none'
  })
}

const goToAddress = () => {
  Taro.showToast({
    title: '常用地址',
    icon: 'none'
  })
}

const goToNotifications = () => {
  Taro.showToast({
    title: '消息通知',
    icon: 'none'
  })
}

const goToPrivacy = () => {
  Taro.showToast({
    title: '隐私设置',
    icon: 'none'
  })
}



onMounted(() => {
  console.log('LIMO来刻首页已加载')
  console.log('Vue组件已挂载，方法可用')
})
</script>
