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

    <!-- 分享按钮 -->
    <view @tap="shareActivity" class="share-button">
      <text>分享</text>
    </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="checkFamilyStatusAndJoinActivity"
      >
        {{ hasLocationAuth ? '进入活动' : '参加活动' }}
      </nut-button>
    </view>

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

    <!-- 分享选项弹窗 -->
    <nut-action-sheet
      v-model:visible="show_share"
      :menu-items="share_options"
      @choose="onSelectShare"
      @cancel="onCancelShare"
      cancel-txt="取消"
    />

    <!-- 海报预览弹窗 -->
    <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="取消"
    />
  </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'
import PosterBuilder from '../../components/PosterBuilder/index.vue'
// 接口信息
import { getMyFamiliesAPI } from '@/api/family'

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

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

// 海报生成相关状态
const show_share = ref(false) // 显示分享弹窗
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 share_options = [
  { name: '海报' },
]

// 保存选项
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
  }
}

/**
 * 获取用户位置信息
 */
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 checkFamilyStatusAndJoinActivity = async () => {
  // Mock data: hasJoinedFamily is set to false
  if (!hasJoinedFamily.value) {
    Taro.showModal({
      title: '提示',
      content: '没有加入家庭是无法参加活动的',
      cancelText: '关闭',
      confirmText: '前往加入',
      success: (res) => {
        if (res.confirm) {
          Taro.navigateTo({
            url: '/pages/Welcome/index',
          });
        }
      },
    });
  } else {
    handleJoinActivity();
  }
};


/**
 * 处理参加活动按钮点击
 */
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
  }
}

/**
 * 分享活动
 */
const shareActivity = () => {
  show_share.value = true
}

/**
 * 取消分享
 */
const onCancelShare = () => {
  show_share.value = false
}

/**
 * 选择分享方式
 */
const onSelectShare = (item) => {
  show_share.value = false
  if (item.name === '海报') {
    show_post.value = true
    startGeneratePoster()
  }
}

/**
 * 点击海报预览
 */
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
      })
    }
  })
}

// 页面挂载时检查定位授权状态
onMounted(async () => {
  // 获取用户是否加入家庭
  const { code, data } = await getMyFamiliesAPI()
  if (code) {
    // 如果加入家庭
    if (data.length) {
      hasJoinedFamily.value = true
    }
  }
  // 检查定位授权弹窗
  checkLocationAuth()
})
</script>

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