<template>
  <view class="container">

    <!-- 页面标题 -->
    <view class="page-title">
      <text class="title-text">很多遗憾&源于当初没有勇敢</text>
    </view>

    <!-- 消息卡片 -->
    <view class="message-card">
      <view class="message-content">
        <view class="message-types">
          <text class="message-type-text">分手挽回, 生日祝福、</text>
          <text class="message-type-text">道歉、告白、时空信也</text>
          <text class="message-type-text">可以发送哦</text>
          <view class="action-button">
            <button class="write-button" @tap="navigateToSending">开始写信</button>
          </view>
        </view>
        <view class="illustration">
          <!-- 注意：需要替换成实际的图片路径 -->
          <image class="illustration-image" src="../../assets/love.svg" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <view class="card-group">

      <!-- 人工传话卡片 -->
      <view class="function-card">
        <view class="function-left">
          <view class="icon-wrapper icon-wrapper-orange">
            <image class="function-icon" src="../../assets/2.svg" mode="aspectFit"></image>
          </view>
          <view class="function-text">
            <text class="function-title">人工传话</text>
            <text class="function-description">成功率更高，更有仪式感</text>
          </view>
        </view>
        <view class="function-right">
          <!-- "去传话"按钮 -->
          <button class="function-button color-button" hover-class="button-hover" @tap="navigateToManual">
            <view class="button-content">
              <text>去传话</text>
              <text class="arrow">›</text>
            </view>
          </button>
        </view>
      </view>

      <!-- 和解电话卡片【第一版本暂时不开发】 -->
      <view class="function-card">
        <view class="function-left">
          <view class="icon-wrapper icon-wrapper-blue">
            <image class="function-icon" src="../../assets/1.svg" mode="aspectFit"></image>
          </view>
          <view class="function-text">
            <text class="function-title">和解电话</text>
            <text class="function-description">被拉黑也能打通的电话</text>
          </view>
        </view>
        <view class="function-right">
          <!-- "去拨打"按钮 -->
          <button class="function-button color-button" hover-class="button-hover" @tap="navigateToCalling">
            <view class="button-content">
              <text>去拨打</text>
              <text class="arrow">›</text>
            </view>
          </button>
        </view>
      </view>

    </view>
    
    <!--居中消息提示组件，移到卡片外部-->
    <tui-tips ref="tuiTips" position="center" backgroundColor="rgba(0, 0, 0, 0.8)" color="#fff" :size="30"></tui-tips>

    <view class="card-group additional-cards">
      <!-- 使用v-for循环渲染动态卡片 -->
      <view class="function-card" v-for="(card, index) in additionalCards" :key="index">
        <view class="function-left">
          <view class="icon-wrapper" :class="getIconClass(index)">
            <image class="function-icon" :src="card.iconPath" mode="aspectFit"></image>
          </view>
          <view class="function-text">
            <text class="function-title">{{ card.title }}</text>
            <text class="function-description">{{ card.description }}</text>
          </view>
        </view>
        <view class="function-right">
          <button class="function-button" :class="getButtonClass(index)" hover-class="button-hover" @tap="navigateToPlanning">
            <view class="button-content">
              <text>{{ card.buttonText }}</text>
              <text class="arrow">›</text>
            </view>
          </button>
        </view>
      </view>

      <!-- 加载状态显示 -->
      <view class="loading-container" v-if="isLoading">
        <text class="loading-text">加载中...</text>
      </view>

      <!--加载失败时显示-->
      <view class="error-container" v-if="loadError">
        <text class="error-text">{{ loadError }}</text>
        <button class="retry-button" @tap="fetchAdditionalCards">重试</button>
      </view>
    </view>
  </view>

</template>


<script lang="ts" setup>

import { onPullDownRefresh } from '@dcloudio/uni-app';
import {useSwitchTab} from "@/stores/switchTab";
import TuiTips from "@/components/thorui/tui-tips/tui-tips.vue";

interface Card {
  id: number;
  title: string;
  description: string;
  iconPath: string;
  buttonText: string;
  pageUrl?: string; // 可选属性
}

// 定义网站配置的接口类型
interface IndexConfig {
  title: string;
}

// 动态加载的卡片数据
const additionalCards = ref<Card[]>([]);
// 遮罩层状态
const isLoading = ref<boolean>(false);
const loadError = ref<string>('');

// tui-tips消息控制
const tuiTips = ref<any>(null);

// 获取图标样式类
const getIconClass = (index: number): string => {
  const classes = ['icon-wrapper-green', 'icon-wrapper-purple', 'icon-wrapper-red'];
  return classes[index % classes.length];
};

// 获取按钮样式类
const getButtonClass = (index: number): string => {
  const classes = ['green-button', 'purple-button', 'red-button'];
  return classes[index % classes.length];
};

// 显示提示消息
const showTip = (message: string, duration: number = 2000): void => {
  if (tuiTips.value) {
    tuiTips.value.showTips({
      msg: message,
      duration: duration
    });
  }
};

// 导航到通话页面
const navigateToCalling = (): void => {
  console.log("触发跳转其他页面");
  
  // 显示提示消息
  showTip('🚧 此通道正在维护中，暂时禁用！', 2000);
  
  // 在控制台输出更多信息
  console.log("用户尝试访问正在开发中的功能: 和解电话");
  
  // 暂时禁用导航
  // setTimeout(() => {
  //   uni.navigateTo({
  //     url: '/pages/calling/index',
  //   });
  // }, 3000);
};

// 导航到人工页面
const navigateToManual = (): void => {
  console.log("触发跳转其他页面")
  uni.navigateTo({
    url: '/pages/manual/index',
  });
};
// 导航到消息页面
const navigateToSending = (): void => {
  console.log("触发跳转其他页面")
  uni.navigateTo({
    url: '/pages/sending/index',
  });
};
// 导航到计划页面
const navigateToPlanning = (): void => {
  console.log("触发跳转其他页面")
  uni.navigateTo({
    url: '/pages/planning/index',
  });
};

// 导航到回复页面
const navigateToReply = (): void => {
  console.log("触发跳转到回复页面");
  uni.navigateTo({
    url: '/pages/reply/index',
  });
};

// 获取额外卡片的数据
const fetchAdditionalCards = (): void => {
  isLoading.value = true;
  loadError.value = '';

  // 模拟API延迟
  setTimeout(() => {
    // 使用模拟数据
    additionalCards.value = [
      {
        id: 1,
        title: '记忆时光机',
        description: '回忆美好时光，重温幸福',
        iconPath: '/static/images/cat.png',
        buttonText: '去回忆'
      },
      {
        id: 2,
        title: '情感咨询',
        description: '专业导师一对一指导',
        iconPath: '/static/images/cat.png',
        buttonText: '去咨询'
      },
      {
        id: 3,
        title: '关系修复',
        description: '重建信任，恢复亲密',
        iconPath: '/static/images/cat.png',
        buttonText: '去修复'
      }
    ];
    isLoading.value = false;
  }, 1000); // 模拟1秒的加载时间
};


// 初始化tab的值
const initLastPage = (): void => {
  const switchTab = useSwitchTab();
  const currentPages = getCurrentPages();
  const lastPage = currentPages[currentPages.length - 1];
  const page = lastPage ? String(lastPage.route) : '';
  switchTab.setLastPage(page);
}


// 生命周期钩子
onMounted(() => {
  console.log("内容已载入")
  // 初始化页面tab的数据
  initLastPage();

  // 加载首页数据
  fetchAdditionalCards();
});

// 下拉刷新钩子
onPullDownRefresh(() => {
  console.log("下拉刷新触发事件")
  uni.stopPullDownRefresh();
  console.log("下拉刷新触发完成")
})

</script>


<style>
@import '../../theme/index/index.css';

.custom-write-button {
  background: linear-gradient(135deg, #537edc, #84a9ff);
  border: none;
  padding: 0;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 12rpx rgba(83, 126, 220, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  max-width: 200rpx;
}

.custom-write-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #4568b2, #7090e7);
  border-radius: 30rpx;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 24rpx;
  position: relative;
  overflow: hidden;
}

.button-text {
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.button-icon {
  margin-left: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounceRight 1.5s infinite;
}
</style>