<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-08-28 15:16:04
 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
 * @Description: 活动海报页面 - 展示活动信息并处理定位授权
-->
<template>
  <view class="activities-cover-container">
    <!-- 活动海报区域 -->
    <view class="poster-section">
      <image
        :src="activityData.posterUrl"
        class="poster-image"
        mode="aspectFill"
      />

      <!-- 活动信息覆盖层 -->
      <view class="poster-overlay">
        <view class="activity-title">{{ activityData.title }}</view>
        <view class="activity-subtitle">{{ activityData.subtitle }}</view>
        <view class="activity-date">{{ activityData.dateRange }}</view>
      </view>
    </view>

    <!-- 活动详情区域 -->
    <view class="details-section">
      <view class="section-title">活动详情</view>
      <view class="activity-description">{{ activityData.description }}</view>

      <view class="section-title">参与规则</view>
      <view class="rules-list">
        <view
          v-for="(rule, index) in activityData.rules"
          :key="index"
          class="rule-item"
        >
          {{ index + 1 }}. {{ rule }}
        </view>
      </view>

      <view class="section-title">活动奖励</view>
      <view class="rewards-list">
        <view
          v-for="(reward, index) in activityData.rewards"
          :key="index"
          class="reward-item"
        >
          <view class="reward-icon">🏆</view>
          <view class="reward-text">{{ reward }}</view>
        </view>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="bottom-section">
      <view v-if="!hasLocationAuth" class="location-tip">
        <view class="tip-icon">📍</view>
        <view class="tip-text">需要获取您的位置信息来参与活动</view>
      </view>

      <nut-button
        type="primary"
        size="large"
        class="join-button"
        color="#3B82F6"
        :loading="isJoining"
        @click="handleJoinActivity"
      >
        {{ hasLocationAuth ? '进入活动' : '参加活动' }}
      </nut-button>
    </view>

    <!-- 底部导航 -->
    <BottomNav />
  </view>
</template>

<script setup>
import '@tarojs/taro/html.css'
import { ref, onMounted } from "vue"
import Taro from '@tarojs/taro'
import "./index.less"
import BottomNav from '../../components/BottomNav.vue'

/**
 * 活动海报页面组件
 * 功能：展示活动信息、处理定位授权、跳转到活动页面
 */

// 页面状态
const hasLocationAuth = ref(false) // 是否已授权定位
const isJoining = ref(false) // 是否正在加入活动
const userLocation = ref({ lng: null, lat: null }) // 用户位置信息

// Mock活动数据
const activityData = ref({
  title: '南京路商圈时尚Citywalk',
  subtitle: '探索城市魅力，感受时尚脉搏',
  dateRange: '2024年1月15日 - 2024年1月31日',
  posterUrl: 'https://img.yzcdn.cn/vant/cat.jpeg', // 临时使用示例图片
  description: '漫步南京路，感受上海的繁华与历史交融。从外滩到人民广场，体验这座城市独特的魅力和时尚气息。',
  rules: [
    '年满60岁的老年人可参与活动',
    '需要在指定时间内完成所有打卡点',
    '每个打卡点需上传照片验证',
    '完成全部打卡可获得电子勋章和积分奖励'
  ],
  rewards: [
    '完成打卡获得500积分',
    '获得专属电子勋章',
    '有机会获得商户优惠券',
    '参与月度积分排行榜'
  ]
})

/**
 * 检查定位授权状态
 */
const checkLocationAuth = async () => {
  try {
    const authSetting = await Taro.getSetting()
    hasLocationAuth.value = authSetting.authSetting['scope.userLocation'] === true
    console.log('定位授权状态:', hasLocationAuth.value)
  } catch (error) {
    console.error('检查定位授权失败:', error)
    hasLocationAuth.value = false
  }
}

/**
 * 获取用户位置信息
 */
const getUserLocation = async () => {
  try {
    const location = await Taro.getLocation({
      type: 'gcj02'
    })

    userLocation.value = {
      lng: location.longitude,
      lat: location.latitude
    }

    console.log('获取到用户位置:', userLocation.value)
    return true
  } catch (error) {
    console.error('获取位置失败:', error)

    if (error.errMsg && error.errMsg.includes('auth deny')) {
      // 用户拒绝授权，引导用户手动开启
      await Taro.showModal({
        title: '需要位置权限',
        content: '参与活动需要获取您的位置信息，请在设置中开启位置权限',
        confirmText: '去设置',
        success: (res) => {
          if (res.confirm) {
            Taro.openSetting()
          }
        }
      })
    } else {
      Taro.showToast({
        title: '获取位置失败',
        icon: 'none'
      })
    }

    return false
  }
}

/**
 * 处理参加活动按钮点击
 */
const handleJoinActivity = async () => {
  isJoining.value = true

  try {
    // 如果没有定位授权，先获取授权和位置信息
    if (!hasLocationAuth.value) {
      const success = await getUserLocation()
      if (!success) {
        isJoining.value = false
        return
      }
      hasLocationAuth.value = true
    } else {
      // 已有授权，直接获取位置
      const success = await getUserLocation()
      if (!success) {
        isJoining.value = false
        return
      }
    }

    // 跳转到Activities页面，并传递位置参数
    await Taro.navigateTo({
      url: `/pages/Activities/index?current_lng=${userLocation.value.lng}&current_lat=${userLocation.value.lat}`
    })

  } catch (error) {
    console.error('参加活动失败:', error)
    Taro.showToast({
      title: '参加活动失败',
      icon: 'none'
    })
  } finally {
    isJoining.value = false
  }
}

// 页面挂载时检查定位授权状态
onMounted(() => {
  checkLocationAuth()
})
</script>

<script>
export default {
  name: "ActivitiesCover",
};
</script>