<script setup lang="ts">
import TuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue";
import { ref, computed, onMounted } from "vue";

// 定义标签页
const tabs = ref([
  { name: "全部" },
  { name: "进行中" },
  { name: "已完成" }
]);

// 当前选中的标签页
const currentTab = ref(0);

// 定义计划数据的接口
interface PlanData {
  id: string;
  phoneNumber: string;
  planType: string;
  planCycle: string;
  startTime: string;
  status: 'inProgress' | 'completed'; // 计划状态：进行中或已完成
}

// 模拟全部计划数据 (作为数据源)
const mockAllPlanData: PlanData[] = [
  {
    id: 'P001',
    phoneNumber: '1386****123',
    planType: '健身计划',
    planCycle: '7天',
    startTime: '2023-06-01',
    status: 'inProgress'
  },
  {
    id: 'P002',
    phoneNumber: '1590****456',
    planType: '学习计划',
    planCycle: '1个月',
    startTime: '2023-05-15',
    status: 'inProgress'
  },
  {
    id: 'P003',
    phoneNumber: '1377****789',
    planType: '阅读计划',
    planCycle: '半个月',
    startTime: '2023-05-20',
    status: 'completed'
  },
  {
    id: 'P004',
    phoneNumber: '1865****234',
    planType: '工作计划',
    planCycle: '1天',
    startTime: '2023-06-05',
    status: 'inProgress'
  },
  {
    id: 'P005',
    phoneNumber: '1398****567',
    planType: '旅行计划',
    planCycle: '7天',
    startTime: '2023-04-10',
    status: 'completed'
  },
  {
    id: 'P006',
    phoneNumber: '1592****890',
    planType: '饮食计划',
    planCycle: '1个月',
    startTime: '2023-05-01',
    status: 'completed'
  },
  {
    id: 'P007',
    phoneNumber: '1356****345',
    planType: '写作计划',
    planCycle: '半个月',
    startTime: '2023-06-10',
    status: 'inProgress'
  },
  {
    id: 'P008',
    phoneNumber: '1867****678',
    planType: '省钱计划',
    planCycle: '1个月',
    startTime: '2023-05-25',
    status: 'inProgress'
  },
  // 额外添加更多数据以演示分页功能
  {
    id: 'P009',
    phoneNumber: '1377****111',
    planType: '学英语计划',
    planCycle: '1个月',
    startTime: '2023-06-15',
    status: 'inProgress'
  },
  {
    id: 'P010',
    phoneNumber: '1399****222',
    planType: '早起计划',
    planCycle: '7天',
    startTime: '2023-06-20',
    status: 'inProgress'
  },
  {
    id: 'P011',
    phoneNumber: '1566****333',
    planType: '跑步计划',
    planCycle: '半个月',
    startTime: '2023-05-30',
    status: 'inProgress'
  },
  {
    id: 'P012',
    phoneNumber: '1866****444',
    planType: '节食计划',
    planCycle: '1个月',
    startTime: '2023-05-01',
    status: 'completed'
  },
  {
    id: 'P013',
    phoneNumber: '1388****555',
    planType: '学习编程计划',
    planCycle: '1个月',
    startTime: '2023-04-15',
    status: 'completed'
  },
  {
    id: 'P014',
    phoneNumber: '1599****666',
    planType: '看电影计划',
    planCycle: '7天',
    startTime: '2023-06-25',
    status: 'inProgress'
  },
  {
    id: 'P015',
    phoneNumber: '1366****777',
    planType: '睡眠计划',
    planCycle: '半个月',
    startTime: '2023-06-01',
    status: 'inProgress'
  },
  {
    id: 'P016',
    phoneNumber: '1877****888',
    planType: '减肥计划',
    planCycle: '1个月',
    startTime: '2023-05-10',
    status: 'completed'
  },
  {
    id: 'P017',
    phoneNumber: '1399****999',
    planType: '存钱计划',
    planCycle: '1个月',
    startTime: '2023-06-01',
    status: 'inProgress'
  },
  {
    id: 'P018',
    phoneNumber: '1590****000',
    planType: '阅读计划',
    planCycle: '半个月',
    startTime: '2023-05-15',
    status: 'completed'
  }
];

// 分页控制变量
const pageSize = 10; // 每页显示10条数据
const currentPage = ref(1);
const isLoading = ref(false);
const hasMore = ref(true);

// 展示的计划数据
const allPlanData = ref<PlanData[]>([]);

// 加载数据方法
const loadData = (page: number, tabIndex: number, refresh: boolean = false) => {
  isLoading.value = true;
  
  // 根据标签页筛选源数据
  let filteredSource;
  if (tabIndex === 0) {
    // 全部
    filteredSource = mockAllPlanData;
  } else if (tabIndex === 1) {
    // 进行中
    filteredSource = mockAllPlanData.filter(item => item.status === 'inProgress');
  } else {
    // 已完成
    filteredSource = mockAllPlanData.filter(item => item.status === 'completed');
  }
  
  // 模拟网络请求延迟
  setTimeout(() => {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    const newData = filteredSource.slice(start, end);
    
    // 如果是刷新，替换数据；否则追加数据
    if (refresh) {
      allPlanData.value = newData;
    } else {
      allPlanData.value = [...allPlanData.value, ...newData];
    }
    
    // 更新分页状态
    currentPage.value = page;
    hasMore.value = end < filteredSource.length;
    isLoading.value = false;
  }, 500);
};

// 切换标签页时处理
const changeTab = (e: { index: number }) => {
  currentTab.value = e.index;
  // 切换标签页时重置分页并重新加载数据
  currentPage.value = 1;
  loadData(1, e.index, true);
};

// 加载更多数据
const onLoadMore = () => {
  if (!isLoading.value && hasMore.value) {
    loadData(currentPage.value + 1, currentTab.value);
  }
};

// 根据标签页过滤数据
const filteredPlanData = computed(() => {
  return allPlanData.value;
});

// 页面加载时初始化数据
onMounted(() => {
  // 初始加载第一页数据
  loadData(1, currentTab.value, true);
});
</script>

<template>
  <view class="container">
    <!-- 标签页 -->
    <tui-tabs :tabs="tabs" :isFixed="false" :currentTab="currentTab" itemWidth="33.3%" @change="changeTab"></tui-tabs>
    
    <!-- 计划列表 -->
    <scroll-view 
      class="plan-list-scroll" 
      scroll-y 
      @scrolltolower="onLoadMore"
      v-if="filteredPlanData.length > 0 || isLoading"
    >
      <view class="plan-list">
        <view 
          v-for="(item, index) in filteredPlanData" 
          :key="index" 
          class="plan-card"
          :class="{'plan-card-in-progress': item.status === 'inProgress', 'plan-card-completed': item.status === 'completed'}"
        >
          <view class="plan-header">
            <text class="plan-type">{{ item.planType }}</text>
            <text class="plan-id">ID: {{ item.id }}</text>
          </view>
          
          <view class="plan-divider"></view>
          
          <view class="plan-info">
            <view class="info-row">
              <text class="info-label">手机号：</text>
              <text class="info-value">{{ item.phoneNumber }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">计划周期：</text>
              <text class="info-value">{{ item.planCycle }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">开始时间：</text>
              <text class="info-value">{{ item.startTime }}</text>
            </view>
          </view>
        </view>
        
        <!-- 加载状态提示 -->
        <view class="loading-more" v-if="isLoading">
          <view class="loading-icon"></view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <view class="no-more" v-if="!hasMore && !isLoading && filteredPlanData.length > 0">
          <text class="no-more-text">--- 已经到底了 ---</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 空数据状态 -->
    <view class="empty-state" v-if="filteredPlanData.length === 0 && !isLoading">
      <text class="empty-text">暂无相关计划数据</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

.plan-list-scroll {
  flex: 1;
  height: calc(100vh - 100rpx);
}

.plan-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  gap: 20rpx;
}

.plan-card {
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

.plan-card-in-progress {
  background-color: #e6f7ff; /* 浅蓝色背景表示进行中 */
}

.plan-card-completed {
  background-color: #f6ffed; /* 浅绿色背景表示已完成 */
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.plan-type {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.plan-id {
  font-size: 24rpx;
  color: #999;
}

.plan-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06);
  margin: 12rpx 0 16rpx;
}

.plan-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.info-row {
  display: flex;
  line-height: 1.6;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  min-width: 160rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

/* 加载更多样式 */
.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
}

.loading-icon {
  width: 40rpx;
  height: 40rpx;
  border: 3rpx solid #f0f0f0;
  border-top: 3rpx solid #07c160;
  border-radius: 50%;
  margin-right: 10rpx;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
  color: #999;
}

.no-more {
  text-align: center;
  padding: 30rpx 0;
}

.no-more-text {
  font-size: 26rpx;
  color: #999;
}

.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>