<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-15 14:10:11
 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
 * @Description: 活动海报页面 - 展示活动信息并处理定位授权
-->
<template>
  <view class="activities-cover-container">
    <!-- 背景图片 -->
    <image
      :src="defaultPoster"
      class="background-image"
      mode="scaleToFill"
    />

    <!-- 分享按钮组件 -->
    <ShareButton
      :activity-data="activityData"
      @share-activity="onShareActivity"
      @share-poster="onSharePoster"
      class="share-button-wrapper"
    />

    <!-- 底部按钮区域 -->
    <view class="bottom-section">
      <!-- 未授权定位提示 - 仅在用户点击参加活动且未授权时显示 -->
      <view v-if="showLocationPrompt && !hasLocationAuth && !locationError" class="location-tip" @click="retryGetLocation">
        <view class="tip-content">
          <view class="tip-icon">📍</view>
          <view class="tip-text">点击获取您的位置信息来参与活动</view>
        </view>
        <!-- <view class="tip-retry">点击重新获取</view> -->
      </view>

      <!-- 位置获取失败提示 -->
      <view v-if="hasLocationAuth && locationError" class="location-tip location-error" @click="retryGetLocation">
        <view class="tip-content">
          <view class="tip-icon">⚠️</view>
          <view class="tip-text">可能是网络问题，获取位置信息失败</view>
        </view>
        <!-- <view class="tip-retry">点击重新获取</view> -->
      </view>

      <nut-button
        type="primary"
        size="large"
        class="join-button"
        color="#3B82F6"
        :loading="isJoining"
        @click="checkFamilyStatusAndJoinActivity"
      >
        {{ getButtonText() }}
      </nut-button>
    </view>

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



    <!-- 海报预览弹窗 -->
    <nut-popup
      v-model:visible="show_post"
      position="center"
      class="poster-preview-popup"
    >
      <view class="wrapper">
        <view class="preview-area" @click="onClickPost">
          <image v-if="posterPath" :src="posterPath" mode="widthFix" />
        </view>
      </view>
    </nut-popup>

    <!-- 海报生成组件 -->
    <PosterBuilder
      v-if="startDraw"
      custom-style="position: fixed; left: 200%;"
      :config="base"
      @success="drawSuccess"
      @fail="drawFail"
    />

    <!-- 保存选项弹窗 -->
    <nut-action-sheet
      v-model:visible="show_save"
      :menu-items="actions_save"
      @choose="onSelectSave"
      @cancel="onCancelSave"
      cancel-txt="取消"
    />

    <!-- 位置权限申请弹窗 -->
    <nut-dialog
      v-model:visible="showLocationDialog"
      title="位置权限申请"
    >
      <template #default>
        <view class=" text-gray-700 leading-loose text-sm text-left">
          {{ locationContent }}
        </view>
      </template>
      <template #footer>
        <nut-row :gutter="10">
          <nut-col :span="12">
            <nut-button
              @click="onLocationCancel"
              type="default"
              size="normal"
              block
            >
              暂不授权
            </nut-button>
          </nut-col>
          <nut-col :span="12">
            <nut-button
              @click="onLocationConfirm"
              type="primary"
              size="normal"
              :color="THEME_COLORS.PRIMARY"
              block
            >
              同意授权
            </nut-button>
          </nut-col>
        </nut-row>
      </template>
    </nut-dialog>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue"
import Taro, { useLoad } from '@tarojs/taro'
import "./index.less"
import BottomNav from '../../components/BottomNav.vue'
import PosterBuilder from '../../components/PosterBuilder/index.vue'
import ShareButton from '../../components/ShareButton/index.vue'
// 接口信息
import { getMyFamiliesAPI } from '@/api/family'
import { handleSharePageAuth, addShareFlag } from '@/utils/authRedirect'
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';

// 默认海报图
const defaultPoster = 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_5.jpg';
/**
 * 活动海报页面组件
 * 功能：展示活动信息、处理定位授权、跳转到活动页面
 */

// 页面状态
const hasLocationAuth = ref(false) // 是否已授权定位
const locationError = ref(false) // 位置获取是否失败
const isJoining = ref(false) // 是否正在加入活动
const userLocation = ref({ lng: null, lat: null }) // 用户位置信息
const hasJoinedFamily = ref(false);
const showLocationPrompt = ref(false) // 是否显示定位权限提示

// Dialog 相关状态
const showLocationDialog = ref(false) // 是否显示位置权限申请弹窗
const pendingLocationCallback = ref(null) // 待执行的位置获取回调

// 位置权限申请说明内容
const locationContent = '为了提供更好的活动体验，我们需要获取您的位置信息：验证您是否在活动区域内, 我们承诺严格保护您的位置隐私，仅用于活动相关功能。'

// 海报生成相关状态
const show_post = ref(false) // 显示海报预览
const show_save = ref(false) // 显示保存弹窗
const startDraw = ref(false) // 开始绘制海报
const posterPath = ref('') // 海报路径
const nickname = ref('老来赛用户') // 用户昵称
// const avatar = ref('https://cdn.ipadbiz.cn/icon/tou@2x.png') // 用户头像

// 保存选项
const actions_save = ref([{
  name: '保存至相册'
}])

// 海报配置
let base = {}
let qrcode_url = 'https://cdn.ipadbiz.cn/space/068a790496c87cb8d2ed6e551401c544.png' // Mock二维码

// 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
  }
}

/**
 * 获取用户位置信息
 * @param {boolean} skipAuthCheck - 是否跳过授权检查（当调用方已经检查过授权状态时）
 */
const getUserLocation = async (skipAuthCheck = false) => {
  try {
    locationError.value = false // 重置错误状态

    // 如果没有跳过授权检查，则检查权限状态
    if (!skipAuthCheck) {
      const authSetting = await Taro.getSetting()
      const hasLocationAuth = authSetting.authSetting['scope.userLocation']

      // 如果没有授权，先显示数据用途说明
      if (hasLocationAuth !== true) {
        return new Promise((resolve) => {
          pendingLocationCallback.value = resolve
          showLocationDialog.value = true
        })
      }
    }

    const location = await Taro.getLocation({
      type: 'gcj02',
      altitude: false, // 不需要海拔信息，提高获取速度
      isHighAccuracy: true, // 开启高精度定位
      highAccuracyExpireTime: 4000 // 高精度定位超时时间
    })

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

    console.log('获取到用户位置:', userLocation.value)
    // 获取位置成功后隐藏提示
    showLocationPrompt.value = false
    hasLocationAuth.value = true
    return true
  } catch (error) {
    console.error('获取位置失败:', error)

    if (error.errMsg && error.errMsg.includes('auth deny')) {
      // 用户拒绝授权，引导用户手动开启
      hasLocationAuth.value = false
      locationError.value = false
      await Taro.showModal({
        title: '需要位置权限',
        content: '参与活动需要获取您的位置信息，请在设置中开启位置权限',
        confirmText: '去设置',
        success: (res) => {
          if (res.confirm) {
            Taro.openSetting()
          }
        }
      })
    } else if (error.errMsg && error.errMsg.includes('timeout')) {
      // 定位超时
      locationError.value = true
      Taro.showToast({
        title: '定位超时，请检查网络或GPS',
        icon: 'none',
        duration: 3000
      })
    } else if (error.errMsg && error.errMsg.includes('fail')) {
      // 定位失败，可能是GPS关闭或网络问题
      locationError.value = true
      await Taro.showModal({
        title: '定位失败',
        content: '请确保已开启GPS定位服务，并检查网络连接是否正常',
        showCancel: false,
        confirmText: '我知道了'
      })
    } else {
      // 其他未知错误
      locationError.value = true
      Taro.showToast({
        title: '获取位置失败，请重试',
        icon: 'none'
      })
    }

    return false
  }
}

/**
 * 获取按钮显示文本
 */
const getButtonText = () => {
  // 如果没有加入家庭，显示"加入家庭"
  if (!hasJoinedFamily.value) {
    return '参加活动'
  }

  // 如果位置获取失败，显示"重新定位"
  if (locationError.value) {
    return '重新定位'
  }

  // 如果需要显示位置提示，说明需要授权
  if (showLocationPrompt.value) {
    return '授权定位'
  }

  // 如果已有定位授权且有位置信息，显示"进入活动"
  if (hasLocationAuth.value && userLocation.value.lng && userLocation.value.lat) {
    return '进入活动'
  }

  // 默认显示"参加活动"
  return '参加活动'
}

/**
 * 检查用户是否加入家庭并处理参加活动按钮点击
 */
const checkFamilyStatusAndJoinActivity = async () => {
  // 如果没有加入家庭，引导用户加入家庭
  if (!hasJoinedFamily.value) {
    Taro.showModal({
      title: '提示',
      content: '没有加入家庭是无法参加活动的',
      cancelText: '关闭',
      confirmText: '前往加入',
      success: (res) => {
        if (res.confirm) {
          Taro.redirectTo({
            url: '/pages/Welcome/index',
          });
        }
      },
    });
    return
  }

  // 如果位置获取失败，重新获取位置
  if (locationError.value) {
    await retryGetLocation()
    return
  }

  // 如果需要显示位置提示，说明需要授权
  if (showLocationPrompt.value) {
    showLocationPrompt.value = false // 隐藏提示，直接尝试获取位置
    await handleJoinActivity()
    return
  }

  // 正常参加活动流程
  await handleJoinActivity()
};


/**
 * 重新获取位置信息
 */
const retryGetLocation = async () => {
  try {
    const success = await getUserLocation(false) // 不跳过授权检查，重新处理授权逻辑
    if (success) {
      hasLocationAuth.value = true
      locationError.value = false
      Taro.showToast({
        title: '位置获取成功',
        icon: 'success'
      })
    }
  } catch (error) {
    console.error('重新获取位置失败:', error)
  }
}

/**
 * 位置权限申请弹窗 - 取消操作
 */
const onLocationCancel = () => {
  showLocationDialog.value = false
  if (pendingLocationCallback.value) {
    Taro.showToast({
      title: '需要位置权限才能参与活动',
      icon: 'none'
    })
    pendingLocationCallback.value(false)
    pendingLocationCallback.value = null
  }
}

/**
 * 位置权限申请弹窗 - 同意授权
 */
const onLocationConfirm = async () => {
  showLocationDialog.value = false

  try {
    const location = await Taro.getLocation({
      type: 'gcj02',
      altitude: false,
      isHighAccuracy: true,
      highAccuracyExpireTime: 4000
    })

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

    console.log('获取到用户位置:', userLocation.value)
    showLocationPrompt.value = false
    hasLocationAuth.value = true

    if (pendingLocationCallback.value) {
      pendingLocationCallback.value(true)
      pendingLocationCallback.value = null
    }
  } catch (error) {
    console.error('获取位置失败:', error)
    if (pendingLocationCallback.value) {
      pendingLocationCallback.value(false)
      pendingLocationCallback.value = null
    }
  }
}

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

  try {
    // 检查定位授权状态
    const authSetting = await Taro.getSetting()
    const hasLocationPermission = authSetting.authSetting['scope.userLocation']

    if (hasLocationPermission === false) {
      // 用户之前拒绝过授权，显示提示让用户手动开启
      showLocationPrompt.value = true
      isJoining.value = false
      return
    } else if (hasLocationPermission === undefined) {
      // 未请求过授权，直接尝试获取位置（会触发授权弹窗）
      const success = await getUserLocation(false) // 不跳过授权检查，让getUserLocation处理授权逻辑
      if (!success) {
        showLocationPrompt.value = true
        isJoining.value = false
        return
      }
    } else {
      // 已有授权，直接获取位置
      const success = await getUserLocation(true) // 跳过授权检查，直接获取位置
      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
  }
}

/**
 * 处理分享活动事件
 */
const onShareActivity = () => {
  console.log('分享活动海报')
  // 分享给朋友
  Taro.showToast({
      title: '请点击右上角分享给朋友',
      icon: 'none',
      duration: 2000
  });
}

/**
 * 定义分享给朋友的内容
 * @returns {Object} 分享配置对象
 */
const onShareAppMessage = () => {
    return {
      title: '分享活动海报',
      path: addShareFlag('/pages/ActivitiesCover/index'),
      success: (res) => {
        // 分享成功
      },
      fail: (err) => {
        // 分享失败
      }
    }
}

// 导出分享方法供Taro使用
defineExpose({
    onShareAppMessage,
})

/**
 * 处理分享海报事件
 */
const onSharePoster = () => {
  console.log('分享海报')
  Taro.navigateTo({
    url: '/pages/PosterCheckin/index',
  })
}

/**
 * 点击海报预览
 */
const onClickPost = () => {
  show_save.value = true
}

/**
 * 取消保存
 */
const onCancelSave = () => {
  show_save.value = false
  show_post.value = false
}

/**
 * 选择保存方式
 */
const onSelectSave = (item) => {
  if (item.name === '保存至相册') {
    show_save.value = false
    show_post.value = false
    savePoster()
  }
}

/**
 * 开始生成海报
 */
// const startGeneratePoster = async () => {
//   // 配置海报参数
//   base = {
//     width: 1024,
//     height: 1334,
//     backgroundColor: '',
//     debug: false,
//     blocks: [
//       { // 上部分canvas画布高度
//         x: 40,
//         y: 20,
//         width: 950,
//         height: 950,
//         paddingLeft: 0,
//         paddingRight: 0,
//         borderWidth: 1,
//         borderColor: '#fff',
//         backgroundColor: '#fff',
//         borderRadiusGroup: [16, 16, 0, 0],
//       },
//       { // 活动时间背景图
//         x: 40,
//         y: 730,
//         height: 75,
//         paddingLeft: 80,
//         paddingRight: 0,
//         borderWidth: 0,
//         text: {
//           x: 0,
//           y: 0,
//           text: activityData.value.dateRange,
//           fontSize: 40,
//           color: '#222',
//           opacity: 1,
//           baseLine: 'top',
//           lineHeight: 48,
//           lineNum: 2,
//           textAlign: 'left',
//           zIndex: 0,
//         },
//         backgroundColor: '#FFF9F3',
//         borderRadiusGroup: [0, 25, 25, 0],
//       },
//       { // 活动地点背景图
//         x: 40,
//         y: 830,
//         height: 75,
//         paddingLeft: 80,
//         paddingRight: 0,
//         borderWidth: 0,
//         text: {
//           x: 0,
//           y: 0,
//           text: '上海市黄浦区南京东路',
//           fontSize: 40,
//           color: '#222',
//           opacity: 1,
//           baseLine: 'top',
//           lineHeight: 48,
//           lineNum: 2,
//           textAlign: 'left',
//           zIndex: 0,
//         },
//         backgroundColor: '#FFF9F3',
//         borderRadiusGroup: [0, 25, 25, 0],
//       },
//       { // 下部分canvas画布高度
//         x: 40,
//         y: 1060,
//         width: 950,
//         height: 250,
//         paddingLeft: 0,
//         paddingRight: 0,
//         borderWidth: 1,
//         borderColor: '#fff',
//         backgroundColor: '#fff',
//         borderRadiusGroup: [0, 0, 16, 16],
//       }
//     ],
//     texts: [
//       {
//         x: 80,
//         y: 630,
//         text: activityData.value.title,
//         fontSize: 50,
//         color: '#000',
//         opacity: 1,
//         baseLine: 'middle',
//         lineHeight: 60,
//         lineNum: 2,
//         textAlign: 'left',
//         width: 800,
//         zIndex: 999,
//         fontFamily: 'Monospace',
//       },
//       {
//         x: 135,
//         y: 770,
//         text: activityData.value.dateRange,
//         fontSize: 40,
//         color: '#222',
//         opacity: 1,
//         baseLine: 'middle',
//         lineHeight: 48,
//         lineNum: 2,
//         textAlign: 'left',
//         zIndex: 999,
//       },
//       {
//         x: 135,
//         y: 870,
//         text: '上海市黄浦区南京东路',
//         fontSize: 40,
//         color: '#222',
//         opacity: 1,
//         baseLine: 'middle',
//         lineHeight: 48,
//         lineNum: 2,
//         textAlign: 'left',
//         zIndex: 999,
//       },
//       {
//         x: 300,
//         y: 1150,
//         text: nickname.value,
//         fontSize: 50,
//         color: '#333',
//         opacity: 1,
//         baseLine: 'middle',
//         textAlign: 'left',
//         lineHeight: 50,
//         lineNum: 1,
//         zIndex: 999,
//       },
//       {
//         x: 300,
//         y: 1220,
//         text: '邀请你一起来活动！',
//         fontSize: 42,
//         color: '#8F9399',
//         opacity: 1,
//         baseLine: 'middle',
//         textAlign: 'left',
//         lineHeight: 42,
//         lineNum: 1,
//         zIndex: 999,
//       }
//     ],
//     images: [
//       {
//         url: qrcode_url,
//         width: 949,
//         height: 108,
//         x: 40,
//         y: 960,
//         zIndex: 10,
//       },
//       {
//         url: qrcode_url,
//         width: 950,
//         height: 500,
//         x: 40,
//         y: 20,
//         borderRadiusGroup: [18, 18, 0, 0],
//         zIndex: 10,
//       },
//       {
//         url: qrcode_url,
//         width: 40,
//         height: 40,
//         x: 80,
//         y: 750,
//         borderRadius: 100,
//         borderWidth: 0,
//         zIndex: 10,
//       },
//       {
//         url: qrcode_url,
//         width: 35,
//         height: 40,
//         x: 80,
//         y: 850,
//         borderRadius: 100,
//         borderWidth: 0,
//         zIndex: 10,
//       },
//       {
//         url: qrcode_url,
//         width: 170,
//         height: 170,
//         x: 80,
//         y: 1090,
//         borderRadius: 100,
//         borderWidth: 0,
//         zIndex: 10,
//       },
//       {
//         url: qrcode_url,
//         width: 170,
//         height: 170,
//         x: 750,
//         y: 1090,
//         borderRadius: 100,
//         borderWidth: 0,
//         zIndex: 10,
//       },
//     ],
//     lines: []
//   }

//   startDraw.value = true
//   if (!posterPath.value) Taro.showLoading({ title: '生成海报中...' })
// }

/**
 * 海报绘制成功回调
 */
const drawSuccess = (result) => {
  console.log('绘制成功', result)
  const { tempFilePath, errMsg } = result
  if (errMsg === 'canvasToTempFilePath:ok') {
    posterPath.value = tempFilePath
    Taro.hideLoading()
  } else {
    Taro.hideLoading()
    Taro.showToast({
      title: '生成失败，请稍后重试',
      icon: 'none',
      duration: 2500
    })
  }
}

/**
 * 海报绘制失败回调
 */
const drawFail = (result) => {
  console.log('绘制失败', result)
  Taro.hideLoading()
  Taro.showToast({
    title: '生成失败，请稍后重试',
    icon: 'none',
    duration: 2500
  })
}

/**
 * 保存海报到相册
 */
const savePoster = () => {
  Taro.saveImageToPhotosAlbum({
    filePath: posterPath.value,
    success() {
      Taro.showToast({
        title: '已保存到相册',
        icon: 'success',
        duration: 2000
      })
    },
    fail() {
      Taro.showToast({
        title: '保存失败',
        icon: 'none',
        duration: 2000
      })
    }
  })
}

/**
 * 初始化页面数据
 */
const initPageData = async () => {
  // 获取用户是否加入家庭
  const { code, data } = await getMyFamiliesAPI()
  if (code) {
    // 如果加入家庭
    if (data.length) {
      hasJoinedFamily.value = true
    }
  }

  // 检查定位授权状态（不获取位置，只检查权限）
  await checkLocationAuth()
}

// 处理页面加载时的授权检查
useLoad((options) => {
  // 处理分享页面的授权逻辑
  handleSharePageAuth(options, () => {
    initPageData();
  });
});

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

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