<template>
  <view class="test-page">
    <view class="test-section">
      <text class="test-title">Tab组件测试</text>
      
      <!-- 基础测试 -->
      <view class="test-item">
        <text class="item-title">基础用法</text>
        <Tab 
          :tabs="basicTabs" 
          :defaultActive="0"
          @change="handleTabChange"
        />
        <view class="result">
          <text>当前选中: {{ currentTab.label }}</text>
        </view>
      </view>
      
      <!-- 多标签测试 -->
      <view class="test-item">
        <text class="item-title">多标签测试</text>
        <Tab 
          :tabs="multiTabs" 
          :defaultActive="1"
          @change="handleMultiTabChange"
        />
        <view class="result">
          <text>当前选中: {{ currentMultiTab.label }}</text>
        </view>
      </view>
      
      <!-- 快速切换测试 -->
      <view class="test-item">
        <text class="item-title">快速切换测试</text>
        <Tab 
          ref="fastTabRef"
          :tabs="fastTabs" 
          :defaultActive="0"
          @change="handleFastTabChange"
        />
        <view class="result">
          <text>当前选中: {{ currentFastTab.label }}</text>
        </view>
        <view class="test-buttons">
          <button 
            v-for="(tab, index) in fastTabs" 
            :key="index"
            class="test-btn"
            @click="switchToTab(index)"
          >
            切换到{{ tab.label }}
          </button>
        </view>
      </view>
      
      <!-- 初始化测试 -->
      <view class="test-item">
        <text class="item-title">初始化测试</text>
        <text class="test-desc">测试指示器的动态高度和宽度初始化及错误处理</text>
        <Tab 
          v-if="showInitTest"
          :tabs="initTestTabs" 
          :defaultActive="initActiveIndex"
          @change="handleInitTestChange"
        />
        <view class="result">
          <text>当前选中: {{ currentInitTab.label }}</text>
        </view>
        <view class="test-buttons">
          <button class="test-btn" @click="toggleInitTest">
            {{ showInitTest ? '隐藏' : '显示' }}组件
          </button>
          <button class="test-btn" @click="changeInitActive">
            切换默认激活项 (当前: {{ initActiveIndex }})
          </button>
          <button class="test-btn" @click="addInitTab">
            添加Tab
          </button>
          <button class="test-btn" @click="removeInitTab">
            移除Tab
          </button>
          <button class="test-btn" @click="rapidToggle">
            快速切换测试
          </button>
        </view>
        <view class="test-info">
          <text>错误处理测试：组件现在能够安全处理实例为null的情况</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import Tab from './index.vue'

// 基础标签
const basicTabs = ref([
  { label: '全部订单', value: 'all' },
  { label: '服务工单', value: 'service' }
])

// 多标签
const multiTabs = ref([
  { label: '全部', value: 'all' },
  { label: '待支付', value: 'unpaid' },
  { label: '待确认', value: 'unconfirmed' },
  { label: '进行中', value: 'processing' },
  { label: '已完成', value: 'completed' }
])

// 快速切换测试
const fastTabs = ref([
  { label: '标签A', value: 'a' },
  { label: '标签B', value: 'b' },
  { label: '标签C', value: 'c' },
  { label: '标签D', value: 'd' }
])

// 初始化测试
const initTestTabs = ref([
  { label: '初始1', value: 'init1' },
  { label: '初始2', value: 'init2' },
  { label: '初始3', value: 'init3' }
])

// 当前选中索引
const currentTabIndex = ref(0)
const currentMultiTabIndex = ref(1)
const currentFastTabIndex = ref(0)
const currentInitTabIndex = ref(1)

// 初始化测试状态
const showInitTest = ref(true)
const initActiveIndex = ref(1)

// 计算当前选中项
const currentTab = computed(() => basicTabs.value[currentTabIndex.value] || {})
const currentMultiTab = computed(() => multiTabs.value[currentMultiTabIndex.value] || {})
const currentFastTab = computed(() => fastTabs.value[currentFastTabIndex.value] || {})
const currentInitTab = computed(() => initTestTabs.value[currentInitTabIndex.value] || {})

// Tab引用
const fastTabRef = ref(null)

// 事件处理
const handleTabChange = ({ index, item }) => {
  currentTabIndex.value = index
  console.log('基础Tab切换:', item)
}

const handleMultiTabChange = ({ index, item }) => {
  currentMultiTabIndex.value = index
  console.log('多标签Tab切换:', item)
}

const handleFastTabChange = ({ index, item }) => {
  currentFastTabIndex.value = index
  console.log('快速Tab切换:', item)
}

const handleInitTestChange = ({ index, item }) => {
  currentInitTabIndex.value = index
  console.log('初始化Tab切换:', item)
}

// 程序化切换
const switchToTab = (index) => {
  currentFastTabIndex.value = index
  if (fastTabRef.value) {
    fastTabRef.value.setActiveIndex(index)
  }
}

// 初始化测试方法
const toggleInitTest = () => {
  showInitTest.value = !showInitTest.value
}

const changeInitActive = () => {
  initActiveIndex.value = (initActiveIndex.value + 1) % initTestTabs.value.length
}

const addInitTab = () => {
  const newIndex = initTestTabs.value.length + 1
  initTestTabs.value.push({
    label: `初始${newIndex}`,
    value: `init${newIndex}`
  })
}

const removeInitTab = () => {
   if (initTestTabs.value.length > 1) {
     initTestTabs.value.pop()
     if (initActiveIndex.value >= initTestTabs.value.length) {
       initActiveIndex.value = initTestTabs.value.length - 1
     }
   }
 }
 
 const rapidToggle = () => {
   // 快速切换测试，模拟可能导致实例为null的场景
   let count = 0
   const interval = setInterval(() => {
     showInitTest.value = !showInitTest.value
     count++
     if (count >= 6) {
       clearInterval(interval)
       showInitTest.value = true
     }
   }, 200)
 }
</script>

<style scoped>
.test-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.test-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.test-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  display: block;
}

.test-item {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.test-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: #666;
  margin-bottom: 15px;
  display: block;
}

.test-desc {
   font-size: 14px;
   color: #999;
   margin-bottom: 10px;
   display: block;
 }
 
 .test-info {
   margin-top: 15px;
   padding: 10px;
   background-color: #f0f9ff;
   border-radius: 8px;
   border-left: 4px solid #007AFF;
 }
 
 .test-info text {
   font-size: 13px;
   color: #666;
   line-height: 1.4;
 }

.result {
  margin-top: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.result text {
  font-size: 14px;
  color: #666;
}

.test-buttons {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.test-btn {
  padding: 8px 16px;
  font-size: 14px;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.test-btn:active {
  opacity: 0.7;
}
</style>