<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">
          <image class="function-icon" src="../../assets/1.svg" mode="aspectFit"></image>
          <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="navigateToSending">
            <view class="button-content">
              <text>去拨打</text>
              <text class="arrow">›</text>
            </view>
          </button>
        </view>
      </view>


      <!-- 人工传话卡片 -->
      <view class="function-card">
        <view class="function-left">
          <image class="function-icon" src="../../assets/2.svg" mode="aspectFit"></image>
          <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="navigateToSending">
            <view class="button-content">
              <text>去传话</text>
              <text class="arrow">›</text>
            </view>
          </button>
        </view>
      </view>
    </view>

    <view class="card-group additional-cards">
      <!-- 使用v-for循环渲染动态卡片 -->
      <view class="function-card" v-for="(card, index) in additionalCards" :key="index">
        <view class="function-left">
          <image class="function-icon" :src="card.iconPath" mode="aspectFit"></image>
          <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 color-button" 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>
      </view>
    </view>
  </view>

</template>


<script lang="ts" setup>

import { onPullDownRefresh } from '@dcloudio/uni-app';
import {useSwitchTab} from "@/stores/switchTab";

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>('');

// 导航到消息页面
const navigateToSending = (): void => {
  console.log("触发跳转其他页面")
  uni.navigateTo({
    url: '/pages/sending/index',
  });
};
// 导航到计划页面
const navigateToPlanning = (): void => {
  console.log("触发跳转其他页面")
  uni.navigateTo({
    url: '/pages/planning/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';
</style>