<template>
  <view class="container">
    <Home v-if="globalStore.curTabIndex == 0 && !globalStore.isWxFriendCircle" :scroll-top="scrollTop" />
    <Brand v-if="globalStore.curTabIndex == 1 && !globalStore.isWxFriendCircle" :scroll-top="scrollTop" />
    <Integral v-if="globalStore.curTabIndex == 2 && !globalStore.isWxFriendCircle" :scrollTop="scrollTop" />
    <My v-if="globalStore.curTabIndex == 3 && !globalStore.isWxFriendCircle" />
    <TabBar v-if="!globalStore.isWxFriendCircle" :curTabIndex="globalStore.curTabIndex" @tabClick="handleTabClick" />
	<WxFriendCircleSimplePage v-if="globalStore.isWxFriendCircle" />
	
	<!-- 邀请奖品弹窗 -->
	<InvitePrizePanel 
		:visible="globalStore.isShowInvitePrizePanel"
		:inviteCount="1"
		:prizeName="'奖品名称奖品名称'"
		:prizeImage="''"
		@close="handleCloseInvitePrizePanel"
		@record="handleInvitePrizePanelRecord"
		@prize="handleInvitePrizePanelPrize"
	/>
	
	<!-- 任务完成弹窗 -->
	<TaskComplete 
		:visible="globalStore.isShowTaskComplete"
		:points="globalStore.taskCompletePoints"
		:taskTitle="globalStore.taskCompleteTitle"
		@close="handleCloseTaskComplete"
		@accept="handleAcceptTaskComplete"
	/>
  
  <button v-if="isBackApp" class="back-app" open-type="launchApp" app-parameter="wechat" @binderror="handleLaunchAppError"
    :style="{
      backgroundImage: `url(${$baseUrl}homepage/backAppBtn.png)`,
    }"
  >
      <!-- <text class="back-text">返回app</text> -->
    </button>

    <!-- 金币动画模块 -->
    <view class="gold-coin-animation" v-if="false" @tap="hideGoldCoinAnimation">
      <view class="gold-coin-content" @tap.stop>
        <view class="gold-coin-title">{{ goldCoinConfig.title }}</view>
        <view class="gold-coin-description">{{ goldCoinConfig.description }}</view>
        <view class="gold-coin-container">
          <image class="gold-coin gold-coin-1" :src="$baseUrl + 'homepage/Q3Res/goldCoin.png'"></image>
        </view>
      </view>
    </view>

    <!-- 悬浮授权手机号模块 -->
    <view class="auth-phone-module" v-if="!false">
      <image class="auth-phone-bg" :src="$baseUrl + 'homepage/Q3Res/accessBg.png'"></image>
      <view class="auth-phone-btn-container">
        <image class="auth-phone-btn" :src="$baseUrl + 'homepage/Q3Res/accessBtn.png'" @tap="handleAuthPhoneClick">
        </image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll } from "@dcloudio/uni-app";
import TabBar from "@/components/TabBar.vue";
import Home from "@/views/Home.vue";
import Brand from "@/views/Brand.vue";
import Integral from "@/views/Integral.vue";
import My from "@/views/My.vue";
import WxFriendCircleSimplePage from "@/components/WxFriendCircleSimplePage.vue";
import InvitePrizePanel from "@/components/integralArea/InvitePrizePanel.vue";
import TaskComplete from "@/components/qiandao/TaskComplete.vue";
import { useGlobalStore } from "@/stores/global.js";
import { useUserStore } from "@/stores/user.js";
import { jump, JumpType } from "../../utils";

const globalStore = useGlobalStore();
const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const $baseUrl = proxy.$baseUrl;
const homeRef = ref(null);
const scrollTop = ref(0);
const isBackApp = ref(false);
const showGoldCoinAnimation = ref(false);
const goldCoinConfig = ref({
  title: '恭喜你回答正确',
  description: '获得20积分'
});
const shareOptions = {
  0: {
    title: "8000万中国妈妈信赖的育儿品牌",
    path: "/pages/index/index?pageType=home",
    imageUrl: $baseUrl + "share/share_home0901.jpg",
  },
  1: {
    title: "飞鹤提供家庭营养一站式解决方案",
    path: "/pages/index/index?pageType=brand",
    imageUrl: $baseUrl + "share/share_brand.png",
  },
  2: {
    title: "超凡吸收！更多妈妈推荐的奶粉",
    path: "/pages/index/index?pageType=integral",
    imageUrl: $baseUrl + "share/share_integral.png",
  },
};

// 处理返回APP失败的情况
const handleLaunchAppError = (e) => {
  console.error('返回APP失败:', e.detail.errMsg);

  // 根据错误类型给出不同的提示
  let errorMessage = '返回APP失败';
  if (e.detail.errMsg.includes('fail')) {
    errorMessage = '无法返回APP，请检查APP是否已安装';
  }

  uni.showToast({
    title: errorMessage,
    icon: 'none',
    duration: 2000
  });
};

function handleTabClick({ index }) {
  globalStore.setCurTabIndex(index);
}

// 处理授权手机号按钮点击
const handleAuthPhoneClick = () => {
  jump({
    type: JumpType.INNER,
    url: "/pages/activity/register",
  })
}

// 显示金币动画
const showGoldCoinEffect = (config = {}) => {
  // 合并配置
  goldCoinConfig.value = {
    title: config.title || '恭喜你回答正确',
    description: config.description || '获得20积分',
    ...config
  };

  // 显示动画
  showGoldCoinAnimation.value = true;

  // 3秒后自动隐藏
  setTimeout(() => {
    showGoldCoinAnimation.value = false;
  }, 3000);
}

// 隐藏金币动画
const hideGoldCoinAnimation = () => {
  showGoldCoinAnimation.value = false;
}

onLoad((options) => {
  const optionsSync = wx.getEnterOptionsSync()
  if (optionsSync.scene == '1154') {
    globalStore.setIsWxFriendCircle(true)
  }

  // 加载会员信息，确保能正确判断手机号授权状态
  if (userStore.isLogin) {
    userStore.loadMemberInfo();
  }
  if (optionsSync.scene == '1069') {
    isBackApp.value = true;
  } else {
    isBackApp.value = false;
  }

  console.warn('options231', options, globalStore.isWxFriendCircle)
  if (options.pageType) {
    switch (options.pageType) {
      case "home":
        globalStore.setCurTabIndex(0);
        break;
      case "brand":
        globalStore.setCurTabIndex(1);
        break;
      case "integral":
        globalStore.setCurTabIndex(2);
        break;
      case "my":
        globalStore.setCurTabIndex(3);
        break;
    }
  }
});

onShareAppMessage(() => {
  const pageType = globalStore.curTabIndex;
  return shareOptions[pageType] || shareOptions[0];
});

onShareTimeline(() => {
  const pageType = globalStore.curTabIndex;
  return shareOptions[pageType] || shareOptions[0];
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

// 页面显示时检查会员信息
// onShow(() => {
//   if (userStore.isLogin) {
//     userStore.loadMemberInfo();
//   }
// });

// 暴露显示金币动画的方法供其他组件调用
defineExpose({
  showGoldCoinEffect
});

// 邀请奖品弹窗相关方法
const handleInviteClick = () => {
	console.log('邀请按钮点击，显示奖品弹窗');
	globalStore.isShowInvitePrizePanel = true;
};

const handleCloseInvitePrizePanel = () => {
	globalStore.isShowInvitePrizePanel = false;
};

const handleInvitePrizePanelRecord = () => {
	console.log('查看邀请记录');
	globalStore.isShowInvitePrizePanel = false;
	// 这里可以添加跳转到邀请记录页面的逻辑
};

const handleInvitePrizePanelPrize = () => {
	console.log('查看奖品');
	globalStore.isShowInvitePrizePanel = false;
	// 这里可以添加跳转到奖品页面的逻辑
};

// 任务完成弹窗处理方法
const handleCloseTaskComplete = () => {
	globalStore.isShowTaskComplete = false;
};

const handleAcceptTaskComplete = () => {
	console.log('接受任务完成奖励');
	globalStore.isShowTaskComplete = false;
	// 这里可以添加接受奖励后的逻辑
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;

  .content {
    padding-bottom: 100rpx; // 为底部TabBar留出空间
  }
}

/* 金币动画样式 */
.gold-coin-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-out;
}

.gold-coin-content {
  text-align: center;
  padding: 60rpx 40rpx;
}

.gold-coin-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  animation: slideUp 0.5s ease-out;
}

.gold-coin-description {
  font-size: 32rpx;
  color: #ffd700;
  margin-bottom: 40rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  animation: slideUp 0.7s ease-out;
}

.gold-coin-container {
  position: relative;
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gold-coin {
  position: absolute;
  width: 167rpx;
  height: 162rpx;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  will-change: transform, opacity;
}

.gold-coin-1 {
  animation: goldCoinFly 1.5s ease-out 1;
  z-index: 5;
}

/* 缓动动画关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50rpx);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 单个金币从中间飞向底部导航"我的"图标的动画 - 自然延续的曲线波动 */
@keyframes goldCoinFly {
  0% {
    transform: translate(0, 0) scale(1.3) rotate(0deg);
    opacity: 1;
    left: 50%;
    top: 50%;
  }
  20% {
    transform: translate(100rpx, 120rpx) scale(1.25) rotate(10deg);
    opacity: 1;
    left: 50%;
    top: 50%;
  }
  40% {
    transform: translate(160rpx, 280rpx) scale(1.2) rotate(15deg);
    opacity: 1;
    left: 50%;
    top: 50%;
  }
  60% {
    transform: translate(190rpx, 380rpx) scale(1.1) rotate(25deg);
    opacity: 0.95;
    left: 50%;
    top: 50%;
  }
  70% {
    transform: translate(200rpx, 420rpx) scale(0.9) rotate(30deg);
    opacity: 0.8;
    left: 50%;
    top: 50%;
  }
  80% {
    transform: translate(208rpx, 460rpx) scale(0.7) rotate(38deg);
    opacity: 0.6;
    left: 50%;
    top: 50%;
  }
  90% {
    transform: translate(215rpx, 500rpx) scale(0.3) rotate(42deg);
    opacity: 0.3;
    left: 50%;
    top: 50%;
  }
  100% {
    transform: translate(220rpx, 550rpx) scale(0) rotate(45deg);
    opacity: 0;
    left: 50%;
    top: 50%;
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

// .back-app{
//     position: fixed;
//     top: 100rpx;
//     border-radius: 34rpx;
//     height: 68rpx;
//     width: 250rpx;
//     left:20rpx;
//     // background-image: url('https://course.feihe.com/momclub-picture/back_app.png');
//     // .back-text{
//     //   position: absolute;
//     //   font-size: 28rpx;
//     //   left: 30rpx;
//     // }
//   }

.back-app {
  position: fixed;
  top: 100rpx;
  border-radius: 34rpx;
  height: 68rpx;
  width: 150rpx;
  left: 20rpx;
  border: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;

  &:active {
    transform: scale(0.98);
  }

  &::after {
    border: none !important;
  }
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

/* 悬浮授权手机号模块样式 */
.auth-phone-module {
  position: fixed;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 698rpx;
  height: 96rpx;
  z-index: 998;
  // position: relative;
  border-radius: 44rpx;
  overflow: hidden;
}

.auth-phone-bg {
  width: 100%;
  height: 100%;
  display: block;
}

.auth-phone-btn-container {
  position: absolute;
  bottom: 18rpx;
  right: 40rpx;
}

.auth-phone-btn {
  width: 160rpx;
  height: 60rpx;
  display: block;
}

.auth-phone-btn:active {
  transform: scale(0.95);
}
</style>